2019-11-16 seo达人
vue 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程。设置数据监听、编译模板、挂载等等。vue生命周期还是不太容易理解,这里就简单地说一下它的整个过程。
1创建一个vue实例
new vue({
data () {
return {
}
}
})
2 初始化事件和生命周期 beforeCreate 创建实例之前执行的钩子函数
3 初始化·注入和校验 created 实例创建完成后执行的钩子
new vue ({
data () {
return {
a: 1
}
},
created: function () {
console.log('created')
}
})
4 渲染页面 编译 beforeMount 将编译完成的html挂载在虚拟dom时执行的钩子
5 mouted钩子 挂载完毕对数据进行渲染 会做一些ajax情求初始化数据 mounted整个实例过程中只执行一次
new vue ({
data () {
return {
a: 1
}
},
created: function () {
console.log('created')
},
// 一些钩子函数
mouted: function () {
console.log('mounted')
}
})
6 修改数据 beforeUpdate 更新之前的钩子
7 updated 修改完成重新渲染
8 准备解除绑定子组件以及事件监听器 beforeDestroy
9 销毁完成 destroyed