Vue3中的声明周期

这篇具有很好参考价值的文章主要介绍了Vue3中的声明周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue2 和 Vue3 的声明周期:

  1. Vue2 的生命周期在Vue3中都可以正常使用;
  2. Vue3 的生命周期和Vue2不同的地方在于卸载组件前后的不同;
  3. Vue3 中组合式 API 还提供了onRenderTracked 和 onRenderTriggered 两个钩子,这两个主要是用来做调试的;

Vue2 和 Vue 3 周期的对照:

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured
export default {
  beforeCreate () {
    console.log('beforeCreate()')
  },

  created () {
    console.log('created')
  },

  beforeMount () {
    console.log('beforeMount')
  },

  mounted () {
    console.log('mounted')
  },

  beforeUpdate () {
    console.log('beforeUpdate')
  },

  updated () {
    console.log('updated')
  },

  beforeUnmount () {
    console.log('beforeUnmount')
  },

  unmounted () {
     console.log('unmounted')
  },
  

  setup() {
    
    const msg = ref('abc')

    const update = () => {
      msg.value += '--'
    }

    onBeforeMount(() => {
      console.log('--onBeforeMount')
    })

    onMounted(() => {
      console.log('--onMounted')
    })

    onBeforeUpdate(() => {
      console.log('--onBeforeUpdate')
    })

    onUpdated(() => {
      console.log('--onUpdated')
    })

    onBeforeUnmount(() => {
      console.log('--onBeforeUnmount')
    })

    onUnmounted(() => {
      console.log('--onUnmounted')
    })
    
    return {
      msg,
      update
    }
  }
}

文章来源地址https://www.toymoban.com/news/detail-668659.html

到了这里,关于Vue3中的声明周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端HTML、CSS、JS、VUE3 汇总

    学习https://developer.mozilla.org/zh-CN/docs/Learn/CSS 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 使用VS Code运行前端代码 在VS Code上安装前端插件 正在更新中~ ✨ 提示:这里可以添加本文要记录的大概内容: 学习路线 知识定位 HTML基础 标签、表格、表单、

    2024年02月13日
    浏览(49)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(51)
  • Vue3全家桶 - Vue3 - 【7】生命周期

    Vue3官网-生命周期钩子函数; 每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听、编译模板、挂载实例到 DOM ,以及在数据改变时更新 DOM 。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。最常见的是

    2024年03月13日
    浏览(57)
  • vue3 组件TS 类型声明

    要说今年最热门的前端技术,Vue3 和 TS 绝对榜上有名了。据了解,已经有很多公司在使用 Vue3 + TS + Vite 开发新项目了。那么我们也不能落后,今天就给大家分享一下如何在 Vue3 组件中结合 Composition-Api 使用 TS 类型。如果有不会或者不熟的小伙伴,一起学起来吧! 当使用 这被

    2023年04月08日
    浏览(36)
  • VUE3 函数的声明和使用

    在了解了响应式数据如何使用之后,接下来就要开始了解函数了。 在 Vue 2 ,函数通常是作为当前组件实例上的方法在 methods 里声明,然后再在 mounted 等生命周期里调用,或者是在模板里通过 Click 等行为触发,由于组件内部经常需要使用 this 获取组件实例,因此不能使用箭头

    2024年02月16日
    浏览(28)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(62)
  • vue3创建项目报错Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_ut

    报错信息: Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_util.parseArgs) is not a function     at init (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_modulescreate-vueoutfile.cjs:4481:72)     at Object.anonymous (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_module

    2024年04月10日
    浏览(145)
  • vue3-生命周期

    生命周期 vue 组件实例都有自己的一个生命周期 从创建-初始化数据-编译模版-挂载实例到 DOM-数据变更后更新 DOM -卸载组件 生命周期简单说就是 vue 实例从创建到销毁的过程 生命周期钩子 在各个周期运行时,会执行钩子函数,让开发者有机会在特定阶段运行自己的代码。这就

    2024年01月25日
    浏览(47)
  • vue3生命周期

    vue3也提供了Composition API形式的生命周期钩子,与vue2.x中钩子对应关系如下: beforeCreate = setup() created = setup() beforeMount =onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeUnmount onBeforeUnmount unmounted ===onUnmounted HomeView.vue App.vue 结果:

    2024年02月12日
    浏览(40)
  • Vue3通透教程【十二】TS类型声明优势

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2023年04月20日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包