在上一篇博客中我们知道生命周期的方法：
生命周期：
vm.$mount：手动挂载Vue实例；
vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；
vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；
需要进行手动的挂载实例：
在vue中加入：
vm.$mount('div');
或者：
new Vue({ data:{ username:'perfect' } }).$mount('div');
vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；
由图看出，销毁了数据的绑定
function _destroy(){
vm.$destroy();
}
html:
<button @click="_destroy()">销毁</button>
vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；
定义两个属性：oldName,newName
初始加载的页面：
vue中定义的属性：
oldName:'AAA', newName:'BBB'
html：
oldName:<span ref='oldName'>{{oldName}}</span><br /> newName:<span>{{newName}}</span>
加一句修改后的界面：
vm.oldName='ccc';
执行下面的这一句代码时得到的是没有更新之前的值；
vm.newName=vm.$refs.oldName.textContent;
使用.$nextTick将oldName的属性值赋值给newName;
以下两种写法代码均可实现：
// vm.$nextTick(function(){ // vm.newName=vm.$refs.oldName.textContent; // // }); Vue.nextTick(function(){//全局的.$nextTick vm.newName=vm.$refs.oldName.textContent; })
实例方法--生命周期总的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 08_常用的实例方法-生命周期</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 8 </head> 9 <body> 10 <div> 11 <input type="text" v-model="username" /><br /> 12 用户名：<span>{{username}}</span><br /> 13 <button @click="_destroy()">销毁</button><br /> 14 15 oldName:<span ref='oldName'>{{oldName}}</span><br /> 16 newName:<span>{{newName}}</span> 17 18 19 </div> 20 </body> 21 22 <script> 23 24 25 // let vm= new Vue({ 26 // //el:'div', 27 // data:{ 28 // 29 // username:'perfect' 30 // 31 // 32 // } 33 // 34 // }); 35 36 // vm.$mount('div'); 37 let vm= new Vue({ 38 data:{ 39 username:'perfect', 40 oldName:'AAA', 41 newName:'BBB' 42 } 43 }).$mount('div'); 44 45 vm.oldName='ccc'; 46 47 // vm.newName=vm.$refs.oldName.textContent; 48 49 // vm.$nextTick(function(){ 50 // vm.newName=vm.$refs.oldName.textContent; 51 // 52 // }); 53 54 Vue.nextTick(function(){//全局的.$nextTick 55 vm.newName=vm.$refs.oldName.textContent; 56 }) 57 function _destroy(){ 58 vm.$destroy(); 59 60 61 62 } 63 64 65 </script> 66 </html>