vue生命周期（lifecycle）以及对nextTick的理解

 1 var vm = {
 2     el: ‘#app‘,
 3     data: {
 4         message: ‘hello world.‘
 5     },
 6     beforeCreate: function() {
 7         // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
 8         // 在这个生命周期里，vue实例还只是空壳，数据和dom结构都还没有加载
 9         console.log(this.message);  // undefined
10     },
11     created: function() {
12         // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 目前不可见。
13         // 在这个生命周期里，数据已经加载完成，并且在这里面修改数据并不会出发update函数。
14         // 一般情况下会在这里面做一些异步数据的获取，比如说从服务器获取数据到本地。
15         console.log(this.message);  // ‘hello world‘
16     },
17     beforeMount: function() {
18         // 在挂载开始之前被调用：相关的 render 函数首次被调用。
19         // 在这里面，虚拟DOM已经加载完毕，但是对应的真实DOM还未加载，在这里面是获取不到真实DOM结点的。
20         // 接下来执行render，加载真实DOM。
21         // 在这里面进行数据修改依旧不会触发update函数。
22     },
23     mounted: function() {
24         // 在这里面，真实DOM、数据、事件处理已经加载完毕，可以进行对应的修改。
25         // 从这里开始进行数据修改都会触发update函数。
26     },
27     beforeUpdate: function() {
28         // 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
29         // 这个没啥好说的，在数据修改（或者说要重新进行渲染）的时候会触发的钩子函数。
30         // 值得注意的是，千万不要在这里面进行数据修改，否则会陷入死循环！道理你自己思考一下就知道为什么了！
31 
32     },
33     updated: function() {
34         // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
35         // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
36         // 同样的，在数据修改完毕之后会调用的钩子函数。
37         // 在这里面一样不能进行数据修改！！！谨记！！！
38         
39     },
40     beforeDestroy: function() {
41         // 实例销毁之前调用。在这一步，实例仍然完全可用。
42         // 销毁前执行（手动使用$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等。
43     },
44     destroyed: function() {
45         // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
46         // 组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后。
47     }
48 }

 1 <template>
 2   <div>
 3     <span ref="span">{{ message }}</span>
 4   </div>
 5 </template>
 6  
 7 <script>
 8 export default {
 9   name: ‘test‘,
10   data () {
11     return {
12       message: "初始值"
13     }
14   },
15   methods:{
16     changeMsg: function(){
17       this.message =  "修改后的值";
18       console.log(this.$refs.span.innerText);   //原始值
19     }
20   },
21   created() {
22       this.changeMsg();
23   }
24 }
25 </script>

 1 <template>
 2   <div>
 3     <span ref="span">{{ message }}</span>
 4   </div>
 5 </template>
 6  
 7 <script>
 8 export default {
 9   name: ‘test‘,
10   data () {
11     return {
12       message: "初始值"
13     }
14   },
15   methods:{
16     changeMsg: function(){
17       this.message =  "修改后的值";
18       this.$nextTick(function(){
19         console.log(that.$refs.span.innerText);  //修改后的值
20       });
21 
22     }
23   },
24   created() {
25       this.changeMsg();
26   }
27 }
28 </script>
29