Vue生命周期中的八个钩子函数相机是怎样的

发布时间:2021-12-15 19:35:31 作者:柒染
来源:亿速云 阅读:122

Vue生命周期中的八个钩子函数相机是怎样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

1、beforeCreate和created函数

beforeCreate和created以初始化:数据监测、数据代理为分界线。

在执行beforeCreate()之前,将初始化生命周期、时间,但数据代理还没有开始。

(1)beforeCreate():在初始化数据监测、数据代理之前执行beforeCreate函数中的内容。此时,无法通过Vm访问到data中的数据、methods中的方法

(2)created():在初始化数据监测、数据代理之后执行beforeCreate函数中的内容。此时可以通过vm访问到data中的数据、methods中配置的方法

在数据挂载之前还有一个步骤,那就是Vue解析模板的过程(生成虚拟DOM),页面还不能显示解析好的内容。

2、beforeMount和mounted函数

(3)beforeMount():在Vue完成虚拟DOM的生成之后,在将虚拟DOM转换为真实DOM之前执行。此时,页面呈现的是未经Vue编译的DOM结构,所有对DOM的操作,最终都不奏效。

(4)mounted():在将虚拟DOM转换为真实DOM之后执行。此时,页面中呈现的是经过Vue编译的DOM,对DOM的操作均有效(尽可能避免)。至此初始化过程结束,一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作

3、beforeUpdate和updated函数

(5)beforeUpdate():在数据发生变化时,生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面更新(Model-》View)的过程之前执行。此时,数据是新的,但页面是旧的,即,页面尚未和数据保持同步

(6)updated():在数据发生变化时,生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面更新(Model-》View)的过程之后执行。此时,数据是新的,页面也是新的,即,页面和数据保持同步

4、beforeDestroy和destroyed函数

(7)beforeDestroy():在移除数据监视、子级元素、事件监听之前执行。此时,vm中所有的data、methods、指令等都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。此时所有东西都可访问到,但是执行操作,页面上的内容不会发生改变

(8)destroyed():在移除数据监视、子级元素、事件监听之后执行。解除与页面上data、methods、指令等的绑定。

看完上述内容,你们掌握Vue生命周期中的八个钩子函数相机是怎样的的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. Vue生命周期钩子函数
  2. vue中生命周期钩子函数有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:如何进行实现K8S资源成本监控可视化的分析

下一篇:linux如何修改path环境变量

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》