vuejs3 第3页

本节例子中代码使用的单文件组件语法 #ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。 示例： const count = ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1 如果将对象分配为 ref 值，则可以通过 reactive 方法使该对象具有高度的响应式。 类型声明： interface Ref<T> { value: T } function ref<T>(value: T): Ref<T> 有时我们可能需要为 ref 的内部值指定复杂类型。我们可以通过在调用 ref 来覆盖默认推断时传递一个泛型参数来简洁地做到这一点： const foo = ref<string | number>('foo') // foo's type: Ref<string | number> foo.value = 123 // ok! 如果泛型的类型未知，建议将 ref 转换为 Ref<T>： function useState<State extends string>(initial: State) { const state = ref(initial) as Ref<State> // state.value -> State extends string return state } #unref 如果参数为 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val。 function useFoo(x: number | Ref<number>) { const unwrapped = unref(x) // unwrapped 确保现在是数字类型 } #toRef 可以用来为源响应式对象上的 property 性创建一个 ref。然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接。 const state = reactive({...

#$watch 参数： {string | Function} source {Function | Object} callback {Object} [options] {boolean} deep {boolean} immediate {string} flush 返回：{Function} unwatch 用法： 侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的 data、prop 或 computed property 名作为字符串传递。对于更复杂的表达式，用一个函数取代。 示例： const app = Vue.createApp({ data() { return { a: 1, b: 2, c: { d: 3, e: 4 } } }, created() { // 顶层property 名 this.$watch('a', (newVal, oldVal) => { // 做点什么 }) // 用于监视单个嵌套property 的函数 this.$watch( () => this.c.d, (newVal, oldVal) => { // 做点什么 } ) // 用于监视复杂表达式的函数 this.$watch( // 表达式 `this.a + this.b` 每次得出一个不同的结果时 // 处理函数都会被调用。 // 这就像监听一个未被定义的计算属性 () => this.a + this.b, (newVal, oldVal) => { // 做点什么 } ) } }) 当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为它们引用相同的对象/数组： const app = Vue.createApp({ data() { return { article: { text: 'Vue...

#$data 类型：Object 详细： 组件实例观察的数据对象。组件实例代理了对其 data 对象 property 的访问。 参考选项 / 数据 – data #$props 类型：Object 详细： 当前组件接收到的 props 对象。组件实例代理了对其 props 对象 property 的访问。 #$el 类型：any 仅可读 详细： 组件实例使用的根 DOM 元素。 对于使用片段的组件，$el将是Vue用于跟踪组件在DOM中位置的占位符DOM节点。建议使用模板引用直接访问DOM元素，而不是依赖$el。 #$options 类型：Object 仅可读 详细： 用于当前组件实例的初始化选项。需要在选项中包含自定义 property 时会有用处： const app = Vue.createApp({ customOption: 'foo', created() { console.log(this.$options.customOption) // => 'foo' } }) #$parent 类型：Vue instance 仅可读 详细： 父实例，如果当前实例有的话。 #$root 类型：Vue instance 仅可读 详细： 当前组件树的根组件实例。如果当前实例没有父实例，此实例将会是其自己。 #$slots 类型：{ [name: string]: (...args: any[]) => Array<VNode> | undefined } 仅可读 详细： 用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 this.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。 在使用渲染函数书写一个组件时，访问 this.$slots 最有帮助。 示例： <blog-post> <template v-slot:header> <h1>About Me</h1> </template> <template v-slot:default> <p> Here's some page content, which will be included in $slots.default. </p> </template> <template v-slot:footer> <p>Copyright 2020 Evan You</p> </template> </blog-post>...

#name 类型：string 详细： 允许组件模板递归地调用自身。注意，组件在全局用 Vue.createApp({}).component({}) 注册时，全局 ID 自动作为组件的 name。 指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。 #delimiters Type: Array<string> Default: ['{{', '}}'] Restrictions: 此选项仅在完整版本中可用，并在浏览器中编译模板。 Details:设置用于模板内文本插入的分隔符。 通常，这用于避免与同样使用mustache语法的服务器端框架冲突。 Example: Vue.createApp({ // Delimiters changed to ES6 template string style delimiters: ['${', '}'] }) #inheritAttrs 类型：boolean 默认：true 详细： 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。 用法： app.component('base-input', { inheritAttrs: false, props: ['label', 'value'], emits: ['input'], template: ` <label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > </label> ` }) 参考禁用 Attribute 继承

本指南将概述可用于创建文档的不同设计元素。 #警告 VuePress 提供了一个自定义容器插件来创建警稿框。有四种类型： Info：提供中立的信息 Tip：提供积极和鼓励的信息 Warning：提供用户应该知道的信息，因为存在低到中等 Danger：供对用户具有高风险的负面信息 Markdown 范例 ::: info You can find more information at this site. ::: ::: tip This is a great tip to remember! ::: ::: warning This is something to be cautious of. ::: ::: danger DANGER This is something we do not recommend. Use at your own risk. ::: 渲染 Markdown INFO 你可以在这个网站上找到更多信息。 TIP 这是一个值得记住的好提示！ WARNING 这是需要谨慎的。 DANGER 这是我们不推荐的。使用风险自负。 #代码块 VuePress 使用 Prism 提供语言语法高亮显示，方法是将语言附加到代码块的起始反撇号： Markdown 示例 ```js export default { name: 'MyComponent' } ``` 渲染输出 export default { name: 'MyComponent' } #行高亮 向代码块添加行高亮显示，需要在大括号中附加行号。 #单行 Markdown 示例 ```js{2} export default { name: 'MyComponent', props: { type: String, item: Object } } ``` 渲染 Markdown export default { name: 'MyComponent', props: { type: String,...

#概览 就变化内容而言，此部分属于高阶内容： 非兼容：用于自定义组件时，v-modelprop 和事件默认名称已更改： prop：value -> modelValue； event：input -> update:modelValue； 非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替； 新增：现在可以在同一个组件上使用多个 v-model 进行双向绑定； 新增：现在可以自定义 v-model 修饰符。 更多信息，请见下文。 #介绍 在 Vue 2.0 发布后，开发者使用 v-model 指令必须使用为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop，他们就不得不使用 v-bind.sync。此外，由于v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自定义元素的问题。 在 Vue 2.2 中，我们引入了 model 组件选项，允许组件自定义用于 v-model 的 prop 和事件。但是，这仍然只允许在组件上使用一个 model。 在 Vue 3 中，双向数据绑定的 API 已经标准化，减少了开发者在使用 v-model 指令时的混淆并且在使用 v-model 指令时可以更加灵活。 #2.x 语法 在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 和 input 事件： <ChildComponent v-model="pageTitle" /> <!-- 简写: --> <ChildComponent :value="pageTitle" @input="pageTitle = $event" /> 如果要将属性或事件名称更改为其他名称，则需要在 ChildComponent 组件中添加 model 选项： <!-- ParentComponent.vue --> <ChildComponent v-model="pageTitle" /> // ChildComponent.vue export default { model: { prop: 'title', event: 'change' }, props: { // 这将允许 `value` 属性用于其他用途 value: String, // 使用 `title` 代替...

#概览 下面是对变更的简要总结： API 已重命名，以便更好地与组件生命周期保持一致 自定义指令将由子组件通过 v-bind="$attrs" 更多信息，请继续阅读！ #2.x 语法 在 Vue 2，自定义指令是通过使用下面列出的钩子来创建的，这些钩子都是可选的 bind – 指令绑定到元素后发生。只发生一次。 inserted – 元素插入父 DOM 后发生。 update – 当元素更新，但子元素尚未更新时，将调用此钩子。 componentUpdated – 一旦组件和子级被更新，就会调用这个钩子。 unbind – 一旦指令被移除，就会调用这个钩子。也只调用一次。 下面是一个例子： <p v-highlight="yellow">高亮显示此文本亮黄色</p> Vue.directive('highlight', { bind(el, binding, vnode) { el.style.background = binding.value } }) 在这里，在这个元素的初始设置中，指令通过传递一个值来绑定样式，该值可以通过应用程序更新为不同的值。 #3.x 语法 然而，在 Vue 3 中，我们为自定义指令创建了一个更具凝聚力的 API。正如你所看到的，它们与我们的组件生命周期方法有很大的不同，即使我们正与类似的事件钩子，我们现在把它们统一起来了： bind → beforeMount inserted → mounted beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。 update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。 componentUpdated → updated beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。 unbind -> unmounted 最终 API 如下： const MyDirective = { beforeMount(el, binding, vnode, prevVnode) {}, mounted() {}, beforeUpdate() {}, updated() {}, beforeUnmount() {}, // 新 unmounted() {} } 生成的 API 可以这样使用，与前面的示例相同： <p v-highlight="yellow">高亮显示此文本亮黄色</p> const app = Vue.createApp({}) app.directive('highlight', { beforeMount(el, binding, vnode) { el.style.background = binding.value } }) 既然定制指令生命周期钩子映射了组件本身的那些，那么它们就更容易推理和记住了！ #边界情况：访问组件实例 通常建议保持指令独立于它们所使用的组件实例。从自定义指令中访问实例通常表明该指令本身应该是一个组件。然而，在某些情况下，这实际上是有意义的。 在Vue 2中，必须通过vnode参数访问组件实例： bind(el,...

#介绍 在很多 Vue 项目中，我们使用 app.component 来定义全局组件，紧接着用 app.mount('#app') 在每个页面内指定一个容器元素。 这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显： 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \ 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel 所有这些都可以通过扩展名为 .vue 的 single-file components (单文件组件) 来解决，并且还可以使用 webpack 或 Browserify 等构建工具。 这是一个文件名为 Hello.vue 的简单实例： 现在我们获得： 完整语法高亮 CommonJS 模块 组件作用域的 CSS 正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。 这些特定的语言只是例子，你可以只是简单地使用 Babel，TypeScript，SCSS，PostCSS 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 vue-loader 使用 webpack，它也能为 CSS Modules 提供头等支持。 #怎么看待关注点分离？ 一个重要的事情值得注意，关注点分离不等于文件类型分离。在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。 即便你不喜欢单文件组件，你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。 <!-- my-component.vue --> <template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></style> #起步 #例子沙箱 如果你希望深入了解并开始使用单文件组件，请来 CodeSandbox 看看这个简单的 todo 应用。 #针对刚接触 JavaScript 模块开发系统的用户 有了 .vue 组件，我们就进入了高阶 JavaScript...

#概览 以下是变更的简要总结： 非兼容：不再支持使用数字 (即键码) 作为 v-on 修饰符 非兼容：不再支持 config.keyCodes #2.x 语法 在 Vue 2 中，支持 keyCodes 作为修改 v-on 方法的方法。 <!-- 键码版本 --> <input v-on:keyup.13="submit" /> <!-- 别名版本 --> <input v-on:keyup.enter="submit" /> 此外，你可以通过全局 config.keyCodes 选项。 Vue.config.keyCodes = { f1: 112 } <!-- 键码版本 --> <input v-on:keyup.112="showHelpText" /> <!-- 自定别名版本 --> <input v-on:keyup.f1="showHelpText" /> #3.x 语法 从KeyboardEvent.keyCode has been deprecated 开始，Vue 3 继续支持这一点就不再有意义了。因此，现在建议对任何要用作修饰符的键使用 kebab-cased (短横线) 大小写名称。 <!-- Vue 3 在 v-on 上使用 按键修饰符 --> <input v-on:keyup.delete="confirmDelete" /> 因此，这意味着 config.keyCodes 现在也已弃用，不再受支持。 #迁移策略 对于那些在代码库中使用 keyCode 的用户，我们建议将它们转换为它们的 kebab-cased (短横线) 命名对齐。

#概览 新增：对于 v-if/v-else/v-else-if的各分支项key将不再是必须的，因为现在 Vue 会自动生成唯一的key。 非兼容：如果你手动提供 key，那么每个分支必须使用唯一的 key。你不能通过故意使用相同的 key 来强制重用分支。 非兼容：<template v-for> 的 key 应该设置在 <template> 标签上 (而不是设置在它的子节点上)。 #背景 特殊的 key attribute 被用于提示 Vue 的虚拟 DOM 算法来保持对节点身份的持续跟踪。这样 Vue 可以知道何时能够重用和修补现有节点，以及何时需要对它们重新排序或重新创建。关于其它更多信息，可以查看以下章节： 列表渲染：维护状态 API 参考：特殊指令 key #在条件分支中 Vue 2.x 建议在 v-if/v-else/v-else-if 的分支中使用 key。 <!-- Vue 2.x --> <div v-if="condition" key="yes">Yes</div> <div v-else key="no">No</div> 这个示例在 Vue 3.x 中仍能正常工作。但是我们不再建议在 v-if/v-else/v-else-if 的分支中继续使用 key attribute，因为没有为条件分支提供 key 时，也会自动生成唯一的 key。 <!-- Vue 3.x --> <div v-if="condition">Yes</div> <div v-else>No</div> 非兼容变更体现在如果你手动提供了 key，那么每个分支都必须使用一个唯一的 key。因此大多数情况下都不需要设置这些 key。 <!-- Vue 2.x --> <div v-if="condition" key="a">Yes</div> <div v-else key="a">No</div> <!-- Vue 3.x (recommended solution: remove keys) --> <div v-if="condition">Yes</div> <div v-else>No</div> <!-- Vue 3.x (alternate solution: make sure the keys are always unique) --> <div v-if="condition" key="a">Yes</div> <div v-else key="b">No</div> #结合 <template v-for> 在 Vue 2.x...