Описание: Я просто маленький фронтенд, только начинающий, вы можете направлять меня, но не распыляйте меня, хотя я знаю, что я мусор! Люди, они все должны расти! Босс, пожалуйста, посоветуйте! ! !

Я только что написал проект, похожий на акции Yu, некоторое время назад. График K-line выше должен обновляться в режиме реального времени, поэтому мне нужно сделать пульс с vue. Конечно, вы также можете использовать веб-сокет. парни считают, что это должно быть очень просто, но я всего лишь небольшой интерфейс, только начинающий, поэтому запишите это.

идеи

На самом деле, идея очень проста, мы должны сначала понять жизненный цикл и Vue Vue встроенные функции, идея состоит в том, чтобы определить таймер, а затем вернуться сроки запроса, чтобы наконец закрыть этот таймер, ха-ха Не все ерунда, но это так, вы можете пойти попробовать.

Резюме реализации этой небольшой функции

Сначала я чувствовал себя очень просто, разве это не просто биение сердца, вmethodsопределитьtimerфункция возвращаетsetIntervalс однимgetDataфункция, вtimerвызыватьgetData, затем вcreatedБудет проблема в его вызове, то есть на только что введенной странице не будет данных, почему все должны знать, то есть это вызов таймера и запрос фона только когда время вышло, это не хорошее решение, вcreatedзвонит один разgetDataРазве не было бы хорошо, хм, я сделал это, хотя я чувствовал себя не очень разумно, ах ах ах, это раздражает, я не знаю, как это написать в первый раз, я все еще использую код, чтобы выразить это , так понятнее......

первое издание, это очень неразумно, потому что это загрузит страницу и отправит данные дважды, и есть большая мина, то естьsetIntervalНе выключится при удалении веб-страницы, а при повторном входе на страницу таймер ускорится.Этот баг должен быть из-за того, что страница переключения vue не обновляется.Пожалуйста, подскажите.

<script>
    export default {
        created() {
            this.timer()
            this.getData()
        }
        methods: {
            // 这是一个获取数据
            getData() {
                .....
            }
            // 这是一个定时器
            timer() {
                return setInterval(()=>{
                    this.getData()
                },5000)
            }
        },
        destroyed() {
			clearInterval(this.timer)
        }
    }
</script>

второе издание, сделал доработки, поставилsetIntervalзаменяетсяsetTimeout,потому чтоsetTimeoutОн выполняется только один раз, поэтому он зависит от функции для его управления, а затем я использовалupdated, у него также есть недостаток, то есть при обновлении определенных данных он будет срабатывать, поэтому иногда он будет выполняться несколько раз.

<script>
    export default {
        created() {
            this.getData()
        }
        methods: {
            // 这是获取数据的函数
            getData() {
                .....
            }
            // 这是一个定时器
            timer() {
                return setTimeout(()=>{
                    this.getData()
                },5000)
            }
        },
        updated() {
          this.timer()  
        }
        destroyed() {
			clearTimeout(this.timer)
        }
    }
</script>

Окончательный версия

мониторlistПока он изменяется, срабатывает таймер, который решает многократное срабатывание обновлений.

<script>
    export default {
        data() {
            return {
                list: []			// 获取的数据列表
            }
        }
        created() {
            this.getData()
        }
        methods: {
            // 这是获取数据的函数
            getData() {
                .....
            }
            // 这是一个定时器
            timer() {
                return setTimeout(()=>{
                    this.getData()
                },5000)
            }
        },
        watch: {
            list() {
          		this.timer()  
            }
        }
        destroyed() {
			clearTimeout(this.timer)
        }
    }
</script>

Суммировать

Главное — понять хуковую функцию Vue. Может быть много лазеек, я надеюсь, что босс может дать мне больше советов, и я пишу в первый раз, мне немного не хватает слов, пожалуйста, потерпите меня.

смеяться над жизнью