Vue3 — setup、ref、 reactive基本使用

常用API

一、setup

• 类型：
  setup 函数是一个新的组件选项。它作为在组件内部使用组合式 API 的入口点

• 调用时间
  在创建组件实例时，在初始 prop 解析之后立即调用 setup。在生命周期方面，它是在 beforeCreate 钩子之前调用的。

• 模板使用：
  函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

  <template>
    <h1>{{num}}</h1>
  </template>
  
  <script lang="ts">
  // defineComponent 定义一个组件，内部可以传入一个配置对象
  import { defineComponent } from 'vue';
  
  export default defineComponent({
    name: 'App',
    
    // setup是组合API中第一个要使用的函数
    setup() {
      const num = 10
      return {
        num
      }
    }
  });
  </script>
  

二、ref

• 作用: 定义一个数据的响应式

• 语法: const xxx = ref(initValue):

  • 创建一个包含响应式数据的引用(reference)对象
  • 返回值为一个ref对象
  • js中操作数据: xxx.value
  • 模板中操作数据: 不需要.value

• 一般用来定义一个基本类型的响应式数据

  <template>
    <h1>{{ num }}</h1>
    <button @click="add">点击+1</button>
  </template>
  
  <script lang="ts">
  // defineComponent 定义一个组件，内部可以传入一个配置对象
  import { defineComponent, ref } from "vue";
  
  export default defineComponent({
    name: "App",
    // 点击按钮自增
    // setup是组合API中第一个要使用的函数
    setup() {
      let num = ref(0);
      function add() {
        num.value++;
      }
      return {
        num,
        add,
      };
    },
  });
  </script>
  

三、reactive

• 作用: 定义多个数据的响应式

• const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象

• 响应式转换是“深层的”：会影响对象内部所有嵌套的属性

• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

  <template>
    <h3>名字：{{user.name}}</h3>
    <h3>性别：{{user.sex}}</h3>
    <h3>年龄：{{user.age}}</h3>
    <h3>爱好：{{user.like}}</h3>
    <button @click="updateUser">点击</button>
  </template>
  
  <script lang="ts">
  import { defineComponent, reactive } from "vue";
  
  export default defineComponent({
    name: "App",
    setup() {
      let obj: any = {
        name: 'balance',
        age: 22, 
        like: {
          title: "斗罗大陆",
          type: "comic",
          character: ["戴沐白", "朱竹清", "宁荣荣"]
        }
      }
      let user = reactive(obj)
      console.log(user);
      
      let updateUser = () => {
        user.name += "!"
        user.sex = "女"
        delete user.age
        console.log(obj);
      }
  
      return {
        user,
        updateUser
      };
    },
  });
  </script>