Vue中created、computed、mounted的执行顺序

  1. 是created先执行。因为created是初始化data中的值。因此最先执行;
  2. 然后是 执行computed中的,因为此时html正在被渲染,computed发生在 created 和 mounted 之间;
  3. 最后是mounted()因为这个函数此时已经将页面渲染完成了。

写一个demo验证一下: 在这里插入图片描述
控制台输出结果:在这里插入图片描述

扩展一下钩子函数的触发时间:

beforeCreate
在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

beforeUpdate
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。

beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

  • 10
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
Vue.js 是一款流行的 JavaScript 框架,它提供了很多功能和选项,以便我们在前端开发更加高效地工作。其vue watch created computed mountedVue 实例的生命周期最重要的几个钩子函数,它们分别承载着 Vue 实例生命周期不同的任务,下面就一一介绍。 首Vue 实例的 created 钩子函数。这个钩子函数会在 Vue 实例创建完成后立即执行,但此时 DOM 元素还未挂载到页面。在 created 钩子函数,我们可以进行一些数据的初始化、事件的监听以及异步请求数据的操作等。 其次是 Vue 实例的 mounted 钩子函数。这个钩子函数会在 Vue 实例挂载到页面后执行,在 mounted 钩子函数我们可以访问到 DOM 元素,进一步操作 DOM 元素或者执行异步操作。同时,mounted 也是与第三方库集成的最佳时机,例如第三方图表库、地图库等。 另外一个重要的钩子函数是 computedcomputed 计算属性可以根据实例的数据变化自动计算出最新的数据。与 vue watch 不同,computed 计算属性一般用于声明式依赖关系,也就是当计算属性所依赖的数据发生变化时,它们会自动重新计算,无需考虑如何手动重新计算。 最后一个重要钩子函数是 vue watch。vue watch 用于观察 Vue 实例的属性值的变化。它包括了两个参数:第一个参数是需要观察的属性名,第二个参数是观察到属性值变化后需要做的处理函数。观察的属性值变化可以是数据、计算属性以及某个具体的 DOM 元素的变化。 总之,vue watch created computed mountedVue.js 非常常见的几个生命周期钩子函数,它们分别承载着不同的任务。在使用 Vue.js 时,了解这些生命周期钩子函数的作用和执行顺序是十分必要的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值