关于前端:6-个你必须明白-Vue3-的-ref-和-reactive-问题入门篇

Vue3 为开发者提供 ref和 reactive两个 API 来实现响应式数据，这也是咱们应用 Vue3 开发我的项目中常常用到的两个 API。

本文从入门角度和大家介绍这两个 API，如果有谬误，欢送一起探讨学习~

本文演示代码是基于 Vue3 setup 语法。

在入门阶段，咱们须要把握的是「是什么」、「怎么用」、「有什么留神」，根本就差不多了。

reactive办法用来创立响应式对象，它接管一个对象 / 数组参数，返回对象的响应式正本，当该对象的属性值发生变化，会自动更新应用该对象的中央。

上面以别离以对象和数组作为参数演示：

import {reactive} from 'vue'

let reactiveObj = reactive({name : 'Chris1993'});
let setReactiveObj = () => {reactiveObj.name = 'Hello Chris1993';}

let reactiveArr = reactive(['a', 'b', 'c', 'd']);
let setReactiveArr = () => {reactiveArr[1] = 'Hello Chris1993';
}

模版内容如下：

<template>
  <h2>Vue3 reactive API Base</h2>
  <div>
    Object:{{reactiveObj.name}} 
    <span @click="setReactiveObj">Update</span>
  </div>
  <div>
    Array:{{reactiveArr}} 
    <span @click="setReactiveArr">Update</span>
  </div>
</template>

此时页面展现如下：

当咱们别离点击 Update按钮后，能够看到数据变动后，视图上内容也一起更新了：

ref 的作用就是将一个 原始数据类型 （primitive data type）转换成一个带有 响应式个性 的数据类型，原始数据类型共有 7 个，别离是：String/ Number /BigInt /Boolean /Symbol /Null /Undefined。

ref的值在 JS/TS 中读取和批改时，须要应用 .value获取，在模版中读取是，不须要应用 .value。

上面以别离以 字符串 和对象作为参数演示：

import {ref} from 'vue'

let refValue = ref('Chris1993');
let setRefValue = () => {refValue.value = 'Hello Chris1993';}
let refObj = ref({name : 'Chris1993'});
let setRefObj = () => {refObj.value.name = 'Hello Chris1993';}

模版内容如下：

<template>
  <h2>Vue3 ref API Base</h2>
  <div>
    String:{{refValue}} 
    <span @click="setRefValue">Update</span>
  </div>
  <div>
    Object:{{refObj.name}}
    <span @click="setRefObj">Update</span>
  </div>
</template>

此时页面展现如下：

当咱们别离点击 Update按钮后，能够看到数据变动后，视图内容也一起更新了：

答案是 能够的 ，reactive 是基于 ES2015 Proxy API 实现的，它的响应式是整个对象的所有嵌套层级。

上面以别离以对象和数组作为参数演示：

import {reactive} from 'vue'

let reactiveDeepObj = reactive({user: {name : 'Chris1993'}
});
let setReactiveDeepObj = () => {reactiveDeepObj.user.name = 'Hello Chris1993';}

let reactiveDeepArr = reactive(['a', ['a1', 'a2', 'a3'], 'c', 'd']);
let setReactiveDeepArr = () => {reactiveDeepArr[1][1] = 'Hello Chris1993';
}

模版内容如下：

<template>
  <h2>Vue3 reactive deep API Base</h2>
  <div>
    Object:{{reactiveDeepObj.user.name}}
    <span @click="setReactiveDeepObj">Update</span>
  </div>
  <div>
    Array:{{reactiveDeepArr}}
    <span @click="setReactiveDeepArr">Update</span>
  </div>
</template>

此时页面展现如下：

当咱们别离点击 Update按钮后，能够看到数据变动后，视图上内容也一起更新了：

答案是 不相等的 ，因为reactive 是基于 ES2015 Proxy API 实现的，返回后果是个 proxy 对象。

测试代码：

let reactiveSource = {name: 'Chris1993'};
let reactiveData = reactive(reactiveSource);

console.log(reactiveSource === reactiveData);
// false

console.log(reactiveSource);
// {name: 'Chris1993'}

console.log(reactiveData);
// Reactive<{name: 'Chris1993'}>

在应用 TypeScript 写 ref / reactive 参数类型时，能够依据 ref / reactive 接口类型来实现具体的类型：

function ref<T>(value: T): Ref<T>

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

将后面实例代码革新一下：

import {ref} from 'vue'

let refValue = ref<string>('Chris1993');
// refValue 类型为：Ref<string>
let setRefValue = () => {
  refValue.value = 'Hello Chris1993'; // ok!
  refValue.value = 1993; // error!
}

// reactive 也相似
let reactiveValue = reactive<{name: string}>({name: 'Chris1993'});

当咱们已有一个 ref对象，须要应用在 reactive对象中，会产生什么呢？

假如：

let name = ref('Chris1993');
let nameReactive = reactive({name})

咱们能够做下列操作：

let name = ref('Chris1993');
let nameReactive = reactive({name})
console.log(name.value === nameReactive.name); // true

name.value = 'Hello Chris1993';
console.log(name.value);        // Hello Chris1993
console.log(nameReactive.name); // Hello Chris1993

nameReactive.name = 'Hi Chris1993';
console.log(name.value);        // Hi Chris1993
console.log(nameReactive.name); // Hi Chris1993

这是因为 reactive将会对所有深层的 refs进行解包，并且放弃 ref的响应式。

当通过赋值形式将 ref调配给 reactive属性时，ref也会主动被解包：

let name = ref('Chris1993');
let nameReactive = reactive({})
nameReactive.name = name;

console.log(name.value);        // Chris1993
console.log(nameReactive.name); // Chris1993
console.log(name.value === nameReactive.name); // true

本文次要从入门角度和大家介绍 reactive/ ref 两个 API 的应用形式区别，还有应用过程中的几个问题。

简略总结一下：

reactive 个别用于对象 / 数组类型的数据，都不须要应用 .value；
ref个别用于根底数据类型的数据，在 JS 中读取和批改时，须要应用 .value，在模版中应用时则不须要；
reactive 能够批改深层属性值，并放弃响应；
reactive 返回值和源对象不同；
reactive的属性值能够是 ref值；

下一篇将和大家分享精通篇，欢送大家期待。

关于前端:6-个你必须明白-Vue3-的-ref-和-reactive-问题入门篇

1. reactive API 如何应用？

2. ref API 如何应用？

3. reactive 能够用在深层对象或数组吗？

4. reactive 返回值和源对象相等吗？

5. TypeScript 如何写 ref 和 reactive 参数类型？

6. 把 ref 值作为 reactive 参数会怎么样？

7. 总结