您现在的位置是:首页 > 正文

vue生命周期的传统写法和setup语法糖写法

2024-04-01 07:29:34阅读 2

在这里插入图片描述
🙂博主:小猫娃来啦
🙂文章核心:vue生命周期的传统写法和setup语法糖写法

setup语法糖设计目的

<script setup> 语法糖的设计目标是简化组件编写,将逻辑和生命周期函数整合到一个地方。它使用了基于编译时静态分析的方式,通过识别函数调用来确定逻辑的执行时机。

Vue2 与Vue3的生命周期对比

Vue2 Vue3
beforeCreate(组件创建之前) setup(组件创建之前)
created(组件创建完成) setup(组件创建完成)
beforeMount(组件挂载之前) onBeforeMount(组件挂载之前)
mounted(组件挂载完成) onMounted(组件挂载完成)
beforeUpdate(数据更新,虚拟DOM打补丁之前) onBeforeUpdate(数据更新,虚拟DOM打补丁之前)
updated(数据更新,虚拟DOM渲染完成) onUpdated(数据更新,虚拟DOM渲染完成)
beforeDestroy(组件销毁之前) onBeforeUnmount(组件销毁之前)
destroyed(组件销毁之后) onUnmounted(组件销毁之后)

vue3钩子函数

常见的就8个:

beforeCreate: 组件实例被创建之前调用,此时组件的 data 和 methods 等属性都还未初始化。
created: 组件实例已经创建完成后调用,可以访问组件的 data 和 methods 属性。
beforeMount: 组件挂载前调用,此时模板编译已完成,但尚未将其挂载到页面上。
mounted: 组件挂载后调用,此时组件已在页面上渲染出来。
beforeUpdate: 数据更新前调用,可用于在数据更新之前获取更新前的状态。
updated: 数据更新后调用,可用于操作 DOM 或执行其他的更新操作。
beforeUnmount: 组件销毁前调用,可以在这里进行一些清理操作,比如清除定时器等。
unmounted: 组件销毁后调用,此时组件已完全被销毁,所有的事件监听和子组件都已被移除。
.
在 Vue 3 中,由于引入了 Composition API,一些生命周期钩子函数的名称发生了改变,并且在使用 <script setup> 语法糖时,不再直接使用这些钩子函数,而是使用Composition API 提供的函数来实现类似的功能。

以下是 Vue 3 中常用的生命周期钩子函数及其对应的 Composition API 函数:

beforeCreate: 在 Vue 3 中,可以使用 setup 函数中的代码来替代 beforeCreate 钩子函数。

created: 在 Vue 3 中,可以使用 setup 函数中的代码来替代 created 钩子函数。

beforeMount: 在 Vue 3 中,可以使用 onBeforeMount 函数来替代 beforeMount 钩子函数。

mounted: 在 Vue 3 中,可以使用 onMounted 函数来替代 mounted 钩子函数。

beforeUpdate: 在 Vue 3 中,可以使用 onBeforeUpdate 函数来替代 beforeUpdate 钩子函数。

updated: 在 Vue 3 中,可以使用 onUpdated 函数来替代 updated 钩子函数。

beforeUnmount: 在 Vue 3 中,可以使用 onBeforeUnmount 函数来替代 beforeUnmount
钩子函数。

unmounted: 在 Vue 3 中,可以使用 onUnmounted 函数来替代 unmounted 钩子函数。


beforeCreated和created被封装

beforeCreatecreated 这两个钩子函数在 Vue 3 中被封装进了 <script setup> 语法糖中。原因是为了简化代码和提高可读性。

在 Vue 2 中,我们需要显式地编写 beforeCreatecreated 钩子函数来处理相关的逻辑。这两个钩子函数分别在组件实例被创建之前和创建之后执行。

而在 Vue 3 中,通过使用 <script setup> 语法糖,不再需要显式地定义这两个钩子函数。相反,我们可以在 setup 函数中设置数据、方法和其他逻辑,这些逻辑会在组件创建之前和创建之后自动执行。

使用


传统写法和语法糖写法的对比

  • beforeCreate 和 created
    传统写法:
<script>
export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  }
};
</script>

<script setup> 语法糖合并了这两个hook

<script setup>


</script>

  • beforeMount 和 mounted
    传统写法:
<script>
export default {
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  }
};
</script>

使用 <script setup> 和 Composition API 函数:

<script setup>
import { onBeforeMount, onMounted } from 'vue';

onBeforeMount(() => {
  console.log('beforeMount');
});

onMounted(() => {
  console.log('mounted');
});
</script>

  • beforeUpdate 和 updated
    传统写法:
<script>
export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  }
};
</script>

使用 <script setup> 和 Composition API 函数:

<script setup>
import { onBeforeUpdate, onUpdated } from 'vue';

onBeforeUpdate(() => {
  console.log('beforeUpdate');
});

onUpdated(() => {
  console.log('updated');
});
</script>

  • beforeUnmount 和 unmounted
    传统写法:
<script>
export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
};
</script>

使用 <script setup> 和 Composition API 函数:

<script setup>
import { onBeforeUnmount, onUnmounted } from 'vue';

onBeforeUnmount(() => {
  console.log('beforeUnmount');
});

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

在这里插入图片描述


网站文章

  • 单例设计模式Java实现的八种写法以及反序列化、反射的破坏与防御

    单例设计模式Java实现的八种写法以及反序列化、反射的破坏与防御

    目录单例设计模式概述主要步骤单例模式实现方案1. 饿汉式(静态常量,线程安全)优缺点说明2. 饿汉式(静态代码块,线程安全)优缺点说明3. 懒汉式(线程不安全)优缺点说明4. 懒汉式(同步方法,线程安...

    2024-04-01 07:29:26
  • CSP201909-1 小明种苹果

    CSP201909-1 小明种苹果

    import java.util.Scanner; public class Main{ public static void main (String[] args) { // System.out...

    2024-04-01 07:28:42
  • RocketMQ-高可用+扩展性

    名词约定 Region:物理区域,例如不同的机房 Broker-MS:broker最基本的高可用master-slave结构,包含1台master+1台slave Broker-Cluster:由多个...

    2024-04-01 07:28:33
  • 计算机四级理论知识试卷答案,计算机系统操作员四级理论知识试卷(含答案).doc...

    计算机系统操作员四级理论知识试卷(含答案)职业技能鉴定国家题库计算机操作员四级理论知识试卷单项选择题(第1题~第160题。选择一个正确的答案,将相应的字母填入题内的括号中。每题0.5分,共80分。)正...

    2024-04-01 07:28:25
  • 计算机管理术语路径描述的是,directory

    directory(计算机语言术语)语音编辑锁定讨论上传视频directory,英文单词。意思是n.人名地址录,(电话)号码簿;(计算机文件或程序的)目录。adj.指导的,指挥的;咨询的;管理的。di...

    2024-04-01 07:27:37
  • 【C++】c++入门

    【C++】c++入门 1.c++的诞生 2.c++和c的关系 3.c++的开发过程 4.c++的特点 C++是一种面向对象的计算机程序设计语言,由美国的本贾尼·斯特劳斯特卢普博士在20世纪80年代初期发明并实现。C++是C语言的继承,进一步扩充和完善了C语言,成为一种面向对象的程序设计语言。 它是一种静态数据类型检查的、支持多重编程范式的通用程...

    2024-04-01 07:27:30
  • 单元测试快速自定义生成---开发者的福音

    单元测试快速自定义生成---开发者的福音

    作为一个开发者,越发觉得单元测试是必须的,至于单元测试是由开发编写还是测试编写,我觉得还得看公司的技术氛围。有一个好的编写单元测试习惯的开发者,代码质量肯定是很好的,可以随时校验自己开发和改写接口的快速检查工具。也避免了测试提的bug多而影响个人绩效(有些公司把bug计入考核范围内)。而作为开发者又不想过多花费时间在单元测试中(毕竟一般开发很忙的),所以本文提供了一种快速自定义的生成...

    2024-04-01 07:27:23
  • jquery 和 js 的区别

     1、加载DOM区别 JavaScript: window.onload function first(){ alert(&#39;first&#39;); } function second(){ alert(&#39;second&#39;); } window.onload = first; window.onload = second; //只会执行第二个wind

    2024-04-01 07:26:42
  • 网络安全应届生简历怎么写?

    网络安全应届生简历怎么写?

    很多简历基本上都是从几个方面写的。1.个人基本信息 - 姓名、毕业时间、性别、毕业学校…各种个人信息,这个按照自己实际情况写就行了。2.项目经历,大学生可能项目经历很少,那你想下有没有跟着老师做过一些...

    2024-04-01 07:26:34
  • ReactiveX 简介

    ReactiveX 简介

    Observable在ReactiveX中,观察者订阅了一个Observable。然后,该观察者对Observable发出的任何项目或项目序列做出反应。这种模式有利于并发操作,因为它不需要在等待Observable发出对象时阻塞,而是以观察者的形式创建一个哨兵,随时准备在Observable所做的任何时候做出适当的反应。这个页面解释了反应模式是什么以及Observables和观察者是什么(...

    2024-04-01 07:26:26