1、目标

举例说明在vue生命周期里el属性、data属性，computed属性，
watch属性，methods属性的变化情况
复制代码

html代码如下

<div id="app"><p @click="click">{{ message }}</p><p>{{ computedMessage }}</p>
</div>
复制代码

js代码如下(大致看一下就行了，最后看一下控制台打印结果就一目了然)

function destroy(){app.$destroy()
}
var app = new Vue({el: '#app',data: {message: "hello"},methods:{click: function(){destroy()console.log('click')}},watch: {message: function(){console.log('watcher')}},computed: {computedMessage: function(){return this.message + ' computed'}},beforeCreate: function () {console.group('beforeCreate 创建前状态===============》');console.log("%c%s", "color:red", "el     : " +JSON.stringify(this.$el)); console.log("%c%s", "color:red", "data   : " + this.$data);  console.log("%c%s", "color:red", "message: " + this.message)console.log("%c%s", "color:red", "computed: " + this.computedMessage)console.log("%c%s", "color:red", "methods: " + this.click)console.log("%c%s", "color:red", "_watchers: " + this._watchers)},created: function () {console.group('created 创建完毕状态===============》');console.log("%c%s", "color:red", "el     : " + JSON.stringify(this.$el)); console.log("%c%s", "color:red", "data   : " + this.$data);  console.log("%c%s", "color:red", "message: " + this.message); console.log("%c%s", "color:red", "computed: " + this.computedMessage)console.log("%c%s", "color:red", "methods: " + this.click)console.log("%c%s", "color:red", "_watchers: " + this._watchers)},beforeMount: function () {console.group('beforeMount 挂载前状态===============》');console.log("%c%s", "color:red", "el     : " + JSON.stringify(this.$el)); console.log("%c%s", "color:red", "data   : " + this.$data);   console.log("%c%s", "color:red", "message: " + this.message); console.log("%c%s", "color:red", "computed: " + this.computedMessage)console.log("%c%s", "color:red", "methods: " + this.click)console.log("%c%s", "color:red", "_watchers: " + this._watchers) },mounted: function () {console.group('mounted 挂载结束状态===============》');console.log("%c%s", "color:red", "el     : " + this.$el); console.log("%c%s", "color:red", "data   : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message); console.log("%c%s", "color:red", "computed: " + this.computedMessage)console.log("%c%s", "color:red", "methods: " + this.click)console.log("%c%s", "color:red", "_watchers: " + this._watchers) },beforeUpdate: function () {console.group('beforeUpdate 更新前状态===============》');console.log("%c%s", "color:red", "el     : " +this.$el);console.log("%c%s", "color:red", "data   : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);console.log("%c%s", "color:red", "computed: " + this.computedMessage)console.log("%c%s", "color:red", "methods: " + this.click)console.log("%c%s", "color:red", "_watchers: " + this._watchers)},updated: function () {console.group('updated 更新完成状态===============》');console.log("%c%s", "color:red", "el     : " +this.$el);console.log("%c%s", "color:red", "data   : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);console.log("%c%s", "color:red", "computed: " + this.computedMessage)console.log("%c%s", "color:red", "methods: " + this.click)console.log("%c%s", "color:red", "_watchers: " + this._watchers)},beforeDestroy: function () {console.group('beforeDestroy 销毁前状态===============》');console.log("%c%s", "color:red", "el     : " +this.$el);console.log("%c%s", "color:red", "data   : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);console.log("%c%s", "color:red", "computed: " + this.computedMessage)console.log("%c%s", "color:red", "methods: " + this.click)console.log("%c%s", "color:red", "_watchers: " + this._watchers)},destroyed: function () {console.group('destroyed 销毁完成状态===============》');console.log("%c%s", "color:red", "el     : " +this.$el);console.log("%c%s", "color:red", "data   : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message)console.log("%c%s", "color:red", "computed: " + this.computedMessage)console.log("%c%s", "color:red", "methods: " + this.click)console.log("%c%s", "color:red", "_watchers: " + this._watchers)}})
复制代码

2、数据初始化阶段，生命周期变化

初始化触发四个阶段： beforeCreate、created、beforeMount、mounted
复制代码

1、可以看到，beforeCreate阶段，什么都没有初始化
2、created阶段
2.1 el没有初始化
2.2 data有数据了
2.3 computed有数据了
2.4 methods 有数据了
2.5 watcher 有监控了
复制代码

3、beforeMount阶段
3.1 el初始化了，但没有挂载
3.2 data有数据了
3.3 computed有数据了
3.4 methods 有数据了
3.5 watcher 有监控了4、mounted阶段
4.1 el初始化了，也挂在到dom上了
4.2 data有数据了
4.3 computed有数据了
4.4 methods 有数据了
4.5 watcher 有监控了，注意，这里的watcher比上一个阶段多了一个
注：
第一个watcher是监控message属性变化，就刷新视图的
第二个watcher是监控computed里computedMessage属性的变化
但是computedMessage属性不能setter只能getter
多出来的一个watcher是关注vm._update属性的变化，然后刷新视图
复制代码

3、数据更新阶段，生命周期变化

我们调用app.message = 'heihei';观察生命周期的变化(跟上面mounted阶段一样)
复制代码

4、销毁组建

调用app.destory();watcher全部卸载,也就是调用app.message=123,是无效的
虽然下图看起来watcher还在，但是watcher有个active属性，是false了，
也就是说所有属性，事件都在，只是不能响应式变化了
复制代码