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

一.setup

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

如下代码所示：

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

<template>
  <div>
    <p>{{ name }}</p>  
    <button @click="sayhellow">点我一下</button>   
  </div>
</template>
<script>
export default {
  setup() {
    let name ="张三";
    function sayhellow() {
      alert("我叫" + name);
    }   
    return {
      // 如果返回的是一个对象，在模板字符窜中可以直接使用
      name,     
      sayhellow,     
    };
  },
};
</script>
<style>
</style>

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

二.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 = "前端";

<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ job.type }}</p>
    <p>{{ job.slery }}</p>
    <button @click="sayhellow">点我一下</button>
    <button @click="fun">修改</button>
    <button @click="fun1">修改对象</button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    let name = ref("张三");
    let job = ref({
      type: "UI设计",
      slery: "20K ",
    });
    function sayhellow() {
      alert("我叫" + name);
    }
    // 修改基本数据类型
    function fun() {
      name.value = "里三";
      console.log(name);
    }
    // 修改对象类型
    function fun1() {
      console.log(job);

      job.value.type = "前端";
    }
    return {
      // 如果返回的是一个对象，在模板字符窜中可以直接使用
      name,
      job,
      sayhellow,
      fun,
      fun1,
    };
  },
};
</script>

<style>
</style>

三.reactive（）

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

 对象

<template>
  <div>    
    <p>{{ job.type }}</p>
    <p>{{ job.slery }}</p>
    <button @click="fun1">修改对象</button>
  </div>
</template>

<script>
import {  reactive } from "vue";
export default {
  setup() {
    let job = reactive({
      type: "UI设计",
      slery: "20K ",
    });
    // 修改对象类型
    function fun1() {
      console.log(job);
      job.type = "前端";  //直接进行修改
    }
    return {
      // 如果返回的是一个对象，在模板字符窜中可以直接使用    
      job,
      fun1,
    };
  },
};
</script>

数组：

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

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

 function changarray() {

      array[0] = "学习";

    }

四.ref和reative对比

1.从定义数据角度

• ref用来定义：基本类型数据
• reative用来定义：对象（或数组）类型数据
• 备注：ref也可以用来定义对象类型数据，它内部会自动通过reative转换

2.从使用角度 

• ref定义数据：操作数据需要.value，读取数据中不需要.value
• reative定义数据：操作数据与读取数据都不需要.value

五.setup的注意点 

• setup的执行时机

1. 在beforcreated之前执行一次，this是underfined

• setup的参数  steup()中可以接收三个参数

1.  props 组件间的数据传递

       父组件： 

<template>
  <Demo name="lisi" age="34"></Demo>   //传值给子组件
</template>

<script>
import { ref, reactive } from "vue";
import Demo from "../src/components/demo.vue";
export default {
  components: {
    Demo,
  },
  setup() {},
};
</script>

子组件

<script>
export default {
  props: ["name", "age"],   //先进行接收
  setup(props) {
    console.log(props);    //这里才能获取到
  },
};
</script>

 2.setup(context)

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

 attrs:相当于this.$attrs 

emit:相当于this.$emit

slots:相当于this.$slots