Vue基础进阶 之 实例方法--生命周期

 在上一篇博客中我们知道生命周期的方法:

生命周期:

vm.$mount:手动挂载Vue实例;

vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听;

vm.$nextTick:将方法中的回调函数,延迟到DOM更新后;

 

Vue基础进阶 之 实例方法--生命周期

 

 

 

Vue基础进阶 之 实例方法--生命周期

 

需要进行手动的挂载实例:

Vue基础进阶 之 实例方法--生命周期

在vue中加入:

vm.$mount('div');

或者:

new Vue({
                data:{
                    username:'perfect'
                }
            }).$mount('div');

 

vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听;

Vue基础进阶 之 实例方法--生命周期

 

 由图看出,销毁了数据的绑定

function _destroy(){
            vm.$destroy();
            
            
            
        }

html:

<button @click="_destroy()">销毁</button>

 

 

vm.$nextTick:将方法中的回调函数,延迟到DOM更新后; 

定义两个属性:oldName,newName

初始加载的页面:

Vue基础进阶 之 实例方法--生命周期

 

 vue中定义的属性:

oldName:'AAA',
    newName:'BBB'

html:

oldName:<span ref='oldName'>{{oldName}}</span><br />
            newName:<span>{{newName}}</span>

加一句修改后的界面:

Vue基础进阶 之 实例方法--生命周期

vm.oldName='ccc';

 

执行下面的这一句代码时得到的是没有更新之前的值;

vm.newName=vm.$refs.oldName.textContent;

 

 

 

 

Vue基础进阶 之 实例方法--生命周期

 

 

 

使用.$nextTick将oldName的属性值赋值给newName;

 

 Vue基础进阶 之 实例方法--生命周期

 

以下两种写法代码均可实现:

//      vm.$nextTick(function(){
//          vm.newName=vm.$refs.oldName.textContent;
//          
//      });
        
        Vue.nextTick(function(){//全局的.$nextTick
            vm.newName=vm.$refs.oldName.textContent;
        })

 

实例方法--生命周期总的代码:

Vue基础进阶 之 实例方法--生命周期
 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>
实例方法--生命周期

 

上一篇:vue中的nextTick实现局部刷新


下一篇:Vue.2.0.5-深入响应式原理