Vue3.0响应式原理与ref、reactive实践-优快云博客

本文介绍了如何创建Vue3.0工程，重点讲解了setup函数的作用和返回值，以及ref和reactive函数在响应式中的应用。ref用于创建基本数据类型的响应式对象，而reactive则用于深度响应式地代理对象数据。同时，讨论了Vue3.0相比于Vue2.0的响应式原理变化，即通过Proxy和Reflect实现更全面的数据拦截。

1、创建3.0工程

1.1、使用 vue-cli 创建

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve
dn.net/fengxiandada/article/details/122791260

1.2.使用 vite 创建

优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

2、setup

理解： setup是一个函数，放回值为一个对象，该对象内容可以直接被使用
setup是所有Composition API（组合API）“ 表演的舞台 ”。
组件中所用到的：数据、方法等等，均要配置在setup中。
setup函数的两种返回值：
1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
2. 若返回一个渲染函数：则可以自定义渲染内容。
注意点

尽量不要和Vue2.x配置混用
Vue2.x配置（data，methods，computed......）中可以访问setup中的属性，方法
但在setup中不能访问到Vue2.x配置(data，methods，computed......)
如有重名，setup优先
setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性

2.ref函数

作用：定义一个响应式的数据
语法：const xxx = ref("value")
- 创建一个包含响应式的数据的引用对象(reference对象)
- js中操作数据：xxx.value
- 模板中读取数据不需要.value,直接<div>{{xxx}}</div>
注意
- 接收的数据类型可以是基本数据类型也可以是引用数据类型
- 基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的
- 对象类型的数据：内部“求助”了Vue3.0的一个新的函数------reactive函数
- 引用类型：使用的是window.Proxy
- ref将对象封装成一个proxy，而proxy则是vue3.0响应式的另一种方案——代理

    let name = ref("刘");
    let age = ref("18");
    let job = ref({
      obj: "前端",
      money: "30k",
    });
    let add3 = () => {
      name.value = "Hello";
      age.value = 20;
      job.value.money = 1000000000;
    };

3.reactive函数

作用：定义一个对象类型的响应式数据(基本数据类型别用它，用ref函数)

vue3.0提供了一个函数来实现对象类型的响应数据——reactive

reactive函数接收一个对象，返回一个代理对象，该代理对象可实现“深层次”的代理（联想拷贝），数据有多层也可以实现响应式。

语法：const 代理一个对象 = reactive(被代理的对象) 接收一个对象（或数组），返回一个代理器对象（proxy对象）
reactive定义的响应式数据是“深层次的”
内部基于ES6的Proxy实现，通过代理对象内部的数据都是响应式的

//1.引入
import {ref,reactive} from "vue"
export default {
  setup() {
    let name = ref("刘");
    let age = ref(18);
//2、使用
    let more = reactive({
      job: "前端",
      salary: "10k",
      a:{
        b:{
          c:"ccccccccccccc"
        }
      }
    })
//3、返回
return {
      name, age, changeMsg, more, changeMore
    }
  }

4.Vue3.0中的响应式原理

vue2.0的响应式

实现原理
- 对象类型：通过Object.definedProperty()对属性的读取、修改进行拦截（数据劫持）
- 数组类型：通过重写更新数据的一系列方法来实现拦截。（对数组的方法进行了包裹）

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

存在问题:

新增属性，删除属性都不会刷新界面
直接通过下标修改数组，界面不会自动更新

vue3.0的响应式

实现原理
- 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性的读写，属性的添加，属性的删除等
- 通过Reflect(反射)：对被代理对象的属性进行操作
- MDN文档中描述的Proxy与Reflect：

问：

//ref这个响应式是怎么设计的?
//就是监听了value的改变劫持value属性的setter getter
//因此ref一般用在基本数据,或者引用数据的嵌套层级不深得数据上

//reactive也是响应式的设计怎么设计的?
//跟ref一样但是底层采用的是ES6的Proxy代理了整个引用数据

5.计算属性

- 与vue2.x中computed配置功能一致
- 写法1、引入2、使用3、返回

<script>
import { reactive, computed } from "vue";
export default {
  setup() {
    // 数据源
    let obj = reactive({
      fname: "刘",
      lname: "疏晗",
    });

    obj.quanming = computed(() => {
      return obj.fname + obj.lname;
    });
    return { obj };
  },
};
</script>