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

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

生命周期：

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>

实例方法--生命周期

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

猜你喜欢

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