掌握 Vue 3：渐进式 JavaScript 框架

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

<script type="module">
    import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

    createApp({
        setup() {
            const msg = ref("你好，Vue 3!");
            return { msg };
        }
    }).mount("#app");
</script>

npm create vue@latest
# 按提示选择 TypeScript / Router / Pinia / 测试
cd my-app
npm install
npm run dev   # 启动 localhost:5173

<template>
    <p>{{ msg }}</p>
    <p>{{ n + 1 }}</p>
    <p>{{ ok ? "YES" : "NO" }}</p>
    <p>{{ formatDate(d) }}</p>
</template>

<a :href="url" :title="tip">链接</a>
<img :src="src" alt="">

<button @click="onClick">点击</button>
<input @keyup.enter="submit">

<p v-if="seen">看到了</p>
<p v-else>没看到</p>

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

import { ref } from "vue";

const count = ref(0);
console.log(count.value);    // 0（脚本里要 .value）
count.value++;             // 修改

// 模板里自动解包，不需要 .value
<template>
    <button @click="count++">{{ count }}</button>
</template>

import { reactive } from "vue";

const state = reactive({
    name: "张三",
    age:  18,
    hobbies: ["代码", "音乐"]
});

state.age = 19;                       // 直接改属性
state.hobbies.push("阅读");       // 数组方法也响应

import { ref, computed } from "vue";

const firstName = ref("三");
const lastName  = ref("张");

const fullName = computed(() => lastName.value + firstName.value);

// fullName 是只读的
<p>{{ fullName }}</p>

import { ref, watch, watchEffect } from "vue";

const id = ref(1);

// 监听一个 ref
watch(id, (newV, oldV) => {
    console.log(`id 从 ${oldV} → ${newV}`);
});

// 立即执行 + 自动监听
watchEffect(() => {
    console.log("id = ", id.value);
    // 自动收集依赖
});

// 监听对象里的属性
const user = reactive({ name: "Alice", age: 18 });
watch(() => user.age, (n, o) => console.log(n));

<div :class="{ active: isActive, 'text-danger': hasError }">对象式</div>
<div :class="[a, b]">数组式</div>
<div :style="{ color: c, fontSize: size + 'px' }">行内</div>

<ul>
    <li v-for="(user, i) in users"
        :key="user.id">
        {{ i }} - {{ user.name }}
    </li>
</ul>

<button @click="count++">+</button>
<button @click="say('hi')">问候</button>

// 事件修饰符
<form @submit.prevent="onSubmit">      // e.preventDefault()
<div   @click.stop="onClick">         // e.stopPropagation()
<div   @click.once="onClick">        // 只触发一次
<input @keyup.enter="submit">       // 回车键
<input @click.ctrl="onClick">        // Ctrl+点击

<input     v-model="name"          />        /* 文本 */
<input     type="checkbox" v-model="ok"/>  /* 复选框（boolean） */
<input     type="checkbox" value="vue"
                                  v-model="arr"/>  /* 数组（多选） */
<input     type="radio" v-model="pick" />/* 单选 */
<select   v-model="city">...</select>           /* 下拉 */
<textarea v-model="msg"></textarea>          /* 多行 */

// 修饰符
<input v-model.lazy="name">            // change 时同步
<input v-model.number="age">          // 转数字
<input v-model.trim="name">           // 去空白

import { onMounted, onUnmounted, ref } from "vue";

setup() {
    const list = ref([]);

    onMounted(async () => {
        const r = await fetch("/api/list");
        list.value = await r.json();
    });

    let timer;
    onMounted(() => timer = setInterval(tick, 1000));
    onUnmounted(() => clearInterval(timer));

    return { list };
}

<template>
    <div class="box">
        <h1>{{ msg }}</h1>
        <button @click="inc">{{ count }}</button>
    </div>
</template>

<script setup>
    import { ref } from "vue";
    const msg   = ref("Hello Vue");
    const count = ref(0);
    const inc   = () => count.value++;
</script>

<style scoped>
    .box { padding: 20px; }
    .box h1 { color: #42B883; }
</style>

<template>
    <button :disabled="disabled" class="btn" @click="emit('click')">
        <slot />
    </button>
</template>

<script setup>
    defineProps({ disabled: Boolean });
    const emit = defineEmits(["click"]);
</script>

<style scoped>
    .btn {
        background: #42B883; color: #fff;
        border: none; border-radius: 6px;
        padding: 8px 16px;
    }
</style>

<template>
    <MyButton @click="onClick">点我</MyButton>
    <MyButton disabled>禁用</MyButton>
</template>

<script setup>
    import MyButton from "./components/MyButton.vue";
    const onClick = () => alert("click");
</script>

import { createApp } from "vue";
import MyButton from "./components/MyButton.vue";

const app = createApp({});
app.component("MyButton", MyButton);
app.mount("#app");

<script setup>
    const props = defineProps({
        title: { type: String, required: true },
        count: { type: Number, default: 0 },
        tags:  { type: Array, default: () => [] }
    });
</script>

<template>
    <h2>{{ props.title }} ({{ props.count }})</h2>
</template>

<template>
    <button @click="send">发给爸爸</button>
</template>

<script setup>
    const emit = defineEmits(["greet"]);
    const send = () => emit("greet", "hi from child");
</script>

// 父组件
<Child @greet="onGreet" />
const onGreet = (msg) => console.log(msg);

<template>
    <div class="card">
        <div class="header"><slot name="header" /></div>
        <div class="body"><slot /></div>
        <div class="footer"><slot name="footer" /></div>
    </div>
</template>

<Card>
  <template #header>标题</template>
  <p>默认插槽内容</p>
  <template #footer><button>确定</button></template>
</Card>

<script setup>
    defineProps(["modelValue"]);
    const emit = defineEmits(["update:modelValue"]);
    const input = (e) => emit("update:modelValue", e.target.value);
</script>

<template>
    <input :value="modelValue" @input="input"/>
</template>

// 父组件
<MyInput v-model="text" />

<script setup>
    import { provide, ref } from "vue";
    const user = ref({ name: "Alice" });
    provide("user", user);
</script>

// 孙组件
<script setup>
    import { inject } from "vue";
    const user = inject("user");
</script>

<script setup>
    // 顶层变量、函数自动暴露给模板
    import { ref, computed } from "vue";

    const n = ref(0);
    const double = computed(() => n.value * 2);

    function inc() { n.value++; }
</script>

<template>
    <button @click="inc">{{ n }} × 2 = {{ double }}</button>
</template>

import { ref, onMounted, onUnmounted } from "vue";

export function useMouse() {
    const x = ref(0), y = ref(0);

    function upd(e) {
        x.value = e.clientX;
        y.value = e.clientY;
    }

    onMounted(() => window.addEventListener("mousemove", upd));
    onUnmounted(() => window.removeEventListener("mousemove", upd));

    return { x, y };
}

// 任何组件都可以：
// import { useMouse } from "./useMouse";
// const { x, y } = useMouse();

// ref 内部大致是：
class RefImpl {
    constructor(value) {
        this._value = toReactive(value);
    }
    get value() {
        track(this);          // 依赖收集
        return this._value;
    }
    set value(v) {
        this._value = toReactive(v);
        trigger(this);         // 通知更新
    }
}

const obj = reactive({ a: 1 });
const wrapped = { x: obj };
wrapped.x.a;       // ❌ 不响应（被包了一层普通对象）
wrapped.x.a = 2;  // ❌ 不会触发更新

// 解决：把 reactive 重新赋值给响应式
wrapped.x = reactive(wrapped.x);
wrapped.x.a = 2;  // ✅ 响应

<script setup>
    import { ref } from "vue";
    const inp = ref(null);

    onMounted(() => inp.value.focus());
</script>

<template>
    <input ref="inp" type="text">
</template>

npm install vue-router@4

import { createRouter, createWebHistory } from "vue-router";
import Home    from "../views/Home.vue";
import About   from "../views/About.vue";
import NotFound from "../views/NotFound.vue";

export default createRouter({
    history: createWebHistory(),
    routes: [
        { path: "/",          component: Home,    name: "home" },
        { path: "/about",     component: About,   name: "about" },
        { path: "/user/:id", component: User,    props: true },
        { path: "/:pathMatch(.*)*", component: NotFound }
    ]
});

<template>
    <nav>
        <RouterLink to="/">首页</RouterLink>
        <RouterLink :to="{ name: 'about' }">关于</RouterLink>
    </nav>

    <main>
        <RouterView />
    </main>
</template>

<script setup>
    import { useRouter, useRoute } from "vue-router";
    const router = useRouter();

    function go() {
        router.push("/about");
    }
</script>

<RouterLink :to="`/user/${user.id}`">{{ user.name }}</RouterLink>

// User.vue
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.params.id);   // url 上的 id
console.log(route.query.tab);   // ?tab=xxx

router.beforeEach((to, from) => {
    if (to.requiresAuth && !isLoggedIn())
        return { name: "login", query: { redirect: to.fullPath } };
});

import { defineStore } from "pinia";
import { ref, computed } from "vue";

export const useUserStore = defineStore("user", () => {
    const name    = ref("游客");
    const token   = ref("");

    const isLogin = computed(() => !!token.value);

    function login(u) {
        name.value  = u.username;
        token.value = u.token;
    }
    function logout() {
        name.value = "";
        token.value = "";
    }

    return { name, token, isLogin, login, logout };
});

<script setup>
    import { useUserStore } from "@/stores/user";
    import { storeToRefs } from "pinia";

    const userStore = useUserStore();
    const { name, isLogin } = storeToRefs(userStore);
    const login = userStore.login;   // 方法直接拿

    function doLogin() {
        login({ username: "Alice", token: "abc" });
    }
</script>

<template>
    <p>欢迎 {{ name }} ({{ isLogin ? "在线" : "离线" }})</p>
    <button @click="doLogin">登录</button>
</template>

<template>
    <button @click="show = !show">切换</button>
    <Transition name="fade">
        <p v-if="show">你好</p>
    </Transition>
</template>

<style>
    .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
    .fade-enter-from,   .fade-leave-to   { opacity: 0; }
</style>

<TransitionGroup name="list" tag="ul">
    <li v-for="t in todos" :key="t.id">{{ t.text }}</li>
</TransitionGroup>

.list-enter-from { opacity: 0; transform: translateY(-20px); }
.list-leave-to   { opacity: 0; transform: translateX(20px); }
.list-move       { transition: transform 0.5s; }

// 全局
app.directive("focus", {
    mounted(el) { el.focus(); }
});

// 局部
const vDemo = {
    mounted(el, binding) {
        el.style.color = binding.value;
    }
};

<input v-focus>
<p v-demo="color">看我</p>

<div v-once>永远不再变</div>
<div v-pre>{{ 不会编译 }}</div>

// v-memo (3.2+)
<div v-memo="[item.id, item.text]">{{ item.text }}</div>

npm run dev       # 开发服务器
npm run build     # 生产构建（dist/）
npm run preview   # 预览构建结果

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { fileURLToPath, URL } from "node:url";

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url))
        }
    },
    server: { port: 5173 }
});

// 全局属性
app.config.globalProperties.$http = axios;

// install 风格
export default {
    install(app, options) {
        app.directive("demo", {...});
        app.provide("key", options);
    }
};

export const mouseMixin = {
    data() { return { x: 0, y: 0 }; },
    mounted() { window.addEventListener("mousemove", this.upd); }
};

import { mouseMixin } from "./mixin.js";
export default { mixins: [mouseMixin] };

// 推荐改写为 composable（见 16 章 useMouse）