2.Vue3的核心api特性以及使用方式

Vue3的核心api特性以及使用方式

1.reactive

理解：接收一个复杂数据类型并返回该类型的响应式代理。

<template>
  <div>
    {{ count.value }}
    <button @click.prevent="Add">Add</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'VueTest',
  setup() {
    const count = reactive({ value: 0 });
    function Add() {
      count.value += 1
    }
    return {
      count,
      Add
    };
  }
});
</script>

2.ref

理解：接受一个基本数据类型并返回该类型的响应式代理。

<template>
  <div>sum:{{ sum }}</div>
  <button @click="add">求和</button>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default {
  setup() {
    var a = ref(2);
    var b = ref(3);
    var sum = ref(0);
    var add = (): void => {
      sum.value = a.value + b.value;
    };
    return {
      sum,
      add,
    };
  },
};
</script>

<style lang="less" scoped></style>

3.readonly

理解：传入ref或reactive对象，并返回一个原始对象的只读代理，对象内部任何嵌套的属性也都是只读的。

const xx = readonly(参数)

4.watchEffect

理解：传入一个函数，并响应追踪其依赖，并在其依赖变更时重新运行该函数。

watchEffect(函数()){
    ...
}

5.toRefs

理解：将reactive()创建出来的对象转换为普通对象。

setup(){
	const state = reactive({
		count:0
	})
	return{
		// 此时可以在标签中直接使用 {{ count }} 
		...toRefs(state)
	}
}