生命周期都有哪些,父子组件生命周期运行顺序?

news/2024/7/9 23:42:40 标签: vue, 前端

生命周期:

 

        

 

        created: 实例创建完成,可访问data、computed、watch、methods上的方法和数据,未挂载到DOM,不能访问到el属性,el属性,ref属性内容为空数组常用于简单的ajax请求,页面的初始化

        beforeMount:在挂载开始之前被调用,beforeMount之前,会找到对应的template,并编译成render函数

        mounted:实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问

常用于获取VNode信息和操作,ajax请求

        beforeupdate:响应式数据更新时调用,发生在虚拟DOM打补丁之前,适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器

        updated:虚拟 DOM 重新渲染和打补丁之后调用,组件DOM已经更新,可执行依赖于DOM的操作,避免在这个钩子函数中操作数据,可能陷入死循环

        beforeDestroy:实例销毁之前调用。这一步,实例仍然完全可用,this仍能获取到实例

常用于销毁定时器、解绑全局事件、销毁插件对象等操作.

       destroy:实例销毁

父子组件生命周期运行顺序

  • 挂载:父亲created --> 子created --> 子mounted --> 父mounted
  • 更新/销毁:父beforeupdated/beforedestroyed--> 子beforeupdated/beforedestroyed--> 子updated/destroyed --> 父updated/destroyed

可以好好想想现实:先有父,再有子, 挂载子的dom,再挂载父的dom;先父亲准备更新,子准备更新,子更新,再父亲更新


http://www.niftyadmin.cn/n/861235.html

相关文章

ajax请求放在哪个生命周期合适?

mounted,这时dom 渲染出来,可以操作dom; 而且ajax 为异步,假如放在前面,那么异步导致created 中断的话,又要重新开始。

父子之间通信方法

父传子 父&#xff1a; <子组件名 :users "data"><子组件名/> 子: props: {users:{} } 子传父 子&#xff1a; 方法&#xff08;&#xff09;{this.$emit(title,ok) } 父&#xff1a; <子组件名 :title show> </子组件名>show(…

异步解决回调的方案:promise, async await

Promise(异步): 语法&#xff1a; const p1 new Promise((reslove,reject)>{console.log(2);reslove(1) }).then((data)>{console.log(3); }).catch((data)>{console.log(3); })// 输出&#xff1a; 2 3 状态&#xff1a; pending&#xff1a; 在过程中 fulfilled:…

http 常见必背状态码

1XX&#xff1a;请求被接受&#xff0c;需要继续处理。 2XX&#xff1a;200&#xff08;请求成功&#xff09; 3XX&#xff1a;301&#xff08;重定向&#xff1a;永久移动&#xff09; 302&#xff08;重定向&#xff1a;临时移动&#xff09; 304(资源未改变) 重定向的意思…

new一个实例经历的过程

var jack new people(age, sex) 这里new 一个实例&#xff1a; var jack {} people.prototype jack.__proto__ people.call(dod, age, sex);

继承的特点是?他的方法有哪些?方法的特点是?

特点&#xff1a; 一对象可以访问另一对象的属性和方法。 方法&#xff1a; 通过原型链继承&#xff1a;Student. prototype new people(...) 通过构造函数进行继承&#xff1a;Person.call(this, name, age)原型链构造函数&#xff1a;Person.call(this, name, age) Studen…

设计模式:观察者模式和发布-订阅模式区别

观察者模式: 定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 发布-订阅模式&#xff1a; 发布-订阅是一种消息范式&#xff0c;消息的发送者&#xff08;称为发布者&#xff09;不会将消息直…

Vue——computed和watch的区别

computed: 计算属性&#xff0c;依赖其他属性值&#xff0c;当依赖的属性值发生变化时&#xff0c;下一次获取computed 的值才会重新计算computed 的值 有缓存 watch 观察&#xff0c;类似于数据的监听回调&#xff0c;当监听的数据变化时会执行回调进行后调操作 运用场景 …