简介：走进Vue3的世界—setup

• setup

  • setup 函数是Vue3新的配置项

  • 是使用组合API的前提，数据、方法都要放到setup 函数里声明

  • 写法

    setup() {const name = "张三";const age = 18;function sayHello() {alert("你好,我是${name},今年${age}岁了");}return {name,age,sayHello,};
    },
    

实现数据的响应式—ref函数

简介：实现数据的响应式—ref函数

• 定义

  • 定义一个响应式的数据

• 基本类型数据

• 引入 ref 函数

  import { ref } from "vue";
  

• 创建一个包含响应式数据的引用对象（ ref 对象）

  let name = ref("张三");
  let age = ref(18);
  

• 操作数据

  function changePerson() {name.value = "李四";age.value = "19";
  }
  

• 对象类型数据

  • 创建一个包含响应式数据的引用对象（ ref 对象）

    let obj = ref({xd: "小滴课堂",course: "vue3",
    });
    

  • 操作数据

    function changeCourse() {obj.value.course = "react";
    }
    

• 注意

  • 可以处理基本类型数据、数组或者对象类型的数据
  • 基本类型数据的响应式是通过 Object.defineProperty() 实现
  • 对象类型数据的响应式是通过 ES6 中的 Proxy 实现