Vue--Vue.nextTick()的使用

时间 2019-11-07

标签 vue vue.nexttick nexttick 使用繁體版

原文原文链接

　　　Vue.nextTick()是比较经常使用到的APIhtml

　　　Vue官网对它的解释是：在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。vue

　　　首先要明白Vue的响应式原理（官网有详细的解释）：在data选项里全部属性都会被watch监控，当修改了data的某一个值，并不会当即反应到视图中。vue将你对data的更改放到watcher的一个对列中（异步），只有在当前任务空闲时才会去执行watcher队列任务。这就有一个延迟时间了（咱们看起来是直接反映到视图的，其实并非！！，只是浏览器引擎在很短的时间内就比较完了数据的先后差别并更新到视图里）。官网有个很清晰的例子：浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.js"></script>
    
</head>
<body>
    <div id="app">
        <example></example>
    </div>
</body>
<script>
        Vue.component('example', {
              template: '<span>{{ message }}</span>',
              data: function () {
                return {
                      message: '没有更新'
                }
              },
          mounted () {
              this.updateMessage();
          },
        methods: {
            updateMessage: function () {
              this.message = '更新完成'
              console.log(this.$el.textContent) // => '没有更新'
              this.$nextTick(function () {
                console.log(this.$el.textContent) // => '更新完成'
              })
            }
          }
        })
        new Vue({
            el:'#app'
        })    
    </script>
</html>

　　在视图上最终显示更新完成，但在控制台console.log就不同了app

　　在updateMessage函数里改变了msg的值（异步），下一步打印 msg （同步）能够看出打印的是‘没有更新’ 【注意：改变data的某个值，再当即引用，是常常犯的一个错误】，为了规避这个错误，就有了nextTick( ) ,如今再结合官网的那两句话，是否是清晰不少呢？视图更新完了就调用nextTick(),此时数据也就更新完了并且插到视图。异步

　　那什么场景须要使用到nextTick( ) 呢？函数

　　　　　　待续。。。。。。。this

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2017-06-28 00：31spa