首页 > 其他分享 >谈谈Vue3中的ref和reactive

谈谈Vue3中的ref和reactive

时间:2023-08-18 10:57:32浏览次数:45  
标签:const 定义 data reactive Vue3 ref tableData

一、是什么?

ref 和 reactive 是Vue3中用来实现数据响应式的API
一般情况下,ref定义基本数据类型,reactive定义引用数据类型
(我喜欢用它来定义对象,不用它定义数组,原因后面讲)
我理解的ref本质上是reactive的再封装

二、先聊reactive

reactive定义引用数据类型(以对象和数组举例),它能够将复杂数据类型的内部属性或者数据项声明为响应式数据,所以reactive的响应式是深层次的,其底层是通过ES6的Proxy来实现数据响应式,相对于Vue2的Object.defineProperty,具有能监听增删操作,能监听对象属性的变化等优点

使用reactive定义对象数据类型举例

const paginationConfig = reactive({
    pageNum: 1,
    pageSize: 10
}) // 定义

const onChange = () => {
    paginationConfig.pageNum = 2 // js使用
    paginationConfig.pageSize = 20 // js使用
}
<!-- Vue3模板引用使用 -->
<a-pagination v-model:current="paginationConfig.pageNum"></a-pagination>

若用reactive定义基本数据类型,Vue3会报警告错误,如图

const str = reactive('我是字符串')

 分析Vue3源码可知,使用reactive定义响应式数据时,若数据不是对象类型直接就返回了,就不会进行后续的数据响应式处理了,这也就是我只用reactive定义对象型响应式数据的原因,那数组类型数据怎么办呢?答案在下文中可以找到

三、再聊ref

为什么我会理解成ref是reactive的再封装,因为在ref的底层源码里最终还是reactive()来实现的

 

 由源码分析得知,如果是对象类型,底层走的还是reactive()的逻辑,另外我们知道,使用ref定义基本数据类型时,在脚本里使用时,需要加.value后缀,然而在模板里不需要,这是因为Vue3会自动帮你加上,这就使得ref相比reactive更加简单

let num = ref(0) // 定义
let isShow = ref(false)  // 定义

const onChange = () => {
    num.value++  // js使用
    isShow.value = true  // js使用
}
<!-- Vue3模板引用使用 -->
<a-modal v-model:visible="isShow"></a-modal>

图中以我们常用的表格数据举例,可以看到,ref定义数组与定义基本数据类型没什么差别,接下来看看reactive

const tableData = reactive([]) // 定义

const getTableData = async () => {
    const { data } = await getTableDataApi() // 模拟接口获取表格数据
    tableData = data // 修改,错误示例,这样赋值会使tableData失去响应式
}
<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

需要注意的是,使用 tableData = data 的修改方式会造成 tableData 响应式丢失,解决方法如下(供参考)

// 方法一:改为 ref 定义
const tableData = ref([])
const getTableData = async () => {
    const { data } = await getTableDataApi()
    tableData.value = data // 使用.value重新赋值
}
// 方法二:使用 push 方法
const tableData = reactive([])
const getTableData = async () => {
    const { data } = await getTableDataApi()
    tableData.push(...data) // 先使用...将data解构,再使用push方法
}
// 方法三:定义时数组外层嵌套一个对象
const tableData = reactive({ list:[] })
const getTableData = async () => {
    const { data } = await getTableDataApi()
    tableData.list = data // 通过访问list属性重新赋值
}
// 方法四:赋值前再包一层 reactive
const tableData = reactive([])
const getTableData = async () => {
    const { data } = await getTableDataApi()
    tableData = reactive(data) // 赋值前再包一层reactive
}

五、对比总结

  1. ref用于定义基本类型和引用类型,reactive仅用于定义引用类型
  2. reactive只能用于定义引用数据类型的原因在于内部是通过ES6的Proxy实现响应式的,而Proxy不适用于基本数据类型
  3. ref定义对象时,底层会通过reactive转换成具有深层次的响应式对象,所以ref本质上是reactive的再封装
  4. 在脚本里使用ref定义的数据时,记得加.value后缀
  5. 在定义数组时,建议使用ref,从而可避免reactive定义时值修改导致的响应式丢失问题

 





 

 

标签:const,定义,data,reactive,Vue3,ref,tableData
From: https://www.cnblogs.com/mmzuo-798/p/17639814.html

相关文章

  • 基于 JWT + Refresh Token 的用户认证实践(转载)
    HTTP是一个无状态的协议,一次请求结束后,下次在发送服务器就不知道这个请求是谁发来的了(同一个IP不代表同一个用户),在Web应用中,用户的认证和鉴权是非常重要的一环,实践中有多种可用方案,并且各有千秋。 基于Session的会话管理在Web应用发展的初期,大部分采用基于Session......
  • vue3项目,vie框架,相对路径图片,测试时正常显示,发布后不显示问题解决方案
    参考Vite官网的说明,修改图片的引用路径后,图片发布后可以正常显示constimgUrl=newURL('./img.png',import.meta.url).hrefdocument.getElementById('hero-img').src=imgUrl官网地址: https://cn.vitejs.dev/guide/assets.html ......
  • Firefox同步问题,切换本地服务和全球服务的方法
    地址栏输入about:config,搜索首选项名称里输入identity.fxaccounts.autoconfig.uri,填入https://accounts.firefox.com.cn(国内账号)或https://accounts.firefox.com(国际账号)......
  • vue3 vue.config.js配置详解
    //vue.config.js文件是用于VueCLI项目的全局配置的module.exports={  //部署应用包时的公共路径  publicPath:"./",  //生产环境构建文件的目录名(默认为dist)  outputDir:"dist",  //放置生成的静态资源的目录(默认为dist/static),可以修改为public。  assetsDir......
  • vue3 文件上传进度条组件
    index.vue文件<template><divclass="confirm-modal"><transitionname="fade"><divclass="modal-dialog"@click="clickMaskToClose?handleCancel():null"v-if="visible"@tou......
  • vue3第一章
    官方文档(中文版):https://vue3js.cn/docs/zh/视频:https://www.qiuzhi99.com/movies/vue3/1330.html语法对比:https://www.jianshu.com/p/4e7ba9e93402与2.x区别对比1.vue2和vue3双向数据绑定原理发生了改变vue2的双向数据绑定是利用ES5的一个apiObject.definePropert()对数......
  • nginx 过滤相关的referer 和 origin
    1.相关配置如下location/{#set$allow_cors0;##判断不为空#if($http_origin){#set$allow_cors1;#}#set$flag0;valid_referers10.800;......
  • [18章]Vue3+NestJS 全栈开发企业级管理后台
    点击下载:[18章]Vue3+NestJS全栈开发企业级管理后台提取码:zzbv Next.js是一个用于构建现代化React应用程序的框架。它强调性能、开发体验和SEO优化,是许多React开发者的首选。Next.js提供了许多功能,包括:服务器渲染:Next.js允许在服务器端渲染React应用程序,从而提高了应......
  • vue3 组合式 api 单文件组件写法
    1Vue3组合式API的基本原理和理念1.1Vue3中的CompositionAPIVue3中的CompositionAPI是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性。相比于Vue2的OptionsAPI,CompositionAPI更加灵活和可扩展。在CompositionAPI中,我们使......
  • Vue3 常用组件库推荐
    Vue 作为一款深受广大群众喜欢的前端框架,拥有众多优秀的开源UI组件库,这里整理了一下供大家参考。这几套框架主要用于后台管理系统和移动端的制作,方便开发者快速开发。一、PC端UI库1.1ElementPlus官网地址:https://element-plus.org/zh-CN/Github:https://github.com/e......