vue3 中的CompostionAPI (也称 组件API)

组合API CompositoinAPI

• setup 是组合API 的入口函数, 在组合API中定义的变量、方法、 要想在外界使用 需要暴露出去(return { xxx,Fun})

    // setup 是组合API 的入口函数,  在组合API中定义的变量、方法、 要想在外界使用 需要暴露出去(return { xxx,Fun})

setup() {
    // 这样定义不是响应式的   数据发生变化 页面不会随之改变
    // let count = 0;
    // 使用ref 定义，数据是响应式的
    let count = ref(0);

    function sum() {
      //ref 中的value 属性，存储着变量的值，所以说如果修改变量，就是操作变量.value的值
      count.value = ++count.value;
    }
    // 将变量  方法 暴露出去，让 view 层使用
    return {
      count,
      sum,
    };
  },

ref 函数和 reactive函数

ref/reactive 定义变量的时候 使用ref定义 数据是响应式的

• ref 用于定义简单数据类型，number，string等等...

  • ref函数注意点：

  • ref函数只能监听简单类型的变化，不能监听复杂数据类型的变化(对象/数组)

value属性存储的是 变量的值

//导入 ref
import { ref } from "vue";

//定义简单数据类型 变量，数据是响应式的
let count = ref(0);

//修改变量的值  操作value
count.value = count.value +1;

• reactive ** 用于定义复杂数据类型/对象/数组/函数 --

  定一个 state 将复杂类型存储在state中, 两个数组 都存储在这个位置

//导入 reactive
import { reactive } from "vue";

// reactive  用于定义复杂数据类型  （复杂数据类型 不要使用ref定义）
const state = reactive({
    // 学生信息
    status: [
      { id: 1, name: "学生1", age: 11 },
      { id: 2, name: "学生2", age: 12 },
      { id: 3, name: "学生3", age: 11 },
    ],
    status2: [
      { id: 1, name: "学生1", age: 11 },
      { id: 2, name: "学生2", age: 12 },
      { id: 3, name: "学生3", age: 11 },
    ],
  });

//修改statuse的值  操作state
function remStu(i) {
  // 注意 这里操作的时候 不再使用this    使用的是 state（因为上面定义 state 的值为 reactive）
  state.status.splice(i,1)
}