Vue----$nextTick()理解

Vue—$nextTick()

---

1.引出问题

2.$nextTick(callback)

---

1. 引出问题-例子

    <div id="example">{{message}}</div>

var vm = new Vue({
    el: '#example',
    data: {
    message: '123'
    }
})
    vm.message = 'new message' // 更改数据
    vm.$el.textContent === 'new message' // false

存在一个问题就是这里的数据并不能更新。
vue不是说好的响应式数据的吗？

官方给出的原因：

例如，当你设置 vm.someData = ‘new value’ ，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。

官方给出的方法就是：$nextTick(callback)

 Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue ，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上：

 Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

用我的思想解释

下面是一个输入框显示后自动聚焦的小栗子。

 <div id="app">
        <button @click="showAndHidden">显示/隐藏</button>
        <input type="text" v-show="flag" ref="myinput">
    </div>

let vm = new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {
                showAndHidden() {
                    // 这个代码是让input显示出来。显示出来能立刻显示出来？
                    // Vue中数据的变化会导致页面的渲染。这个过程是异步过程，不是立刻执行。
                    this.flag = !this.flag;
                    // flag 值改变后，不会立即再次渲染，意味着还没有进行再次的渲染，代码就已经执行完毕了
                    //if(this.flag) {
                        //this.$refs.myinput.focus();
                        // }
                        //所以等到再次渲染的时候，代码已经失效了。
                        // 但是如果你想在 DOM 状态更新后做点什么，就使用 ，$nextTick()
                    // 

                    // 下一个滴答。就是在页面渲染成功之后才执行。
                    this.$nextTick(()=> {
                        if(this.flag) {
                            this.$refs.myinput.focus();
                        }
                    })
                }
            }
        })

欢迎指正~~