vue之生命周期

所有的钩子函数不能使用箭头函数，如：

created: () => console.log(this.a)

因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，会导致 Uncaught TypeError: Cannot read property of undefined

 

beforeCreate

实例创建前的状态，el与data都为undefined

看到一个很有趣的问题，怎么在这个钩子里面拿数据：

new Vue({
    el:"#app",
    data:{
        msg:'hello world'
    },
    beforeCreate(){
        this.$nextTick(function () {
        console.log('$nextTick  '+this.msg);
        })//2
        setTimeout(()=>{console.log('setTimeout  '+this.msg)},1000);//3
        console.log('$options  '+this.$options.data()["msg"]) //1
    }

})

created

实例创建完毕，el为undefined，data里面有数据

beforeMount

挂在前状态 elel与data都有相对应的属性

Mounted

挂载后状态 el与data都有相对应的属性

beforeUpdate

更新前状态 data里面属性值改变；

重新渲染之前触发，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染

发起数据请求不能在beforeUpdate中操作。会导致无限循环

只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发

updated

更新完成状态，data里面属性值改变，dom也重新render完成

发起数据请求不能在updated中操作。会导致无限循环

只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发

beforeDestroy

销毁前状态，一般在这里善后:清除计时器、清除非指令绑定的事件

destroyed

销毁后状态，卸载watcher，事件监听，子组件