数据响应式

Vue2 的响应式

实现原理：

• 对象：Object.defineProperty() 拦截了存取器，对象则递归的使用该方法进行包装
• 数组：重写数组方法

存在问题：

• 直接增加或删除对象属性，界面不会更新
• 通过下标修改数组元素，界面不会更新

Vue3 的响应式

实现原理

• Proxy 拦截对源对象的操作
• Reflect 对源对象进行实际操作

toRef

toRef toRefs 用于解决解构赋值丢失响应式的问题

setup(){
  // ...
  return {
    ...toRefs(person)
  }
}

customRef

<script setup>
import { customRef } from "vue";

function myRef(value) {
  return customRef((track, trigger) => {
    return {
      get() {
        console.log("myRef.get", value);
        track(); // 追踪 订阅
        return value;
      },
      set(newV) {
        console.log("myRef.set", newV);
        value = newV;
        trigger(); // 触发 派发
      }
    };
  });
}

let keyword = myRef("Hello World!");
</script>

<template>
  <h2>CustomRef</h2>
  <input type="text" v-model="keyword" />
  <span>{{ keyword }}</span>
</template>