Vue3知识点整理（2）- 常用Composition API（1）和 Vue3.0中的响应式原理

目录

一、常用Composition API（1）

1.1 Setup

1.1.1 案例练习

1.2 ref函数

1.2.1 作用

1.2.2 语法

1.2.3 备注

1.2.4 简单案例练习

1.3 reactive函数

1.3.1 作用

1.3.2 语法

1.3.3 简单案例练习

1.4 reactive 对比 ref

1.4.1 定义数据角度对比

1.4.2 原理角度对比

1.4.3 使用角度对比

二、Vue3.0中的响应式原理

2.1 vue2.x的响应式

2.1.1 实现原理

2.1.2 存在问题

2.2 Vue3.0的响应式

2.2.1 实现原理

2.3 案例练习

2.3.1 模拟Vue2中实现响应式

2.3.2 模拟Vue3中实现响应式

---

一、常用Composition API（1）

Vue3官方文档 - 组合API

1.1 Setup

Vue3官方文档 - Setup

（1）理解：Vue3.0中的一个新的配置项，值为一个函数

（2）组件中所用到的：数据、方法等等，均要配置在setup中

（3）setup函数的两种返回值：

若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点）若返回一个渲染函数：则可以自定义渲染内容（了解即可）

（4）使用setup时需注意：

尽量不要与Vue2.x配置混用 Vue2.x配置（data、methods、computed...）中可以访问到setup中的属性、方法但在setup中不能访问到Vue2.x配置（data、methods、computed...）如果有重名，setup优先setup不能是一个asyn函数，因为返回值不再是return的对象，而是promise，模板获取不到return对象中的属性（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合 ）

（5）setup注意点：

setup执行的时机 在beforeCreate之前执行依次，this 是 undefinedsetup的参数 props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性context：上下文对象 attrs：值为对象，半酣：组件外部传递过来，但没有在props配置中声明的属性，相当于 this.$attrsslot：收到的插槽内容，相当于 this.$slotemit：分发自定义事件的函数，相当于 this.$emit 1.1.1 案例练习

在App.vue中简单使用setup配置项

1.2 ref函数

Vue3官方文档 - Ref

1.2.1 作用

定义一个响应式的数据

1.2.2 语法

// let xxx = ref(initValue)
const xxx = ref(initValue)

创建一个包含响应式数据的引用对象（reference对象，简称ref对象）JS中 *** 作数据：xxx.value模板中读取数据：不需要.value，直接{{xxx}} 1.2.3 备注 接收数据可以是：基本类型、也可以是对象类型基本类型的数据：响应式依然是依靠 object.defineProperty() 中的 get 与 set 完成的对象类型的数据：内部使用了 Vue3.0 中的一个新函数 —— reactive函数 1.2.4 简单案例练习

在App.vue中简单使用ref对象

1.3 reactive函数

Vue3官方文档 - reactive

1.3.1 作用

定义一个对象类型的响应式数据（基本类型用ref函数）

1.3.2 语法

const 代理对象 = reactive(源对象)

接收一个对象（或数组）返回一个代理对象（Proxy实例对象，简称proxy对象）

reactive定义的响应式数据是"深层次的"内部基于ES6的 Proxy 实现，通过 代理对象 *** 作 源对象内部数据进行 *** 作 1.3.3 简单案例练习

在App.vue中简单使用reactive函数

1.4 reactive 对比 ref 1.4.1 定义数据角度对比 ref用来定义：基本类型数据reactive用来定义：对象（或数组）类型对象备注：ref也可以用来定义对象（或数组）类型对象，它内部会自动通过reactive转为代理对象 1.4.2 原理角度对比 ref通过 Object.defineProperty() 的 get 与 set 来实现响应式（数据劫持）reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过 Reflect *** 作源对象内部的数据 1.4.3 使用角度对比 ref定义的数据： *** 作数据需要 .value，读取数据时模板中直接读取不需要 .valuereactive定义的数据： *** 作数据与读取数据：均不需要 .value 二、Vue3.0中的响应式原理 2.1 vue2.x的响应式 2.1.1 实现原理 对象类型：通过 Object.defineProperty() 对属性的堆区、修改进行拦截（数据劫持）数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

Object.defineProperty( 对象 , '属性名',{
    get(){},
    set(){}
})

2.1.2 存在问题 新增属性、删除属性，界面不会刷新直接下标修改数组，界面不会自动属性

问题解决：

Vue.set(target, propertyName/index, value)vm.$set(target, propertyName/index, value)

Vue官方文档 - Vue.set

Vue官方文档 - vm.$set

案例参考：Vue知识点整理（一）- Vue核心（4）- 数据监测

2.2 Vue3.0的响应式 2.2.1 实现原理 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。通过Reflect（反射）: 对源对象的属性进行 *** 作

MDN文档中描述的Proxy与Reflect：

ProxyReflect

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)
    }
})

2.3 案例练习 2.3.1 模拟Vue2中实现响应式

2.3.2 模拟Vue3中实现响应式