Vue笔记

September 9, 2022

Hello，world

html

<script type="importmap">
    {
        "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
    }
</script>

<div id="app">{{ message }}</div>

<script type="module">
    import { createApp, ref } from "vue";

    const app = createApp({
        setup() {
            const message = ref("Hello Vue!");
            return {
                message,
            };
        },
    }).mount("#app");
</script>

vue2 版本如下，vue2 默认导出 Vue 对象。
本文仅使用 vue3，而不是 vue2。

const app = new Vue({
    el: "#app",
    data: {
        message: "Hello Vue!",
    },
});

模板语法

vue 使用 Mustache 语法

html

<span>Message: {{ msg }}</span>
<span v-html="rawHtml"></span>

<!-- 绑定属性 -->
<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
<div v-bind="objectOfAttrs"></div>

<!-- vue 建议事件以 kebab-case 命名，但支持自动转换 -->
<a v-on:event.modifier="handler"></a>
<a @event.modifier="handler"></a>

<!-- 动态属性 -->
<a v-bind:[attributeName]="url"></a>
<a :[attributeName]="url"></a>

<!-- v-model 组件展开 -->
<input v-model="searchText" />
<input :value="searchText" @input="searchText = $event.target.value" />

<!-- 对于组件，v-model 默认绑定 model-value 属性 -->
<CustomInput v-model="searchText" />
<CustomInput :model-value="searchText" @update:model-value="(newValue) => (searchText = newValue)" />

<!-- 循环数组或对象 -->
<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

<!-- 默认插槽名 default 可以省略 -->
<template v-slot:slot-name="slotProps">fallback</template>
<template #slot-name="slotProps">具名插槽简写</template>
<template #default="slotProps">默认插槽简写</template>
<template #[dynamicSlotName]>动态插槽名</template>

class/style 绑定：https://cn.vuejs.org/guide/essentials/class-and-style.html

内置指令：
https://cn.vuejs.org/api/built-in-directives.html

模板表达式中能够访问变量实际是当前组件暴露的属性或方法
即 xxx 相当于 this.xxx，因此无法访问全局对象上的属性
但 vue 提供了一个有限的全局对象列表，提供给模板使用（比如 Math 和 Date）

使用 app.config.globalProperties 可注册能够被应用内所有组件实例访问到的全局属性的对象

interface AppConfig {
    globalProperties: Record<string, any>;
}

Object.assign(app.config.globalProperties, {
    alert: window.alert,
    // 有限的全局对象列表不含 alert 方法
});

// 应用内其它任意组件
export default {
    mounted() {
        console.assert(this.alert, window.alert);
    },
};

响应式

html

<script lang="ts">
    import { ref, reactive，nextTick } from "vue";

    const component: Component = {
        setup() {
            const count = ref(0);
            async function increment() {
                count.value++;
                 await nextTick()
                 // 现在 DOM 已经更新了
            }
            const state = reactive({ count: 0 });
            return {
                // setup 函数的返回值会暴露给模板
                count,
                increment,
                state,
            };
        },
    };

    export default component;
</script>

<script setup> 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。

html

<script setup>
    import { ref, reactive，nextTick } from "vue";
    const count = ref(0);
    async function increment() {
        count.value++;
         await nextTick()
         // 现在 DOM 已经更新了
    }
    const state = reactive({ count: 0 });
</script>

在模板渲染上下文中，只有顶级的 ref 属性才会被解包。
即，顶级 ref 无需 .value（语法糖，编译器实现），非顶级 ref 需要 .value

对于 ref reactive API，vue 实现了深层响应式，即 vue 递归监听对象的所有属性
vue 还提供了进阶 API：https://cn.vuejs.org/api/reactivity-advanced.html

vue3 基于 Proxy 监听对象属性的变化。对于解构赋值，则无法被监听
此外，响应式对象是 Proxy 实例而不是源对象。
vue 提供了响应式工具函数：https://cn.vuejs.org/api/reactivity-utilities.html
可用于帮助解决这些问题

// 只读
function computed<T>(getter: () => T, debuggerOptions?: DebuggerOptions): Readonly<Ref<Readonly<T>>>;

// 可读写
function computed<T>(
    options: {
        get: () => T;
        set: (value: T) => void;
    },
    debuggerOptions?: DebuggerOptions,
): Ref<T>;

type DebuggerOptions = {
    // 当响应式对象被追踪为依赖时触发（即读取时触发）
    onTrack?: (e: DebuggerEvent) => void;
    // 当响应式对象被更改时触发
    onTrigger?: (e: DebuggerEvent) => void;
};

type DebuggerEvent = {
    effect: ReactiveEffect;
    target: object;
    type: TrackOpTypes /* 'get' | 'has' | 'iterate' */ | TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */;
    key: any;
    newValue?: any;
    oldValue?: any;
    oldTarget?: Map<any, any> | Set<any>;
};

上面以 computed() 举例，响应式核心 API 还包括
readonly() watchEffect() watch()

组件注册

app.component() 方法用于注册组件。该方法需要提供组件名称以及 Component 对象

function createApp(rootComponent: Component, rootProps?: object): App;
interface App {
    component(name: string): Component | undefined;
    component(name: string, component: Component): this;
}

一个 .vue 文件会被编译为 Component 类型的对象

import ComponentA from "./ComponentA.vue";

const component: Component = {
    components: {
        ComponentA,
    },
    setup() {
        // ...
    },
};

// 使用 defineComponent 辅助函数可以自动推导类型
const component = defineComponent({
    /* ... */
});

export default component;

Component 对象的 components 属性则用于声明当前组件导入的组件
其类型可视为 Record<string, Component>
vue 建议使用 PascalCase 为组件命名，并支持通过 kebab-case 使用 PascalCase 命名的组件

组件 setup 函数的第一个参数是父组件传入的属性，第二个参数是一个（非响应式的）context 对象

组件声明

setup()

export default {
    props: {
        title: String,
    },
    setup(props, context) {
        // 属性
        console.log(props.title);

        // 透传 Attributes（非响应式的对象，等价于 $attrs）
        console.log(context.attrs);

        // 插槽（非响应式的对象，等价于 $slots）
        console.log(context.slots);

        // 触发事件（函数，等价于 $emit）
        console.log(context.emit);

        // 暴露公共属性（函数）
        console.log(context.expose);
    },
};

组件实例

我们知道，组件就是一个 Component 对象
当 vue 使用该实例时，会为该对象的 this 附加属性和方法

https://cn.vuejs.org/api/component-instance.html

定义 Props

Vue 强制使用单向数据流。子组件不允许修改父组件传入的 Props

选项式声明

export default {
    props: ["title"],
    setup(props) {
        console.log(props.title);
    },
};

setup 内部声明

const props = defineProps(["title"]);
console.log(props.title);

标注类型

const props = defineProps({
    foo: { type: String, required: true },
    bar: Number,
});

TS 宏声明

const props = defineProps<{
    foo: string;
    bar?: number;
}>();

默认值（参见：Prop 校验）

const props = withDefaults(defineProps<Props>(), {
    foo: "hello",
    labels: () => Math.random(),
});

定义事件

模板触发事件

html

<button @click="$emit('eventName', 'detail1', 'detail2')">click me</button>
<!-- 父组件直接接收 detail，而不是原生 Event -->
<MyButton @event-name="(detail1, detail2) => console.assert(detail1, 'detail1')" />

选项式声明

export default {
    emits: ["inFocus", "submit"],
    setup(props, ctx) {
        ctx.emit("submit");
    },
};

setup 内部声明

const emit = defineEmits(["inFocus", "submit"]);
function buttonClick() {
    emit("submit");
}

TS 宏声明

// 基于类型
const emit = defineEmits<{
    (e: "change", id: number): void;
    (e: "update", value: string): void;
}>();

// v3.3+ 提供, 更简洁的语法
const emit = defineEmits<{
    change: [id: number];
    update: [value: string];
}>();

事件校验

定义插槽

插槽允许父组件在子组件中渲染模板
在子组件模板中，Vue 使用与 WebComponents 相同的 <slot> 语法
父组件传入 slot 则使用 v-slot:slot-name 指令
此外，Vue 支持子组件插槽向父组件插槽模板提供数据

html

<script setup lang="ts">
    const slots = defineSlots<{
        default(props: { msg: string }): any;
    }>();
</script>

生命周期

DOM / 组件 ref （模板引用）

https://cn.vuejs.org/guide/essentials/template-refs.html

html

<script setup>
    import { ref, onMounted } from "vue";
    const input = ref(null);
    onMounted(() => {
        input.value.focus();
    });
</script>

<template>
    <input ref="input" />
</template>

ref 属性传入函数时，会在每次组件更新后以及组件卸载时被调用

html

<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }" />

对于 Vue 组件而不是 DOM 节点，ref 得到的则是组件实例此时 setup 组件必须手动使用 defineExpose 显示暴露属性

html

<script setup>
    import { ref } from "vue";

    const a = 1;
    const b = ref(2);

    // 像 defineExpose 这样的编译器宏不需要导入
    defineExpose({
        a,
        b,
    });
</script>

透传 attributes（$attrs）

对于存在根节点的子组件，父组件提供子组件未声明的属性（包括事件）时，这些属性会自动透传到子组件的根节点上
这种行为是递归的，style 和 class 属性还会自动合并

对于不存在根节点（即多个根节点）的子组件，需要正确地设置 $attr 对象
比如在某个节点上设置 v-bind="$attrs"

在 Javascript 中得到的 attrs 不是响应式的
由于 attrs 变化会触发重渲染，可以使用 onUpdated() 监听

html

<script setup>
    import { useAttrs } from "vue";
    const attrs = useAttrs();
</script>

const component: Component = {
    setup(props, { attrs }) {
        console.log(attrs);
    },
};

透传是默认行为。需要手动处理时，则可以提供以下方式禁用

const component: Component = {
    inheritAttrs: false,
    // 或使用 defineOptions()
    setup() {
        defineOptions({
            inheritAttrs: false,
        });
    },
};

https://cn.vuejs.org/guide/components/attrs.html
https://cn.vuejs.org/api/options-misc.html#inheritattrs

Provide / Inject

https://cn.vuejs.org/guide/components/provide-inject
https://cn.vuejs.org/api/composition-api-dependency-injection.html
https://cn.vuejs.org/api/application.html#app-provide

function provide<T>(key: InjectionKey<T> | string, value: T): void;

// 没有默认值
function inject<T>(key: InjectionKey<T> | string): T | undefined;

// 带有默认值
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T;

// 使用工厂函数
function inject<T>(key: InjectionKey<T> | string, defaultValue: () => T, treatDefaultAsFactory: true): T;

异步组件 / `<Suspense>`

异步组件和普通组件一样，它只是 defineAsyncComponent() 函数包装一个异步函数实现的组件

import { defineAsyncComponent } from "vue";
// defineAsyncComponent() 函数要求提供一个返回 Promise 的函数，而不是 Promise 本身
const AsyncComp: Component = defineAsyncComponent(() => import("./components/MyComponent.vue"));

defineAsyncComponent 支持多种选项

const AsyncComp = defineAsyncComponent({
    // 加载函数
    loader: () => import("./Foo.vue"),

    // 加载异步组件时使用的组件
    loadingComponent: LoadingComponent,
    // 展示加载组件前的延迟时间，默认为 200ms
    delay: 200,

    // 加载失败后展示的组件
    errorComponent: ErrorComponent,
    // 如果提供了一个 timeout 时间限制，并超时了
    // 也会显示这里配置的报错组件，默认值是：Infinity
    timeout: 3000,
});

<Suspense> 内置组件可以看作是通过包装 defineAsyncComponent 实现的组件（）

如果一个组件的 setup 函数是 async 函数，则这个组件需要置于 <Suspense> 内部
这也相当于 defineAsyncComponent() 包装了一个 async 函数

export default {
    async setup() {
        const res = await fetch(/* ... */);
        const posts = await res.json();
        return {
            posts,
        };
    },
};

html

<script setup>
    const res = await fetch(/* ... */)
    const posts = await res.json()
</script>

在 <Suspense> 组件中的异步组件，其加载/错误处理将由外部的 <Suspense> 处理
其内部加载/错误处理被忽略，除非异步组件指定 suspensible: false 选项

html

<Suspense @pending @resolve @fallback>
    <!-- 具有深层异步依赖的组件 -->
    <AsyncComp />

    <template #fallback> Loading... </template>
    <template #fallback> Loading... </template>
</Suspense>

自定义指令

https://cn.vuejs.org/guide/reusability/custom-directives.html
https://cn.vuejs.org/api/options-misc.html#directives

自定义指令是一个对象，其中包含一系列钩子函数

在 setup 组件中注册

html

<script setup>
    // 在模板中启用 v-focus
    const vFocus = {
        mounted: (el) => el.focus(),
    };
</script>

<template>
    <input v-focus />
</template>

在 setup 函数中注册

export default {
    setup() {},
    directives: {
        // 在模板中启用 v-focus
        focus: {
            mounted: (el) => el.focus(),
        },
    },
};

在全局实例上注册

app.directive("focus", {
    mounted: (el) => el.focus(),
});

编写 Vue 插件

https://cn.vuejs.org/guide/reusability/plugins.html
https://cn.vuejs.org/api/application.html#app-use

插件应用在全局实例上，用于添加全局功能

app.use(myPlugin, ...options);

const myPlugin = {
    install(app, ...options) {},
};

内置组件

https://cn.vuejs.org/guide/built-ins/transition.html

组合式函数

JSX

https://cn.vuejs.org/guide/extras/render-function.html

jsx

import { h, ref } from "vue";

export default {
    setup(props, { slots, expose }) {
        const count = ref(0);
        const increment = () => ++count.value;

        expose({
            increment,
        });

        return (
            <div>
                <span>{count}</span>
                <button>{slots.default()}</button>
                <div>{slots.footer({ text: props.message })}</div>
            </div>
        );
    },
};

←Back to home