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)
	}
}