Vue3 的 Ref、IsRef、ToRef、ToRefs、ToRaw 详细介绍

1、ref

ref 属性除了能够获取元素外，也可以使用 ref 函数，创建一个响应式数据，当数据值发生改变时，视图自动更新。

创新互联从2013年创立，是专业互联网技术服务公司，拥有项目网站设计、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元临县做网站,已为上家服务,为临县各地企业和个人服务,联系电话:028-86922220

2、isRef

检查变量是否为一个被 ref 包装过的对象，如果是返回 true ，否则返回 false。

import { ref, isRef, reactive } from 'vue'
let str: string = ref('我是张三')
let num: number = 1
let per = reactive({ name: '代码女神', work: '程序媛' })
console.log('strRes', isRef(str)) //true
console.log('numRes', isRef(num)) //false
console.log('perRes', isRef(per)) //false

3、toRef

创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。

toRef(obj, key) 将对象中的某个值转化为响应式数据，分为两种情况：

• toRef 定义原始非响应式数据，修改值时，原始数据和 copy 数据都会变的，但是视图不更新。

注意：如果是在 DOM 挂载之前调用 chang 方法，改变数值，此时数据和视图都会发生改变。

• toRef 定义原始数据响应式数据，修改值时，原始数据，和 copy 数据都会改变，视图也会更新。

最终值为 “李四”。

4、toRefs

toRefs 用来解构 ref、reactive 包裹的响应式数据。接收一个对象作为参数，遍历对象上的所有属性，将对象上的所有属性变成响应式数据。

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
  name.value = '钻石王老五'
  age.value++
}

toRefs 解构数据时，如果某些参数作为可选参数，可选参数不存在时就会报错，如：

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age, work } = toRefs(obj)
const chang = () => {
  name.value = '钻石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

此时可以使用 toRef 解决此问题，使用 toRef 解构对象某个属性时，先检查对象上是否存在该属性，如果存在就继承对象上的属性值，如果不存在就会创建一个。

修改上边的代码为：

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, 'work')
const chang = () => {
  name.value = '钻石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

5、toRaw

将响应式对象转为原始对象。做一些不想被监听的事情，从 ref 或 reactive 得到原始数据。

修改原响应式数据时，toRaw 转换得到的数据会被修改，视图也会更新，如：

如果修改 toRaw 得到的原始数据，原数据也会被修改，但是视图不更新。如：

网站标题：Vue3 的 Ref、IsRef、ToRef、ToRefs、ToRaw 详细介绍
分享网址：http://www.gawzjz.com/qtweb/news49/207449.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联