vue $nextTick 应用

vue 是异步渲染框架,数据更新后，dom并不会立刻更新。

nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

        （简单说是数据在dom渲染完成后，在调用nextTick自动执行函数）

使用场景：

1 在created执行dom操作，一定放到nextTick中执行

2 在数据变化后执行的操作，这个操作是dom结构发生变化时调用nextTick

3 (简单来说dom发生变化，需要用到nextTick)

改变message

data(){

  return{

    message:'word',

    message1:''

  }

},

methods:{

  changeMsg(){

    this.message = '你好';

    // word（并没拿到想要的‘你好’--vue 是异步渲染框架,数据更新后，dom并不会立刻更新。）

    this.message1 = this.$refs.msg.innerHTML;

    //解决以上方法有两种方法

    //1）

    setTimeout(()=>{

      this.message1 = this.$refs.msg.innerHTML;

    },200)

    //2

    this.$nextTick(()=>{

      this.message1 = this.$refs.msg.innerHTML;

    })

  }

}