vue3+Typescript---Composition API(常用部分)学习笔记（二）

1、计算属性和监视

（1）计算属性

【computed函数】计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。

计算属性的 getter 函数没有副作用，它更易于测试和理解。

//第一个姓名 只有getter的计算属性
    const fullName1 = computed(() => {
      return user.firstName + "_" + user.lastName;
    });
    // 第二个姓名  有getter与setter的计算属性getter和setter
    const fullName2 = computed({
      get() {
        console.log("get方法===");
        return user.firstName + "_" + user.lastName;
      },
      set(val: string) {
        console.log("set方法===", val);
        const name = val.split("_");
        user.firstName = name[0];
        user.lastName = name[1];
      },
    });

计算属性和methods方法的区别：

计算属性是基于它们的反应依赖关系缓存的。计算属性只在相关响应式依赖发生改变时它们才会重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

（2）监视

【watch函数】监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调，默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次。通过配置deep为true, 来指定深度监视。

 // 第三个姓名
    const fullName3 = ref("");
    // 监视指定的数据
    watch(
      user,
      ({ firstName, lastName }) => {
        fullName3.value = firstName + "_" + lastName;
      },
      { immediate: true, deep: true } //immediate默认执行一次watch，deep深度监视
    );

【watchEffect函数】不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据。默认初始时就会执行第一次, 从而可以收集需要监视的数据。监视数据发生变化时回调。

// 监视，不需要配置immediate,本身默认就会进行监视（默认执行一次）
watchEffect(() => {
   fullName3.value = user.firstName + "_" + user.lastName;
});

例子

2、生命周期

vue2对应的钩子函数，vue3的钩子函数先执行，比如说 onMounted在mounted 前执行。

说明	vue2钩子函数	vue3中对应的组合式API
组件实例化之前执行	beforeCreate	使用 setup()
组件实例化完毕，但页面还未显示	created	使用 setup()
组件挂载前，页面仍未显示，但虚拟Dom已经配置	beforeMount	onBeforeMount
组件挂载后，此方法执行后，页面显示	mounted	onMounted
组件更新前，页面仍未更新，但虚拟Dom已经配置	beforeUpdate	onBeforeUpdate
组件更新，此方法执行后，页面显示	updated	onUpdated
组件销毁前	beforeDestroy	onBeforeUnmount
组件销毁	destroyed	onUnmounted
错误处理机制	errorCaptured	onErrorCaptured

组合式 API 还提供了onRenderTracked、onRenderTriggered调试钩子函数。

【App.vue】

    import { defineComponent, ref, reactive } from "vue";
    import Child from "./components/Child.vue";
    export default defineComponent({
    name: "App",
    components: {
        Child,
    },
    setup() {
        const isShow = ref(false);
        const showChild = () => {
            console.log("=====", isShow.value);
            isShow.value = !isShow.value;
        };
        return {
            isShow,
            showChild,
        };
     },
});

【Child.vue】

3、自定义hook函数

使用Vue3的组合API封装的可复用的功能函数

自定义hook的作用类似于vue2中的mixin技术

自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易

例子：自定义获取当前鼠标点击的坐标的自定义hook函数。

【useMousePosition.ts】位于src->hook文件夹下

例子：封装发ajax请求的hook函数

【products.json】位于public->data文件夹下。

【products.json】

[
    {"id":1,"title":"苹果","price":4},
    {"id":2, "title":"哈密瓜","price":8},
    {"id":3,"title":"榴莲","price":12}
]

4、toRefs

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref。

将响应式对象中所有属性包装为ref对象, 并返回包含这些ref对象的普通对象

应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用。