ref、reactive

monstkl

已于 2023-04-13 23:05:27 修改

阅读量147

点赞数

文章标签： javascript html 前端

于 2023-03-26 17:59:49 首次发布

本文链接：https://blog.csdn.net/weixin_43390711/article/details/129781833

版权

文章详细阐述了Vue.js中ref和reactive的使用场景。ref适用于包装基本类型和对象，尤其方便替换对象整体值；reactive主要用于包装对象以实现响应式更新。同时提到了toRef和toRefs用于从reactive对象中提取属性，并强调了toRaw用于获取非响应式对象。

摘要由CSDN通过智能技术生成

前言：

为方便以后的代码风格统一，和省去不必要的麻烦：
ref只包装基本类型的数据
reactive只包装引用类型的对象，数组尽量作为对象的一个属性值

一、ref的场景

1、ref既可以包装一般类型，也可以包装应用类型
ref(3)    ref([1,2])    ref({name: 'jim'})
使用ref来包装对象后，有一个便利就是将对象整体的值进行替换(reactive则不行)
let obj = ref({name: 'jim'})
obj.value = {name: 'tom'}

2、ref可以获取dom    <div ref="xx">
在选项API中：    this.$refs.xx
在setup中：    const xx = ref(),在onMounted中使用

3、costomRef可以理解为被拦截的ref
const myRef = (value) => {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        if(newValue < 10) {
          value = newValue
          // 延迟渲染
          setTimeout(() => {
            trigger()
          }, 2000);
        }
      }
    }
  })
}

二、reactive的场景

1、reactive最常用来包装对象，对于对象的属性可以直接赋值，是响应性的。
let obj = reactive({name: 'jim'})
obj.name = 'tom'，页面会直接响应

2、reactive也会用来包装数组，但是对数组直接赋值不具有响应性
let arr = reactive([1,3,4])
arr = [1,2,3]    不具有响应性
arr.length = 0;arr.push(...[1,2,3])    具有响应性（或者把arr放在对象的属性上，通常这种做法多）

三、toRef、toRefs、toRaw

1、toRef、toRefs只能用在reactive对象上，不能用在普通对象上（也不用再reactive数组上），eg：
toRef(obj, key)
const name = toRef({name: 'jim'}, 'name')    不正确
const name = toRef(reactive({name: 'jim'}, 'name'))    正确

toRefs(obj)
const {name, age} = toRefs({name: 'jim', age: 18})    不正确
const {name, age} = toRefs(reactive({name: 'jim', age: 18}))    正确   


2、toRaw产生一个非响应式的对象，而非把原对象改成非响应式的
// reactiveObj是响应式的
cosnt reactiveObj = reactive({name: 'jim'})    reactiveObj是响应式的
// obj不是响应式的
const obj = toRaw(reactiveObj)