Vue3知识点总结（一）——setup() ref() reactive()函数

一.setup

setup是在组件被创建之前执行，组件中的数据  方法都放在setup中  注意：在 setup 中你应该避免使用 this，因为它不会找到组件实例。并且setup 不能被async修饰。

如下代码所示：

在setup中定义name属性和sayhellow方法，在return中返回后直接可以在差值语法中进行使用

但是此时的数据并不是响应式的，对其中一个属性进行修改看页面中不会进行更新 *** 作

二.ref函数

这里的ref并不是vue2中ref进行 *** 作dom ,在vue3中实现作用数据的响应式

 用法：

基本数据类型

1.导入：import { ref } from "vue";

2.将属性值放入ref（）函数中  例如： let name = ref("张三");

3.修改：属性.value 进行修改    例如 name.value = "里三";

对象数据类型

1. 将对象放入ref()中 let job = ref({
                                              type: "UI设计",
                                              slery: "20K ",
                                                      });
      

2.修改： 对象名.value.属性名          job.value.type = "前端";

三.reactive（）

定义对象类型的响应式，这里比ref()处理对象类型方便很多，如下代码所示，要想修改对象类型数据直接  job.type=""进行修改，比ref()方便很多

 对象

数组：

对于数组的修改可通过索引直接修改

 let array = reactive(["抽烟", "喝酒", "烫头"]);

 function changarray() {

      array[0] = "学习";

    }

四.ref和reative对比 1.从定义数据角度 ref用来定义：基本类型数据reative用来定义：对象（或数组）类型数据备注：ref也可以用来定义对象类型数据，它内部会自动通过reative转换 2.从使用角度  ref定义数据： *** 作数据需要.value，读取数据中不需要.valuereative定义数据： *** 作数据与读取数据都不需要.value 五.setup的注意点  setup的执行时机 在beforcreated之前执行一次，this是underfined setup的参数  steup()中可以接收三个参数  props 组件间的数据传递

       父组件： 

子组件

 2.setup(context)

context包含三个属性 attrs ,slots, emit

 attrs:相当于this.$attrs 

emit:相当于this.$emit

slots:相当于this.$slots