vue生命周期过程简单叙述

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


分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档