1. 首页首页
  2. 编程日记编程日记

vue2转vue3（vue2转vue3很痛苦）

编程日记 • • 阅读 7

vue2转vue3（vue2转vue3很痛苦）v2 v3 的学习成本不高 只要有 v2 基础 基本可以上手 vue3 setup 中不能访问 v2 的配置比如 data methods 等 使用 ref 可以创建一个对象 可以是基本类型 也可以是对象 例如 这是一个对象类型的响应数据 例 例 例 一 监听单个 ref 的响应式数据 例 二 监听 ref 定义的多个响应式数据 例 三 监听 reactive 所定义的一个响应式数据 例 四 监听 reactive 定义的一个响应式数据中的某一个属性 例 五 监听 reactive 定义的一个响应式数据中的某些属性



v2-v3的学习成本不高，只要有v2基础，基本可以上手vue3

setup中不能访问v2的配置比如data，methods等

使用ref可以创建一个对象，可以是基本类型，也可以是对象 例如：

Vue2转Vue3快速上手第一篇（共两篇）_监听器

这是一个对象类型的响应数据，例：

Vue2转Vue3快速上手第一篇（共两篇）_数据_02

例：

Vue2转Vue3快速上手第一篇（共两篇）_响应式_03

例（一）：监听单个ref的响应式数据

Vue2转Vue3快速上手第一篇（共两篇）_监听器_04

例（二）：监听ref定义的多个响应式数据

Vue2转Vue3快速上手第一篇（共两篇）_监听器_05

例（三）：监听reactive所定义的一个响应式数据

Vue2转Vue3快速上手第一篇（共两篇）_监听器_06

例（四）：监听reactive定义的一个响应式数据中的某一个属性

Vue2转Vue3快速上手第一篇（共两篇）_监听器_07

例（五）：监听reactive定义的一个响应式数据中的某些属性

Vue2转Vue3快速上手第一篇（共两篇）_数据_08

例（六）：监听reactive定义的嵌套对象

Vue2转Vue3快速上手第一篇（共两篇）_响应式_09

特性，也可以说成和watch的区别

  • 不需要手动传入依赖
  • 每次初始化时会执行一次回调函数来自动获取依赖
  • 无法获取到原值，只能得到变化后的值

Vue2转Vue3快速上手第一篇（共两篇）_数据_10

所有的声明周期要放在setup中 Vue3的生命周期如下： 1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()

3、beforeMount -> onBeforeMount

4、mounted -> onMounted

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated

7、beforeDestroy -> onBeforeUnmount

8、destroyed -> onUnmounted

9、errorCaptured -> onErrorCaptured

语法

说白话文就是不用写前面的对象名称直接渲染里面的属性即可

Vue2转Vue3快速上手第一篇（共两篇）_响应式_11

一键给对象中的多个属性全部响应转换

Vue2转Vue3快速上手第一篇（共两篇）_响应式_12

只处理对象最外面一层的响应式数据(浅响应式)

Vue2转Vue3快速上手第一篇（共两篇）_响应式_13

只处理基础数据类型的响应式，不进行对象类型的响应式。

Vue2转Vue3快速上手第一篇（共两篇）_响应式_14

这里可以看到，修改数据后将不会在触发页面的更新 因为监测不到了

例：

Vue2转Vue3快速上手第一篇（共两篇）_响应式_15

这里可以看到使用toRaw后，响应式对象变成了一个普通的对象

这里看一下使用markRaw和不使用markRaw的区别

不使用markRaw

看这个例子：

效果：

Vue2转Vue3快速上手第一篇（共两篇）_监听器_16

可以看到这里的数据是可以进行响应

添加markRaw

效果：

Vue2转Vue3快速上手第一篇（共两篇）_数据_17

因为markRaw将{kaifa: "web开发",money: 1,}变成了一个非响应式对象。因此，当修改 a.other.kaifa 或 a.other.money时，界面不会更新

在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用 provide 函数是有两个接受参数,是用来提供和发送数据

祖先组件：

inject则是用来接受数据 后代组件：

判断值是否为ref对象

判断值是否为isReactive对象

检查对象是否是由readonly创建的只读代理

检查对象是否是由reactive或者readonly创建的proxy

编程小号
上一篇 2025-03-16 20:46
下一篇 2025-02-09 16:21

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/76596.html