业界熟知：vm.$nextTick(callback) 将回调延迟到下次DOM更新循环后执行。修改数据后立即使用，然后等到DOM更新。（一般在修改数据后使用，以便“即时”获取“最新DOM”）
我们来看一个例子：
<div id="app"> <p ref="title">{{name}}</p> </div> //js var vm=new Vue({ data:{ name:'tom' } }).$mount('#app'); vm.name="汤姆"; // 下面一行 发现 没有更新！ console.log(vm.$refs.title.textContent); // tom为什么？
vue是响应式！ DOM更新有延迟 —— 到上面代码最后一行时DOM还没更新完。
那我们把上面代码最后一行换成如下形式：
vm.$nextTick(function(){ console.log(vm.$refs.title.textContent); // 汤姆 })这就可以了。
$nextTick 的妙处就在于此：通知视图层（DOM元素）赶快更新！ 并获取最新值
与此功能相似的，在vue中可不止一个：computed 和 watch
=> 计算属性 “ 注重 ” 过程（变化）！它讲究的是（实时）计算 ——过程 ：通过函数return操作，直接在“{{}}”中调用即可。
它有缓存！在依赖的数据被修改时才会被触发。 （HTML中使用的相关（data）数据名是computed中的函数名！）（注意和下面的区分）
它适用于复杂的数据操作，这里没有使用的必要。。。
注重 （实时）监视 ——结果 watch里的函数名都是（要获取的）数据名！
var vm=new Vue({ el:'#app', data:{ }, watch:{ name:(newValue)=>{ console.log("更新过的值为："+newValue); } } })p标签不用改动。
但是，比如这样：
<p>{{user.id}}</p> //js data:{ user:{ id:1001 } }, watch:{ user:(oldValue)=>{ console.log("值为："+oldValue); } }并不会有值被获取到！ -> 这涉及到“ 深度监视 ！ ”
对于这种嵌套的数据，我们应该这样写：
watch:{ user:{ handler:(newValue)=>{ console.log(newValue.id); }, deep:true } }（这两个选项：handler和deep，只能是这两个，这是固定格式，不能变）
但是，深度监视不会拿到原值！
行舟客 认证博客专家 ECMAScript 6 Node.js CSS 江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源；曾参与过中大型微信小程序项目前端开发，并主导过一些官网（原生）开发；着迷于vue、node、css以及原生js技术。热衷研究现有技术的成型创新应用。目前对前端可视化和webRTC、web安全有浓厚的兴趣。开源且目前维护的有：微信小程序扩展组件库—— https://github.com/1314mxc/yunUI ，欢迎star！