Vue生命周期与setup深入详解

Vue生命周期与setup深入详解

在Vue中,每个组件都有自己的生命周期,其中包含了一些特定的事件和钩子函数,不同的钩子函数分别在组件的不同生命周期阶段触发,开发者可以针对不同的阶段进行函数的逻辑编写。在Vue3.x中,添加了新的组件选项setup,它也包含生命周期的概念,本文主要讲解Vue生命周期以及setup在Vue3.x中的应用和相关注意事项。

Vue生命周期

  1. 创建阶段(Initialization)

    在这个阶段内,Vue会进行部分初始化的工作,从而准备好组件渲染所需的内容。

    钩子函数:

    • beforeCreate: 在实例初始化之后,数据观测(data observer)和事件/watcher事件配置之前被调用。
    • created: 在实例创建完成之后被立即调用。在此阶段中,实例已完成:数据观测(data observer)、属性和方法的运算、watch/event事件回调。该钩子函数无法负责某些延迟需要的操作。因为此时并未渲染DOM,所以无法访问 $el 对象。
  2. 模板编译阶段(Template Compilation)

    在这个阶段,Vue会进行模板编译,将模板转化成渲染函数。

    钩子函数:

    • beforeMount: 在挂载开始之前被调用,此时组件内DOM节点并未创建。
    • render:此阶段会渲染DOM,无钩子函数。
  3. 挂载阶段(Mounting)

    在这个阶段,Vue会将组件挂载到DOM中。

    钩子函数:

    • mounted: 在挂载完成后被调用,此时组件的DOM节点已经生成,对于需要进行一些DOM操作的逻辑,在该钩子函数中进行操作即可。
  4. 更新阶段(Updating)

    当数据更新时,Vue将会重新渲染组件。

    钩子函数:

    • beforeUpdate: 在数据更新之前被调用,可以在该函数中进行已有数据的修改,从而影响到渲染时的DOM。
    • updated: 在数据更新完成后被调用,此时DOM也已经更新完成。
  5. 卸载阶段(UnMounting)

    当组件被销毁时,Vue将会进入卸载阶段。

    钩子函数:

    • beforeUnmount: 在卸载开始之前被调用,此时DOM节点尚未被移除。
    • unmounted: 在卸载完成后被调用,此时DOM节点已经被移除。

setup

在Vue3.x中,新增了组件选项setup()函数。setup()函数会在组件被创建、props传递完毕,且在beforeCreate钩子函数之前调用。它接收两个参数:props(组件的props属性对象)和context(组件相关的属性和方法)。setup()函数必须返回一个对象,该对象中包含了组件中要使用到的响应式数据和方法。

示例1:setup函数的简单使用

<script>
  import { ref } from 'vue'

  export default {
    props: {
      title: String
    },
    setup(props) {
      const count = ref(0)
      const increaseCount = () => {
        count.value++
      }

      return {
        count,
        increaseCount
      }
    }
  }
</script>

在该示例中,我们定义了一个计数器变量count和一个增加计数器的函数increaseCount,并通过setup()函数将它们暴露出来。在组件模板中,在script标签内部拉取 count,以 {{}} 的方式进行绑定。ref作用是在声明变量时绑定引用关系,让变量成为响应式数据,setup()函数中的变量同样也是响应式的。

示例2:组件中的生命周期如何使用

<script>
  import { onMounted, onUnmounted } from 'vue'

  export default {
    setup(props) {
      onMounted(() => {
        console.log('mounted')
      })

      onUnmounted(() => {
        console.log('unmounted')
      })
    }
  }
</script>

在该示例中,我们使用了onMounted()onUnmounted()函数,这两个函数在组件中属于setup()阶段。当组件被挂载到页面上时,onMounted()函数会被调用,控制台输出“mounted”;当组件被卸载时,onUnmounted()函数会被调用,控制台输出“unmounted”。

总结

setup()函数是Vue3.x中新增的重要概念,它是响应式数据和生命周期的入口,并紧密关联Vue的全局API和组合式API。了解和熟练使用Vue组件的生命周期,以及setup()函数的使用方式和注意事项,可以更好地编写Vue应用程序,并优化程序的性能。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue生命周期与setup深入详解 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue实现百度下拉列表交互操作示例

    具体介绍 Vue是一款MVVM(Model-View-ViewModel)框架,它的核心是实现了双向数据绑定和组件化系统。双向绑定可以使数据的修改和视图的更新同步进行,显著提高了开发效率和协作效率;组件化系统可以将页面拆分成多个独立的模块,提高代码重用性,并且允许多人协同开发大型项目。Vue的虚拟DOM机制以及其性能表现也更加优秀,使其与Angular和Re…

    Vue 2023年5月28日
    00
  • vue学习教程之带你一步步详细解析vue-cli

    Vue学习教程之带你一步步详细解析vue-cli 前言 Vue.js是一个轻量级的JavaScript框架,它与React和Angular一起组成了前端三大框架。Vue.js由开发者Evan You创建,它的双向数据绑定和组件化思想极大地提高了前端开发的效率。 随着Vue.js的发展,它的生态系统也日益完善。vue-cli是Vue.js的脚手架工具,它可以帮…

    Vue 2023年5月27日
    00
  • vue:内存泄露详解

    下面我将为您详细讲解 “vue:内存泄露详解” 的攻略。 1. 什么是内存泄漏? 内存泄漏指程序在申请内存后,由于某种原因,未能及时归还系统造成的系统内存浪费的现象。在一个程序正常的运行过程中,为了提高效率,程序会申请内存。但是程序员忘记了回收内存,或者程序代码中存在内存泄漏缺陷,导致程序在一段时间后出现卡顿或者崩溃的现象。 2. Vue中的内存泄漏 在Vu…

    Vue 2023年5月27日
    00
  • 详解vue axios二次封装

    下面是“详解vue axios二次封装”的完整攻略。 一、为什么需要封装axios? 在Vue应用中发起网络请求,一般会选择使用axios库。因为axios具有一系列强大的功能,比如:支持Promise,支持取消请求,拦截请求和响应,自动转换JSON格式等。但是,如果我们直接使用axios,会有一些不方便的地方,比如:每个请求都需要设置baseUrl、每个请…

    Vue 2023年5月28日
    00
  • vue中将html字符串转换成html后遇到的问题小结

    针对“vue中将html字符串转换成html后遇到的问题小结”这个问题,我将从以下几个方面进行详细讲解: 背景介绍 问题的产生 解决方式 相关示例 1. 背景介绍 在开发vue项目时,我们可能会遇到需要将一个html字符串转换成html元素并显示在页面中的需求,这时我们可以使用vue的内置指令v-html来进行处理。但是,我们在使用v-html时,有可能会遇…

    Vue 2023年5月27日
    00
  • vue3中使用Apache ECharts的详细方法

    在Vue3中使用Apache ECharts的方法,可以通过以下步骤来实现: 步骤1:安装ECharts 可以通过NPM来安装ECharts,输入以下命令来安装最新版本的ECharts: npm install echarts 步骤2:在Vue3中引入ECharts 可以在Vue3中使用ECharts,只需要在需要使用的组件中引入ECharts即可,例如: …

    Vue 2023年5月28日
    00
  • vue使用Print.js打印页面样式不出现的解决

    当我们使用 Vue 和 Print.js 打印页面时,可能会发现打印出来的样式完全不同于实际页面的样式,这里提供一种解决方法。 问题分析 我们首先需要了解,Print.js 是基于浏览器打印机的 JavaScript 插件,它通过重构 HTML 并针对特定媒体类型(例如打印机或 PDF 输出)重新生成 CSS 样式表,并提供可定制的打印选项。然而,Print…

    Vue 2023年5月27日
    00
  • 详解Vue中一种简易路由传参办法

    当我们使用Vue进行开发时,经常需要进行路由跳转和传参。路由传参可以方便我们在不同页面之间传递数据,实现页面之间的交互和通讯。本文将介绍一种简易的Vue路由传参方法,仅需使用Vue的内置方法即可实现。 一、Vue内置方法$router.push() Vue内置了一个$router方法,可以用于进行路由跳转。在进行页面跳转的时候,我们可以利用这个方法进行路由参…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部