首页 > 编程知识 正文

vue生命周期方法,react生命周期详解

时间:2023-05-03 15:47:36 阅读:11533 作者:3121

创建new Vue、vue组件时,运行生命周期;

Vue实例化方式:

vue-CLI2-运行时- compiler版本:

newvue(El:(#app (,组件: ) app ),/第一步,注册组件,完整) app:app (模板3360 ) app/(/第二步使用组件//可以直接在此使用: render:h=h(app ) vue-cli2-runtime-only版本(js文件中分析模板的代码较少) ) )

newvue(El:(#App ), render:h=h(App )/=render函数,其中返回的函数h ) app (:为虚拟DOM ) )/=此处的app和上边的运行时间的only版本的vue-temppy 不能在此处使用:模板3360 ' app/' vue-CLI 3版本:

newvue({render:h=h(App )、/=内部运行、生产虚拟dom,其中app是组件文件的对象,因此vue中的h ) )有两种参数。 }.$mount('#app ) )/=虚拟dom挂载Vue生命周期:

总结:

beforeCreate挂接:初始化并运行内部事件、生命周期;

created挂接:初始化vue原型,仅加载组件文件的对象格式(不是组件对象)、(仅加载未解析)和导入子组件的vue对象实例

beforeMount挂接:分析模板生成render函数,激活子组件的创建,在父组件将值传递给子组件后执行;

子组件开始生命周期,并在父组件中创建和装载;

如果子组件通过父组件传递值,而父组件在异步请求中检索值,则父组件在传递值之前解析undefined中的下一个挂接,以确定是否创建子组件

装载挂接:将子部件的虚拟dom与其vue实例对象、其render函数合并,形成最终的虚拟dom,然后装载并运行;

before更新挂钩:

更新挂钩:

基本目录挂钩:

destroyed挂钩:

1、创建前后:

beforeCreate :创建前挂接函数; 要运行挂接函数(如初始化并运行事件(事件)和生命周期函数(生命周期) ),请进行初始化);

created :创建后挂接函数; 初始化Vue原型(injections )、data和methods ),并将实例化对象的数据传递给Vue构造函数原型。如果内部有import子组件此时将子组件模板解析成普通对象形式,并导入,并没有执行use()将对象传入Vue.extend()模板构造器中,所以还没开始创建子组件其中,常用于发送请求和请求初始数据。

2、挂载前后:

beforeMount :挂载前挂接函数; 检查如何创建组件并编译要使用的模板组件,然后使用el自己的挂载元素(index.html中的)作为模板(如果没有外部template模板) http://www.sindex.html 生成并运行此组件,通过解析知道使用了子组件,并且有父传子的值也会传过去的render函数。 此时,我们只是分析了template部分(子组件的use ) )方法,然后开始创建子组件,该子组件尚未与实例相关联。 数据是变量的形式。 就像App.vue一样,

mounted :挂载后挂接函数; 等待创建并装载子组件,然后合并子组件的虚拟dom,合并以前创建的vue实例(数据、方法等),并将变量值传递给render函数并执行h (,h )自执行

带变量

beforeUpdate :更新前挂接函数; 当vue实例中的data数据发生更改时执行; 此时数据最新,页面尚未刷新;

更新:更新后的挂接函数; 在将更改的数据重新呈现到虚拟dom后运行;

4、销毁前后

beforeDestroy :预销毁挂接函数; 在触发组件销毁时执行(在组件切换中很常见)

destroyed :销毁后的挂接函数; 拦截并执行视图端观察者(数据与视图之间的桥梁、发布订阅模型的成员)、子组件和事件。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。