$nextTick应用场景：
1.如果要在‘created()’ 钩子函数中进行DOM操作，因为created（）在调用时，DOM渲染还未完成，所以无法直接操作，需要通过
$nextTick（） 来完成
created: 实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，还未开始编译模板
mounted: 此时，已经将编译好的模板，挂载到了页面的指定容器中显示
<template> <div> <h1 ref='h1'></h1> </div> </template> <script> export default{ data(){ return { msg:"nextTick案例" } }, created(){ this.$nextTick(()=>{ this.$refs.h1.innerHTML = '修改内容' }) } } </script> <style> </style>2. 更新数据后，想要使用js对新的视图进行操作时
<template> <div> <h1 ref='h1'>{{msg}}</h1> <button class='btn btn-primary' @click='test'>Test</button> </div> </template> <script> export default{ data(){ return { msg:"nextTick案例" } }, methods:{ test(){ this.msg = '123' console.log(this.$refs.h1.innerHTML) //拿到的仍然是修改前的数据 //这样才能拿到修改后的数据 this.$nextTick(()=>{ console.log(this.$refs.h1.innerHTML) }) } } } </script> <style> </style>
