vue3的ref和Ref以及reactive

ref和reactive

ref和reactive的引入

import { ref, reactive } from "vue"
复制代码

什么是ref和reactive

vue3.0中的响应式原理是基于proxy做的，而使用proxy的前提是，我们要代理的是对象而不是基本类型数据。如果我们用如下方式定义一个响应式的数据，count的改变是无法变监听拦截到的:

const count = reactive(3)
复制代码

这时候，就需要ref来先讲基本类型包装成{value: 基本类型数据}，然后再对这个包装对象进行响应式处理。

• ref函数

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

示例：

const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
复制代码

如果将对象分配为 ref 值，则它将被 reactive 函数处理为深层的响应式对象。

• Reactive 函数

返回对象的响应式副本

const obj = reactive({ count: 0 })
复制代码

响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。建议只使用响应式 proxy，避免依赖原始对象。

import { ref, computed, reactive, toRefs } from 'vue'
interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}
setup() {
  const data: DataProps  = reactive({
    count: 0,
    increase: () => { data.count++},
    double: computed(() => data.count * 2)
  })
  const refData = toRefs(data)
  return {
    ...refData
  }
}
复制代码

1. ref 和 reactive 一样都是实现响应式数据的方法

2. 由于 reactive 必须传递一个对象，所以导致我们再企业开发中，如果我们只想让某个变量实现响应式的时候非常麻烦，所以 Vue3 就提供了 ref 方法，实现对简单值的监听

3. ref 底层的本质还是 reactive 系统会自动根据我们给 ref 传入的值将他转换成 ref(xx) —— reactive({value: xx})

\

使用 ref 还是 reactive 可以选择这样的准则

• 第一，就像刚才的原生 javascript 的代码一样，像你平常写普通的 js 代码选择原始类型和对象类型一样来选择是使用 ref 还是 reactive。
• 第二，所有场景都使用 reactive，但是要记得使用 toRefs 保证 reactive 对象属性保持响应性。

Ref

Ref就是typescript的ref类型声明

interface Ref<T> {
   value: T 
}
function ref<T>(value: T): Ref<T>
复制代码

有时我们可能需要为 ref 的内部值指定复杂类型。可以在调用 ref 时传递一个泛型参数以覆盖默认推断，从而简洁地做到这一点：

const foo = ref<string | number>('foo') // foo 的类型：Ref<string | number>
foo.value = 123   // ok!
foo.value = '123' // ok!
复制代码

如果泛型的类型未知，则建议将ref 转换成Ref

function useState<State extends string>(initial: State) {
  const state = ref(initial) as Ref<State> // state.value -> State extends string
  return state
}