vue3中 toRefs和 toRef 的区别
Vue3 区别
2023-06-13 09:18:22 时间
- toRefs 是为了避免对一个响应式对象解构的时候,解构后的每个属性不具有响应性
- toRef 是为了针对单独获取某个对象的属性的时候保持响应性,从而单独对某个对象的属性进行响应式转化
- 针对 reactive 或者 ref 创建的响应式对象都可以使用这两个 api 进行转化
- 注意:toRefs只能对第一层对象的属性解构的时候进行响应式转化
<script setup>
import {
reactive,
toRef,
toRefs
} from 'vue'
const testObj = reactive({
a: 1,
b: 2,
});
const testObj2 = ref({
c: 3,
d: 4,
});
// toRefs 的使用
// const { a, b } = toRefs(testObj);
// const { c } = toRefs(testObj2.value);
// toRef 的使用
let a = toRef(testObj, "a");
let b = toRef(testObj, "b");
let c = toRef(testObj2.value, "c");
setTimeout(() => {
a.value = 666;
c.value = 888;
console.log("2s后");
}, 2000);
</script>
<template>
<div>
<div>{{ a }}-{{ b }}-{{ c }}</div>
</div>
</template>
相关文章
- Vue3模板语法--动态参数
- 【玩转 Cloud Studio】记录Vue3+TS+Vite搭建教程
- Vue3组件Props
- vue3创建项目(二)router路由配置和使用
- 面试官:vue2和vue3的区别有哪些?
- 能否手写vue3响应式原理-面试进阶
- vue3+vite+ts配置eslint+husky
- vue3+vite+axios中proxy跨域配置
- 写给后端开发的『vue3』实战入门
- 开心档之Vue3 计算属性
- vue3 day01
- 前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
- Vue2.x中使用composition API,平滑过渡Vue3
- (二)第一个vue3.x应用
- Vue3 是如何通过编译优化提升框架性能的?
- 【Vue3】利用vite创建vue3项目
- Vue3快速上手+俩种创建方式+主要源码讲解
- Vue3连接Redis挑战迎刃而解(vue3访问redis)