【天禹老师】composition-api个人学习笔记_error in setup: "error: [vue-composition-api] "pro-CSDN博客

本文链接：https://blog.csdn.net/qq_44156920/article/details/126434943

一、常用的Composition API

1. setup函数

1.1 理解

setup是vue3.0中一个新的配置项，值为一个函数
setup是所有composition-api ”表演的舞台“
组件中所用到的数据、方法、计算属性等，都要配置在setup 中
setup函数中的两种返回值：
（1）若返回一个对象，则对象中的属性、方法，在模板中都可以直接使用（重点）
（2）若返回一个渲染函数：则可以自定义渲染内容（了解）

export default {
name: 'App',
//不考虑响应式
setup(){
//数据
	let name='兵长'
//方法
	function sayHi(){
	alert('现在是凌晨六点')
	}
	//返回对象
	/*return {
		name,
		sayHi
	}*/
	//返回一个函数（渲染函数）
	return ()=>h('h1','返回渲染函数')
}

1.2 注意

尽量不要与vue2.x配置混用
- vue2.x配置（data、methods、computed…）中可以访问到setup中的属性、方法
- 但setup中不能访问到vue2.x中的配置（data、methods、computed…）
- 如果有重名，setup优先
setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到retuan对象中的属性

2. ref函数

2.1. 理解

2.1.1 作用

定义一个响应式数据
如果你的数据想要变成响应式，就要通过ref将变量变为响应式对象，通常将其称为引用对象
-

2.1.2 语法

const xxx=ref(initValue)
创建一个包含响应式的引用对象（referen对象）
JS中操作的数据：xxx.value
模板中读取数据：不要.value，直接：

{{xxx}}
- 但在模板里面写的时候，不需要.value，因为vue3识别到是一个ref引用对象之后，会自动读取value值
备注
- 接收的数据可以是：基本类型，也可以是对象类型
- 基本类型的数据：响应式依然是依靠Object.defineProperty()的get和set完成
- 对象类型的数据：内部”求助了“vue3.0中的一个新函数——reactive函数

3.reactive函数

3.1 理解

3.1.1 作用

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

注意ref和reactive 在JS中操作数据方式的不同

3.1.2 语法

const 代理对象=reactive(源对象），接收一个对象（或数组），返回一个代理对象（proxy对象）

源对象就是你的初始数据
reactive定义的响应式数据是“深层次的”
内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

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

4.1 Vue2.x的响应式

实现原理：

对象类型：通过Object.defineProperty() 属性的读取、修改进行拦截（数据劫持）
数组类型：通过重写更新数据的一系列方法来实现拦截（对数组的变更方法进行了包裹）
```
Object.defineProperty(data,'count',{
	get(){}
	set(){}
	})
```

存在的问题：

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

4.2 Vue3.0的响应式

实现原理：

通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等
通过Reflect（反射）：对被代理对象的属性进行操作

在这里插入图片描述

MDN文档中描述的Proxy与Reflect
随记
- Proxy：window的一个内置构造函数
- Reflect：window的一个内置对象

5. reactive对比ref

从定义数据的角度：
- ref用来定义基本类型数据
- reactive用来定义对象（或数组）类型数据
- 备注：ref也可以用来定对象（或数组）类型数据，它内部会自动通过reactive转为代理对象
从原理的角度：
- ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）
- reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据
从使用的角度：
- ref定义的数据：操作数据需要.value，读取数据时在模板中直接读取，不需要.value
- reactive定义的数据：操作数据与读取数据，都不需要.value

6. setup的两个注意点

setup执行的时机
- 在beforeCreate之前执行一次，this是undefined
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
- context：上下文对象
  - attrs：值为对象，包含：组件外部传递进来，但没有在props配置中声明的属性，相当于this.$attrs
  - slots：收到的插槽内容，相当于this.$slots
  - emit：分发自定义事件的函数，相当于this.$emit
- 随记
  - vue3把传进来的多个props整理成了一个Proxy对象

7. 计算属性与监视

7.1 computed函数

7.2 watch函数

与vue2.x中的watch配置功能一致

7.2.1 两个小“坑”

监视reactive定义的响应式数据时，oldValuue无法正确获取、强制开启了深度监视（deep配置失效）
监视reactive定义的响应式数据中某个属性（得是对象类型，不是对象类型写啥deep配置）时：deep配置有效

7.2.2 watch监视ref所定义的响应式数据

监视一个数据
监视多个数据：将多个数据写成数组的形式传进去

7.2.3 watch与value

watch监视ref定义的响应式数据：

监视基本数据类型时**，不需要.value
监视对象类型，两种方法

监视基本数据类型时，不需要.value

RefImpl中每一个属性的改变，watch都能捕获到，但我们改变时只修改value属性，现在它是一个基本数据类型，如果监视的sum.value，则监视的是初始值0

监视对象类型时：

Relmpl中的value属性是一个Proxy对象，只有这个Proxy对象被彻底替换掉了，即在内存中的地址发生了变化，才说明这个value发生了变化。如果只是修改对象中属性的值，该对象在内存中的地址没有发生变化，所以watch监视不到变化
两种解决方法：
- .value，当监视的变量是对象时，RefImpl中的value是一个Proxy，即一个reactive对象，此时watch监视的不再是ref引用对象，是一个reactive对象，reactive对象默认开启深层次
- {deep:true}，配置watch第三个参数，让它执行深度监视

watch监视reactive定义的响应式数据：

监视多个数据：将多个数据写成数组的形式传进去
随记
- watch的参数
  - 第一个参数：监视的是谁
  - 第二个参数：监视回调，当监视的对象发生改变就来调用这个监视函数
  - 第三个参数：监视的配置

7.3 watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，就监视那个属性
watchEffect有点像computed：
- 但computed注重的是计算出来的值（回调函数的返回值），所以必须写返回值
- watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

8. 生命周期

Vue3.0中可以继续使用Vue2.0中的生命周期钩子，但有两个被更名：
- beforeDestroy——>beforeMounted
- destroyd——>unmounted
Vue3.0也提供了Composition API形式的生命周期钩子，与Vue2.x中的钩子对应关系如下：
- beforeCreate——>setup()
- created——>setup()
- beforeMount——>onBeforeMount
- mounted——>onMounted
- beforeUpdate——>onBeforeUpdate
- updated——>onUpdated
- beforeUnmount——>onBeforeUnmount
- unmounted——>onUnmounted