Vue3 —— 使用Ref与Reactive

Ref函数

• 作用: 定义一个响应式的数据

• 语法:  let   xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

  • JS中操作数据： xxx.value

  • 模板中读取数据: 不需要.value，直接：{{xxx}}

• 注：

  • 接收的数据：可以是基本类型、也可以是对象类型。

  • 基本类型的数据：响应式依然是靠  Object.defineProperty() 的 get与 set完成的。

  • 对象类型的数据：内部 “ 求助 ” 了reactive函数。

Reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不用它，用ref函数）

• 语法：const xxx = reactive(对象或数组)，返回一个代理对象（Proxy的实例对象，简称proxy对象）

• reactive定义的响应式数据是“深层次的”。

• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

示例：

<script setup lang="ts">
import { reactive, ref } from 'vue'
type per = {
  name: string,
  sex: string
}
let nature = ref('person')
const person = reactive<per>({
  name: 'iuh',
  sex: '哈哈哈'
})
//将内容调转
const changeName = () => {
  person.name = person.name.split('').reverse().join('')
}
//将内容大写
const changePer = () => {
  nature.value = nature.value.toUpperCase()
}
</script>

<template>
  <h1>{{ nature }}</h1>
  <div>
    <h2>{{ person.name }}</h2>
    <h3>{{ person.sex }}</h3>
  </div>
  <button @click="changeName">点击修改姓名</button>
  <button @click.once="changePer">点击修改个体</button>
</template>

响应式的原理

vue2.x的响应式

实现原理：

• 对象类型：通过 Object.defineProperty() 对属性的读取、修改进行拦截（数据劫持）。

• 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

  Object.defineProperty(data, 'count', 
  {    
     get () {}, 
     set () {} 
  })
  

存在问题：

• 新增属性、删除属性, 界面不会更新。

• 直接通过下标修改数组, 界面不会自动更新。

Vue3.X的响应式

• 实现原理:

  • 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

  • 通过Reflect（反射）: 对源对象的属性进行操作。

new Proxy(data, {
    // 拦截读取属性值
    get (target, prop) {
        return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
        return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
        return Reflect.deleteProperty(target, prop)
    }
})

proxy.name = 'iuh'  

reactive对比ref

从定义数据角度对比：

• ref用来定义：基本类型数据。

• reactive用来定义：对象（或数组）类型数据。

• 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

从原理角度对比：

• ref通过 Object.defineProperty() 的get与set来实现响应式（数据劫持）。

• reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

• 从使用角度对比：

  • ref定义的数据：操作数据需要 .value ，读取数据时模板中直接读取不需要 .value。

  • reactive定义的数据：操作数据与读取数据：均不需要 .value。