vue3学习day02-组合式API-setup选项、reactive（将非响应式数据变为响应式数据）、computed（基本思想和vue2一致）、watch

6、setup选项

（1）setup选项的执行时机（获取不到this，this是undefined）：beforeCreate函数之前，自动执行

（2）写法

1）原始写法

需要返回

①在script中导出setup函数

②return后，在页面使用

③效果：

2）语法糖写法（使用组合式API更简单）

①在script标签上加setup，直接提供数据、函数，不用返回

②使用

③效果

7、reactive（将非响应式数据变为响应式数据）（针对对象的复杂数据类型）

（1）作用：接收对象类型数据的参数传入，并返回一个响应式的对象

（2）步骤：

1）导入reactive函数（从vue中）

2）在<script setup>中执行reactive函数，并传入类型的数据为对象的初始赋值，并使用变量接收返回值

3）使用

4）效果：

8、ref（将非响应式数据变为响应式数据）（针对简单数据类型或对象类型）

（1）作用：接收简单类型或对象类型的数据传入并返回一个响应式的对象

（2）本质：在原有传入数据的基础上，外层包了一层对象，包成复杂类型，之后，再借助

reactive实现的响应式

（3）步骤：

1）导入ref函数（从vue包）

2）在<script setup>中执行ref函数，并传入初始值，使用变量接收ref的返回值

3）提供函数，实现+1操作

4）效果

 

（4）注意

1）在脚本中访问数据，需要通过.value访问

2）在template中，不需要.value

9、computed（基本思想和vue2一致）

（1）写法

1）导入computed函数

2）执行函数在回调参数中return基于响应式做计算的值，用于变量的接收

3）使用

4）效果

（2）注：

1）计算属性不应该有副作用，比如：异步请求、修改dom等

2）计算属性应该是只读的，特殊情况可以配置get、set

10、watch

（1）作用：监听数据

（2）语法：

已知：

1）监听单个数据（数据变化时，执行回调函数）

①导入watch

②监听

③效果：

2）监听多个（监听第一个参数传入数组）（不管哪个数据变化时，都执行回调函数）

①导入watch

②监听

③效果

（3）额外配置项（位置在watch的第三个参数）

1）immediate——一进页面，立即执行

2）deep深度监视（watch默认的是浅层监视，监视的是整体变化，而不包括整体内部的变化）

浅层监视

深层监听：

3）精确侦听对象的某个属性（不开deep）

（4）注：

1）作为watch函数的第一个参数，ref对象不需要添加.value属性