vue的生命周期钩子
vue的生命周期钩子
生命周期过程：
new vue() ：vue实例进行初始化，读取所有生命周期函数，并没有执行（不会调用）
beforeCreate()：创建前，读取属性，计算属性，添加set/get，读取watch
created() ： 创建完成，可以操作数据（ajax），判断是否有el配置/被调用了$mount()，判断是否存在el配置/$mount作用的dom结构
beforeMount() ： 将dom结构读取出来，渲染dom结构（挂载的过程）
mounted() ： 可以操作dom了，可以使用ref了
跟用户交互、操作数据，在vue工作期间发生了数据变化，数据变化导致dom需要重新渲染，下面两个更新生命周期的方法指的是dom的更新：
beforeUpdate()
updated()
直到执行了$destory()，或者dom结构不在了，vue实例就会销毁
beforeDestory()
distoryed()
vm.$mount() ： 挂载vm实例（vm实例作用在dom结构上）
vm.$destory() ： 销毁实例和dom的关联，不提倡手动调用$destory
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world',
arr: ['item1', 'item2', 'item3'],
obj: {
name: 'zhangsan'
}
},
computed: {
len(){
return this.msg.length;
}
},
watch: {
msg(newVal, oldVal){
console.log('监听到了msg的变化');
},
arr(){
console.log('监听到了arr的变化');
}
},
methods: {
test(){
console.log('test执行了');
},
btnAction(){
this.$destroy();
},
btn2Action(){
//强制更新dom
this.$forceUpdate();
},
btn3Action(){
this.msg = 'hello vue';
},
btn4Action(){
this.arr.push('item4');
//监听一个属性发生变化导致的dom的更新。
//写$nextTick要求是，数据变化后的代码紧接着写$nextTick
this.$nextTick(()=>{
console.log('dom也变化了');
});
}
},
//生命周期函数
//创建前
beforeCreate(){
console.log('beforeCreate.....');
console.log(this.msg);
},
//创建完成，ajax,操作数据
created(){
console.log('created....');
console.log(this.len);
this.test();
},
beforeMount(){
console.log('beforeMount....');
console.log(this.$refs);
},
mounted(){
console.log('mounted....');
console.log(this.$refs);
},
beforeUpdate(){
console.log('beforeUpdate....');
},
updated(){
console.log('updated....');
},
beforeDestroy(){
console.log('beforeDestroy....');
},
destroyed(){
console.log('destroyed....');
}
})
版权声明：本文为xgs123原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。