createApp(ListRendering).mount('#list-rendering') 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组 件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树： 组件化应用构建 介绍 - 16 - 本文档使用 书栈网 · BookStack.CN 构建 在 Vue 中，组件本质上是一个具有预定义选项的实例。在 Vue 从下一页开始，我们将在示例中使用缩写，因为这是 Vue 开发者最常用的用法。 动态参数预期会求出一个字符串，异常情况下值为 null 。这个特殊的 null 值可以被显性地 用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无 效的。例如： 1. 2 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且 易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达 式结果的类型除了字符串之外，还可以是对象或数组。 我们可以传给 :class ( v-bind:class 的简写) 一个对象，以动态地切换 class： 1.

} 为什么引⼊组合式 API ？ 不利于复⽤ 潜在命名冲突 上下⽂丢失 有限的类型⽀持 按 API 类型组织 极易复⽤ (原⽣ JS 函数) 可灵活组合 (⽣命周期钩⼦可多次使⽤) 提供更好的上下⽂⽀持 更好的 TypeScript 类型⽀持 按功能/逻辑组织 可独⽴于 Vue 组件使⽤ 对象式 API 存在的问题 组合式 API 提供的能⼒ 什么是可组合的函数 兼容 核⼼包含 110+ 组合式函数 丰富的⽣态系统 8+ 扩展包 Vue 组合式 API ⼯具包 Ref 显式调⽤，类型检查 相⽐ Reactive 局限更少 .value Reactive ⾃动 Unwrap (即不需要 .value ) 在类型上和⼀般对象没有区别 使⽤ ES6 解构会使响应性丢失 需要使⽤箭头函数包装才能使⽤ watch import { ref } computed(() => unref(a) + unref(b)) } const a = ref(1) const c = add(a, 5) c.value // 6 MaybeRef 类型⼯具 在 VueUse 中我们⼤量地使⽤ MaybeRef 来⽀持可选择性的响应式参数 技巧 type MaybeRef = Ref | T ` ` export function

以 prop + listener 语法糖的形式回归 Vue 2.4 K??? 更好的 TypeScript 整合 TypeScript 和 VSCode 团队为 Vue 量身打造更好的类型推导和 IDE 支持 SSR 性能进一步优化 通过编译时优化获得 2~8x 性能提升 SSR + webpack code split 完美支持 （不再局限于路由） vue-cli 3.0