vue 组件的生命周期怎么只执行一次_vue组件及子组件的生命周期

生命周期

什么是生命周期？

一个实例从创建到销毁的一个过程。

vue初始化做了什么？

创建vue实例后，调用init方法，做了以下事情：

// 初始化生命周期

//

initLifecycle(vm)

// 初始化事件中心

initEvents(vm)

// 初始化渲染

initRender(vm)

callHook(vm, 'beforeCreate')

// 初始化注入

initInjections(vm) // resolve injections before data/props

// 初始化状态

// 初始化 props、data、methods、watch、computed 等属性

initState(vm)

initProvide(vm) // resolve provide after data/props

callHook(vm, 'created')

// 在初始化最后，如果检测到有el属性，则调用函数挂载vm

if (vm.$options.el) {

vm.$mount(vm.$options.el);

}

复制代码有哪些生命周期？分别做了什么？生命周期的执行过程？

--> 首先创建一个vue实例，Vue(),然后执行初始化init()函数，初始化生命周期、事件中心、渲染;

--> 然后调用beforeCreate：这里拿不到任何数据，数据观察(dataobserver)和事件配置(event/watcher)都没有准备好，没有数据，没有dom

--> 初始化data数据，实现监听，初始化vue内部事件，进行属性和方法的计算。

--> 初始化完成，调用created：这里可以调用methods中的方法，修改data数据， 并且可触发computed重新计算，watch变更等。但是dom还没有挂载，无法访问$el。

--> 然后进行模板编译：将data的数据，和vue的模板语法编译成html，这里会分两种情况，1.是实例内部有模板属性，直接调用，然后用render函数渲染，2.是没有模板属性调用外部html

--> 模板编译完成后，调用beforeMount：这里也可以拿到data数据，可以拿到el，且成功关联到了dom，但是此时的data，并没有渲染到页面中。

--> 然后执行render函数，将渲染的内容挂载到dom节点上

--> 挂载完毕，调用mounted：在这里，dom挂载完毕，data也已经渲染到页面中。mounted仅执行一次。

--> 数据发生变化，调用beforeUpdate：当检测到我们要修改数据的时候，就会触发beforeUpdate的钩子

--> 然后Vue会利用diff算法重新比较新的虚拟dom和旧的虚拟dom，对页面重新渲染。

--> 更新完成，执行updated：当修改vue的data时，vue会自动帮我们更新渲染视图，此时页面上是最新的数据，

避免在这期间更改状态，可能会导致无限循环

钩子不常用，一般用computed，watch

--> 在销毁之前触发，beforeDestroy：所有实例都可以用

--> 然后解除绑定，销毁子组件，事件监听器

--> 销毁完毕，调用destroyed：销毁之后，所有