Vue中的生命周期及生命周期操作

vue里的生命周期是什么?
vue实例从创建到销毁的过程称之为vue的生命周期

vue的生命周期各阶段都做了什么?
beforeCreate 实例创建前:这个阶段实例的data、methods是读不到的
created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调。mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染
beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted:el选项的DOM节点 被新创建的 vm.$el 替换,并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
beforeUpdate:数据更新时调用,但不进行DOM重新渲染,在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
updated:这个状态下数据更新并且DOM重新渲染,当这个生命周期函数被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
beforeDestory:实例销毁之前调用。
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

vue生命周期在真实场景下的业务应用
created:进行ajax请求异步数据的获取、初始化数据
mounted:挂载元素内dom节点的获取
nextTick:针对单一事件更新数据后立即操作dom
updated:任何数据的更新,如果要做统一的业务逻辑处理
watch:监听具体数据变化,并做相应的处理

如何解释vue的生命周期才可以令面试官满意:

知识点:breforeCreate():实例创建前,这个阶段实例的data和methods是读不到的。

              Create():实例创建后,这个阶段已经完成数据观测,属性和方法的运算,watch/event事件回调,mount挂载阶段还没有开始。$el属性目前不可见,数据并没有在DOM元素上进行渲染。

              在谈及Vue的生命周期时,我们首先需要创建一个实例,也就是在new Vue()的对象过程中,首先执行了init(init是vue组件里面默认去执行的),在init的过程中首先调用beforeCreate,然后在injections(注射)和reactivity(反应性)的时候,再去调用created,所以在init的时候,事件已经调用了,我们在beforcreate的时候千万不要去修改data里面的赋值的数据,最早也要放在created里面去做(添加一些行为);

知识点:

beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted:el选项的DOM节点 被新创建的 vm.$el 替换,并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染

               在create完成之后,它会去判断instance(实例)里面是否含有“el”option(选项),如果没有的话。他会调用vm.$mount(el)这个方法,然后执行下一步;如果有的话,直接执行下一步。紧接着会判断时候含有“template”这个选项 ,如果有的话,他会把template解析成render function,这是一个template编译的过程,结果是解析成了render函数。

render (h) {
  return h('div', {}, this.text)
}
  (render函数:传参h就是Vue里面的createElement方法,return返回一个createElement方法,其中要传三个参数,第一个参数就是要创建的div标签,第二个参数穿了一个对象,对象里面可以是我们组件上面的props,或者是事件之类的东西;第三个参数就是div标签里面的内容,这里指向了data里面的text)

  使用render函数的结果和我们之前使用template解析出来的结果是一样的。render函数是发生在breforeMount和mount之间的,这也从侧面说明了,在breforeMount的时候,$el还只是我们在HTML里面写的节点,然后到Mount的时候,他就把渲染出来的内容挂载到了Dom节点上,这种的中间的过程其实是执行了render function的内内容。

beforeMount在有了render function的时候才会执行,当执行完render  function之后就会调用mounted这个钩子,在mounted挂载完毕之后,这个实例就算是走完了流程。

后续的钩子函数执行的过程都是需要外部 的触发才会执行。比如,有数据的变化,会调用beforeUpdate,然后经过Virtual  Dom,最后updated更新完毕,当组件被销毁的时候,会调用beforeDestory,以及destoryed。

钩子函数其实和回调函数是一个概念,当系统执行到某处时,检查是否有hook,有则回调。(每一个组件都有属性,方法和事件。所有的生命周期都归于事件,在某个时刻自动执行)。

原文:https://blog.csdn.net/weixin_38098192/article/details/80581328 

发布了29 篇原创文章 · 获赞 4 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/cccdf_jjj/article/details/89856624