vite

npm run dev

大体结构

App.vue main.js

常用的组合式API(Composition API)

setup

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

setup函数的两种返回值：

1.若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。(重点)

2.若返回一个渲染函数：则可以自定义渲染内容。（了解）

📢注意：1.尽量不要与Vue2配置混用

Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
如果有重名, setup优先。

2.setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个promise实例，但需要suspense和异步组件的配合）

ref函数

作用

定义一个响应式的数据

语法

创建一个包含响应式数据的引用对象(reference对象，建成ref对象)

在JS中操作数据：

在模板中读取数据不需要.value

📢注意：

接收的数据可以是：基本类型，也可以是对象类型。
基本类型的数据：响应式依然是靠Object.defineProperty()的gei和set完成的。
对象类型的数据：内部借助了Vue3中的一个新函数--reactive函数，读取时不需要多次加.value

reactive函数

作用

定义一个对象类型的响应式数据（基本类型不可以）

语法

const 代理对象 = reactive(源对象)接收一个对象/数组，返回一个代理对象（Proxy的实例对象，简称proxy对象）

📢注意：

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

reactive与ref对比

通常使用reactive，把数据封装在一个对象内

响应式原理

Vue2

Vue3

补充：.后面跟的是具体的对象属性，是一个字符串。而这里的形参propName是个变量名，[变量名]才能获取值。使用.会当字符串解析。补充：在Vue3中给插槽命名，推荐使用v-slot:xx，而不是用slot='xx'

setup

计算属性与监视

computed函数

与Vue2中的computed配置功能一致。可以被修改时写完整形式。

watch配置项

与Vue2中的watch配置功能一致。

监测ref定义的基本类型的值不要加value，因为不加value检测的是Refimpl{...}这个对象，加了检测的是具体的值。

但是监测ref定义的对象类型的值，检测的是Refimpl{...}这个对象，里面的value指向是借助reactive构造的proxy，数据改变，proxy地址不变，所以检测不到。解决方法：1.加上.value，这样检测的是借助reactive构造的proxy（强制开启了深度监视）。2.加上,{deep:true}，开启深度监视。小bug 特殊情况中的’某个属性‘指对象

watchEffect

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

Vue3生命周期

写在setup里的生命周期钩子🪝加个on,前两个无法写在setup中，需要import {onxxx} from 'vue'引入。setup最先执行。

hook

什么是hook？--本质是一个函数，把setup函数中使用的Compsition API进行了封装
类似于Vue2中的mixin
自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。

toRef

作用：创建一个ref对象，其value值指向另一个对象中的某个属性
语法：const name = toRef(person,'name') 如果使用toRefs，一次性处理一整个对象 ,需要使用...摊开对象，但是只能摊开第一层，所以模板里：
应用：要将响应式对象中的某个属性单独提供给外部使用时。
扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，语法toRefs(person)
文档：为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接