VUE3.0 响应式

一、reactive

将一个Object类型的数据转换成响应式数据：Proxy实例

1. 直接取属性值，属性值不是响应式的
2. 只能接受Object类型的参数

import { reactive } from 'vue'

// 响应式状态
const state = reactive({
  count: 0
})

// 打印count的值
console.log(state.count)

reactive的响应原理

通过将Object转换成Proxy对其进行拦截

二、ref

ref( target )函数可以在任何地方将变量变成响应式

1. 将变量变成一个包含value属性的RefImpl对象。
   JS中获取和设置时都要通过变量的value属性，而在html template中则直接使用变量

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

2. 可以接受任何类型的参数。
   如果原始变量target为普通变量，value = target，如果target为对象，value为Proxy(target)

const convert = (val) => isObject(val) ? reactive(val) : val;

ref响应原理

ref实际是通过引用的概念达到响应的目的，无论何处用到变量实际上通过引用的方式指向同一个变量

image

三、toRef

toRef(target, property)将响应式对象的某个属性变为响应式

1. target为一个响应式对象
2. 返回一个包含value的ObjectRefImpl对象，value为target[property]的引用

const state = reactive({
  foo: 1,
  bar: 2
})

// state.foo 类型为 number，不具有响应式的功能
// 通过toRef可以将其变为响应式
const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

当您要将 prop 的 ref 传递给复合函数时，toRef 很有用：

export default {
  setup(props) {
    useSomeFeature(toRef(props, 'foo'))
  }
}

四、toRefs

对每个属性调用toRef()，将一个响应式对象的所有属性转换为响应式

当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行分解/扩散：

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 逻辑运行状态

  // 返回时转换为ref
  return toRefs(state)
}

export default {
  setup() {
    // 可以在不失去响应性的情况下破坏结构
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}