当前位置:网站首页 > Vue.js开发 > 正文

vue2转vue3(vue2转vue3很痛苦)



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

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

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

Vue2转Vue3快速上手<a href='/tag/233'>第一</a>篇(共两篇)_监听器

这是一个对象类型的响应数据,例:

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

到此这篇vue2转vue3(vue2转vue3很痛苦)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • 安装vue报错(vuex安装 报错)2025-06-16 10:54:06
  • cjson库内存泄露(console.log内存泄露)2025-06-16 10:54:06
  • vue 插槽传值(vue插槽怎么传值)2025-06-16 10:54:06
  • Vue安装脚手架(vue2.0脚手架的安装)2025-06-16 10:54:06
  • js数组方法slice(js数组方法some)2025-06-16 10:54:06
  • pcie5.0有什么用(pcie5.0什么时候上市)2025-06-16 10:54:06
  • pcie 4.0固态硬盘(pcie 4.0固态硬盘插到pcie3.0)2025-06-16 10:54:06
  • ettercap下载和安装(ettercap 0.8.3教程)2025-06-16 10:54:06
  • 前端跨域怎么解决vue(前端跨域怎么解决)2025-06-16 10:54:06
  • vue2关闭eslint检测(vue关闭eslint检查)2025-06-16 10:54:06
  • 全屏图片