在上一篇博客中我们知道生命周期的方法：
生命周期：
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>
实例方法--生命周期