Vue中的生命周期
一、vue的生命周期是什么vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。在组件中具体的方法有:beforeCreate () {} 创建实例以前, 此时的 DOM 还是语法, data 内的数据还没有created () {} 创建实例以后, 此时 DOM 还是语法, data 内已经有数据了beforeMo
一、vue的生命周期是什么
vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。在组件中具体的方法有:
beforeCreate () {} 创建实例以前, 此时的 DOM 还是语法, data 内的数据还没有
created () {} 创建实例以后, 此时 DOM 还是语法, data 内已经有数据了
beforeMount () {} 挂载以前, 渲染页面以前, 此时 DOM 还是语法, data 内已经有数据了
mounted () {} 挂载以后, 渲染页面以后, 此时 DOM 正常了, data 内的数据正常
beforeUpdate () {} 更新以前, 该组件内容修改之前, data 内的数据是修改前的数据
undated () {} 更新以后, 该组件内容修改之后, data 内的数据就是修改后的数据
beforeDestroy () {} 销毁前, 当你需要销毁该组件的时候, 销毁之前使用
destroyed () {} 销毁后, 组件完全销毁完毕
具体如下图:
二、vue生命周期的在项目中的执行顺序
...
data () {
return {
rendered: false,
}
}
...
1.beforeCeate(){
console.log(this.rendered); // undefined
}
2.created() {
console.log(this.$el);//undefined
console.log(this.rendered); // false
}
3.beforeMount() {
console.log(this.$el);//undefined
}
4.mounted() {
console.log(this.$el);
}
5.beforeDestroy(){
console.log(this.$el);
console.log(this.rendered);
}
6.destroyed() {
console.log(this.$el);
console.log(this.rendered);
}
三、vue中内置的方法 属性和vue生命周期的运行顺序(methods、computed、data、watch、props)
props => methods =>data => computed => watch
更多推荐
所有评论(0)