ref、reactive、toRef、toRefs-Toy模板网

这篇具有很好参考价值的文章主要介绍了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) {
// 创建变量myTitle
const 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) {
// 使用了解构赋值语法创建了变量myTitle
const { myTitle } = toRefs(props)

console.log(myTitle.value)
}
})文章来源地址https://www.toymoban.com/news/detail-715172.html

到了这里，关于ref、reactive、toRef、toRefs的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！