vue3 响应式api 入门

安装vue

npm install -g @vue/cli@next

初始化项目

vue ui选择,这边选上typescript

启动项目

yarn serve

基本响应式apis

修改src/views/Home.vue

<template>
  <div>
    <button @click="immutable.count++;mutable.count++">Add</button>
    <div>count:{{mutable.count}}</div>
    <div>count:{{immutable.count}}</div>
    <div>immutableIsProxy:{{mutableIsProxy}}</div>
    <div>immutableIsProxy:{{immutableIsProxy}}</div>
    <div>mutableIsReactive:{{mutableIsReactive}}</div>
    <div>immutableIsReactive:{{immutableIsReactive}}</div>
    <div>mutableIsReadonly:{{mutableIsReadonly}}</div>
    <div>immutableIsReadonly:{{immutableIsReadonly}}</div>
  </div>
</template>

<script>
import { reactive, readonly, isProxy, isReactive, isReadonly } from "vue";
export default {
  setup() {
    const mutable = reactive({ count: 0 });
    const immutable = readonly({ count: 0 });

    const mutableIsProxy = isProxy(mutable);
    const immutableIsProxy = isProxy(immutable);

    const mutableIsReactive = isReactive(mutable);
    const immutableIsReactive = isReactive(immutable);

    const mutableIsReadonly = isReadonly(mutable);
    const immutableIsReadonly = isReadonly(immutable);

    return {
      mutable,
      immutable,
      mutableIsProxy,
      immutableIsProxy,
      mutableIsReactive,
      immutableIsReactive,
      mutableIsReadonly,
      immutableIsReadonly
    };
  }
};
</script>

下面的没在例子中

toRaw
转换成原始对象
markRaw
标识对象不可转为proxy
shallowReactive
浅响应式
shallowReadonly
浅只读

refs

修改src/views/Home.vue

如果直接结构data得到的count不是响应式的

<template>
  <div>
    <button @click="count++">Add</button>
    <div>count:{{count}}</div>
  </div>
</template>

<script>
import { toRefs, reactive, watchEffect } from "vue";

export default {
  setup() {
    const data = reactive({ count: 0 });

    const ref = toRefs(data);
    const { count } = ref;
    return {
      count
    };
  }
};
</script>

下面的不在例子中

toRef只是toRefs的取某个特定property版本
unref获取内部对象
isRef检查是否是ref
shallowRef浅ref
triggerRef触发shallowRef引发的effect

computed and watch

<template>
  <div>
    <button @click="data.count++">Add</button>
    <div>computedCount:{{computedCount}}</div>
  </div>
</template>

<script>
import { toRefs, reactive, watch, watchEffect, computed } from "vue";

export default {
  setup() {
    const data = reactive({ count: 0 });
    const computedCount = computed(() => data.count);
    watchEffect(() => {
      alert(data.count);
    });
    watch(
      () => data.count,
      (count, prevCount) => {
        alert(`prevCount ${prevCount} count ${count}`);
      }
    );
    return {
      data,
      computedCount
    };
  }
};
</script>

composition api

beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered