ref、reactive、toRef、toRefs

ref

作用：定义一个响应式数据
语法：const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象
- js中操作数据：xxx.value
- 模板中读取数据：不需要.value,直接<div>{{xxx}}</div>
接收的数据：基本类型、对象类型
基本类型的数据：响应式是靠object.defineProperty()的get与set完成的
对象类型的数据：通过vue3.0的一个新函数–reactive函数包装实现的

import { ref } from 'vue'// 为基本数据类型添加响应式状态
const name = ref('张三')// 为复杂数据类型添加响应式状态
const state = ref({count: 0
})// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)

reactive

作用：定义一个对象类型的响应式数据
语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
操作数据与读取数据：均不需要.value。
reactive定义的响应式数据是“深层次的”
内部基于ES6的Proxy实现，通过代理对象操作对象内部数据进行操作

import { reactive } from 'vue'// 响应式状态
const state = reactive({count: 0
})// 打印count的值
console.log(state.count)

toRef

作用：创建一个ref对象，其value值指向另一个对象中的某个属性。
语法：const name = toRef(person,'name')
- 获取数据值的时候需要加.value
- toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
应用：要将响应式对象中的某个属性单独提供给外部使用时。

import { defineComponent, toRef } from 'vue'export default defineComponent({props: [title],setup (props) {// 创建变量myTitleconst myTitle = toRef(props, 'title')console.log(myTitle.value)}
})

toRefs

作用：批量创建多个 ref 对象
语法：toRefs(person)
- 获取数据值的时候需要加.value
- toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
应用：常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。

import { defineComponent, toRefs } from 'vue'export default defineComponent({props: [title],setup (props) {// 使用了解构赋值语法创建了变量myTitleconst { myTitle } = toRefs(props)console.log(myTitle.value)}
})

ref、reactive、toRef、toRefs相关推荐

Vue3 理解 toRef 和 toRefs 的作用、用法、区别
toRef / toRefs 作用 toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref,而且它既保留了响应式,也保留了引用,也就是你从 reactive 复制过来 ...
Vue3 Composition API（三）——生命周期钩子、Provide函数和 Inject函数、封装Hook案例、setup顶层编写方式
一.生命周期钩子我们前面说过 setup 可以用来替代 data . methods . computed .watch 等等这些选项,也可以替代生命周期钩子. 那么setup中如何使用生命周期函 ...
ref、reactive、toRef、toRefs的区别
vue3.0里给数据添加响应式有很多api可用,有时傻傻分不清,分享一下个人的理解. 一.reactive reactive 用于为对象添加响应式状态. 接收一个js对象作为参数,返回一个具有响应式状 ...
reactive、ref、toRef、toRefs
reactive和ref 1.reactive 接收的数据类型:对象类型使用: const data1 = reactive({value: "1",name: "2& ...
ref、 reactive、toref、torefs的用法，区别
ref. reactive.toref.torefs的用法,区别 ref 接受一个内部值并返回一个响应式且可变的 ref 对象.ref 对象仅有一个 .value property,指向该内部值 co ...
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖起初 ...
vue中ref、reactive和 toRefs toRef
ref和reactive都是响应式的引用,其原理是通过 proxy 对数据进行封装,当数据变化时,触发模版等内容的更新, ref 处理基础类型的数据(string,number..),reactive ...
敲黑板！vue3重点！一文了解Composition API新特性：ref、toRef、toRefs
一文了解Composition API新特性:ref.toRef.toRefs 一.
Vue3.x 使用ref和reactive、toRef
文章目录一.使用ref 1. 引入 2. 定义ref变量 3. 赋值+.value 4. return 返回值 5. 将数据渲染到页面二.使用reactive 和 toRef 1. 引入 2. 定 ...
Vue3 Composition API（一）——setup、reactive、ref、readonly
一.Options API的弊端在Vue2中,我们编写组件的方式是Options API: Options API的一大特点就是在对应的属性中编写对应的功能模块: 比如data定义数据.method ...

ref、reactive、toRef、toRefs

ref

reactive

toRef

toRefs

ref、reactive、toRef、toRefs相关推荐

最新文章

热门文章