网站 接入微信,asp网站开发程序员,百度霸屏培训,微信开发者平台注销vue3中ref和reactive区别 1、前言2、基本用法2.1 ref2.2 reactive 3、ref和reactive定义数组对比3.1 ref定义数组3.1 reactive定义数组 4、ref 和reactive的区别 1、前言
ref和reactive是Vue3中用来实现数据响应式的API#xff0c;一般情况下#xff0c;ref定义基本数据类型… vue3中ref和reactive区别 1、前言2、基本用法2.1 ref2.2 reactive 3、ref和reactive定义数组对比3.1 ref定义数组3.1 reactive定义数组 4、ref 和reactive的区别 1、前言
ref和reactive是Vue3中用来实现数据响应式的API一般情况下ref定义基本数据类型reactive定义引用数据类型。
2、基本用法
2.1 ref
理解: ref的参数一般是基本数据类型也可以是对象类型如果参数是对象类型其实底层的本质还是reactive系统就会自动将ref转换为reactive我们如果去访问ref定义的值那么就使用.value的属性去访问定义的数据ref的底层原理同reactive一样都是Proxy。语法: const xxx ref(initValue)
基础用法
templateh1{{ name }}/h1button clickchangeName修改名称/button
/templatescript setup
import { ref} from vue
const name ref(张三)
const changeName () {name.value 李四age.value 20
}
/script2.2 reactive
reactive定义引用数据类型以对象和数组举例它能够将复杂数据类型的内部属性或者数据项声明为响应式数据所以reactive的响应式是深层次的其底层是通过ES6的Proxy来实现数据响应式相对于Vue2的Object.defineProperty具有能监听增删操作能监听对象属性的变化等优点。
基础用法
templateChild:currentpageConfig.pageNum/Child
/templatescript setup
import { reactive} from vue
const queryParams reactive({pageNum: 1,pageSize: 10
}) const onChange () {queryParams.pageNum 2;queryParams.pageSize 20;
}
/script若用reactive定义基本数据类型Vue3会报警告错误如图
const str reactive(字符串)3、ref和reactive定义数组对比
3.1 ref定义数组
templateTable :datatableData/Table
/templatescript setup
import { ref, reactive, onMounted } from vue
import { getTableDataApi } from /api
const queryParams reactive({pageNum: 1,pageSize: 10
}) const tableData ref([])
onMounted(() {getTableData()
})
const getTableData async () {const { data } await getTableDataApi(queryParams) // 模拟接口获取表格数据tableData.value data
}
/script以我们常用的表格数据举例可以看到ref定义数组与定义基本数据类型没什么差别接下来看看reactive
3.1 reactive定义数组
templateTable :datatableData/Table
/templatescript setup
import { ref, reactive, onMounted } from vue
import { getTableDataApi } from /api
const queryParams reactive({pageNum: 1,pageSize: 10
}) const tableData reactive([])
onMounted(() {getTableData()
})
const getTableData async () {const { data } await getTableDataApi(queryParams) // 模拟接口获取表格数据tableData data
}
/script需要注意的是reactive定义的数组使用 tableData data 的修改方式会造成 tableData 响应式丢失。
解决方法如下
// 方法一改为 ref 定义
const tableData ref([])
const getTableData async () {const { data } await getTableDataApi(queryParams)tableData.value data // 使用.value重新赋值
}
// 方法二使用 push 方法
const tableData reactive([])
const getTableData async () {const { data } await getTableDataApi(queryParams)tableData.push(...data) // 先使用...将data解构再使用push方法
}
// 方法三定义时数组外层嵌套一个对象
const tableData reactive({ list:[] })
const getTableData async () {const { data } await getTableDataApi(queryParams)tableData.list data // 通过访问list属性重新赋值
}4、ref 和reactive的区别
ref用于定义基本类型和引用类型reactive仅用于定义引用类型reactive只能用于定义引用数据类型的原因在于内部是通过ES6的Proxy实现响应式的而Proxy不适用于基本数据类型ref定义对象时底层会通过reactive转换成具有深层次的响应式对象所以ref本质上是reactive的再封装在JS中我们如果去对数据进行操作在ref定义的数据中使用变量.value访问reactive不需要在定义数组时建议使用ref从而可避免reactive定义时值修改导致的响应式丢失问题。
