急速了解vue生命周期-白红宇

1、目标

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

html代码如下


        
     {
   { message }}
    
     {
   { computedMessage }}
    
复制代码

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了，也就是说所有属性，事件都在，只是不能响应式变化了复制代码