vuejs3

#v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 <h1 v-if="awesome">Vue is awesome!</h1> 也可以用 v-else 添加一个“else 块”： <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no ????</h1> #在 <template> 元素上使用 v-if 条件渲染分组 因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。 <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> #v-else 你可以使用 v-else 指令来表示 v-if 的“else 块”： <div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div> v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 #v-else-if v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用： <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。 #v-show 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样： <h1 v-show="ok">Hello!</h1> 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。...

组合式函数 此章节假设你已经对组合式 API 有了基本的了解。如果你只学习过选项式 API，你可以使用左侧边栏上方的切换按钮将 API 风格切换为组合式 API 后，重新阅读响应性基础和生命周期钩子两个章节。 ::: 什么是“组合式函数”？ {#what-is-a-composable} 在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。 当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的 lodash 或是 date-fns。 相比之下，有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。 鼠标跟踪器示例 {#mouse-tracker-example} 如果我们要直接在组件中使用组合式 API 实现鼠标跟踪功能，它会是这样的： <script setup> import { ref, onMounted, onUnmounted } from 'vue' const x = ref(0) const y = ref(0) function update(event) { x.value = event.pageX y.value = event.pageY } onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) </script> <template>Mouse position is at: {{ x }}, {{ y }}</template> 但是，如果我们想在多个组件中复用这个相同的逻辑呢？我们可以把这个逻辑以一个组合式函数的形式提取到外部文件中： // mouse.js import { ref, onMounted, onUnmounted } from 'vue' // 按照惯例，组合式函数名以“use”开头 export function useMouse() { // 被组合式函数封装和管理的状态 const x = ref(0) const y = ref(0) // 组合式函数可以随时更改其状态。 function update(event) { x.value = event.pageX y.value = event.pageY } // 一个组合式函数也可以挂靠在所属组件的生命周期上 // 来启动和卸载副作用...

提示 在阅读文档之前，你应该已经熟悉了这两个 Vue 基础和创建组件。 在 Vue Mastery 上观看关于组合式 API 的免费视频。 通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。 假设在我们的应用程序中，我们有一个视图来显示某个用户的仓库列表。除此之外，我们还希望应用搜索和筛选功能。处理此视图的组件可能如下所示： // src/components/UserRepositories.vue export default { components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList }, props: { user: { type: String } }, data () { return { repositories: [], // 1 filters: { ... }, // 3 searchQuery: '' // 2 } }, computed: { filteredRepositories () { ... }, // 3 repositoriesMatchingSearchQuery () { ... }, // 2 }, watch: { user: 'getUserRepositories' // 1 }, methods: { getUserRepositories () { // 使用 `this.user` 获取用户仓库 }, // 1 updateFilters () { ... }, // 3 }, mounted () { this.getUserRepositories() // 1 } } 该组件有以下几个职责： 从假定的外部 API 获取该用户名的仓库，并在用户更改时刷新它 使用 searchQuery 字符串搜索存储库 使用 filters 对象筛选仓库 用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说。 一个大型组件的示例，其中逻辑关注点是按颜色分组。...

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。 尽管存在 prop 和事件，但有时你可能仍然需要直接访问 JavaScript 中的子组件。为此，可以使用 ref attribute 为子组件或 HTML 元素指定引用 ID。例如： <input ref="input" /> 例如，你希望以编程的方式 focus 这个 input 在组件上挂载，这可能有用 const app = Vue.createApp({}) app.component('base-input', { template: ` <input ref="input" /> `, methods: { focusInput() { this.$refs.input.focus() } }, mounted() { this.focusInput() } }) 此外，还可以向组件本身添加另一个 ref，并使用它从父组件触发 focusInput 事件： <base-input ref="usernameInput"></base-input> this.$refs.usernameInput.focusInput() 当 ref 与 v-for 一起使用时，你得到的 ref 将是一个数组，其中包含镜像数据源的子组件。 WARNING $refs 只会在组件渲染完成之后生效。这仅作为一个用于直接操作子元素的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。 参考：在组合式 API 中使用 template refs

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 #绑定 HTML Class #对象语法 我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class： <div :class="{ active: isActive }"></div> 上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。 你可以在对象中传入更多字段来动态切换多个 class。此外，:class 指令也可以与普通的 class attribute 共存。当有如下模板： <div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div> 和如下 data： data() { return { isActive: true, hasError: false } } 渲染的结果为： <div class="static active"></div> 当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。 绑定的数据对象不必内联定义在模板里： <div :class="classObject"></div> data() { return { classObject: { active: true, 'text-danger': false } } } 渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式： <div :class="classObject"></div> data() { return { isActive: true, error: null } }, computed: { classObject() { return { active: this.isActive && !this.error,...

#创建一个应用实例 每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的： const app = Vue.createApp({ /* 选项 */ }) 该应用实例是用来在应用中注册“全局”组件的。我们将在后面的指南中详细讨论，简单的例子： const app = Vue.createApp({}) app.component('SearchInput', SearchInputComponent) app.directive('focus', FocusDirective) app.use(LocalePlugin) 应用实例暴露的大多数方法都会返回该同一实例，允许链式： Vue.createApp({}) .component('SearchInput', SearchInputComponent) .directive('focus', FocusDirective) .use(LocalePlugin) 你可以在 API 参考 中浏览完整的应用 API。 #根组件 传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。 一个应用需要被挂载到一个 DOM 元素中。例如，如果我们想把一个 Vue 应用挂载到 <div id="app"></div>，我们应该传递 #app： const RootComponent = { /* 选项 */ } const app = Vue.createApp(RootComponent) const vm = app.mount('#app') 与大多数应用方法不同的是，mount 不返回应用本身。相反，它返回的是根组件实例。 虽然没有完全遵循 MVVM 模型_blank_nofollow，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示组件实例。 尽管本页面上的所有示例都只需要一个单一的组件就可以，但是大多数的真实应用都是被组织成一个嵌套的、可重用的组件树。举个例子，一个 todo 应用组件树可能是这样的： Root Component └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ ClearTodosButton └─ TodoListStatistics 每个组件将有自己的组件实例 vm。对于一些组件，如 TodoItem，在任何时候都可能有多个实例渲染。这个应用中的所有组件实例将共享同一个应用实例。 我们会在稍后的组件系统章节具体展开。不过现在，你只需要明白根组件与其他组件没什么不同，配置选项是一样的，所对应的组件实例行为也是一样的。 #组件实例 property 在前面的指南中，我们认识了 data property。在 data 中定义的 property 是通过组件实例暴露的： const app = Vue.createApp({ data() { return { count: 4 }...

Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。 将 Vue.js 添加到项目中有三种主要方式。 在页面上以 CDN package 的形式导入。 使用 npm 安装它。 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。 #发布版本说明 最新版本： 每个版本的详细发行说明可在 GitHub 上找到。 #Vue Devtools 当前是 Beta 版——Vuex 和 Router 的集成仍然是 WIP 在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。 #CDN 对于制作原型或学习，你可以这样使用最新版本 <script src="https://unpkg.com/vue@next" rel="external nofollow" ></script> 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： #npm 在用 Vue 构建大型应用时推荐使用 npm 安装 。NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。 ## 最新稳定版 $ npm install vue@next #命令行工具 (CLI) Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。 TIP CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。 对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli@next。要升级，你应该需要全局重新安装最新版本的 @vue/cli： yarn global add @vue/cli@next ## OR npm install -g @vue/cli@next 然后在 Vue 项目运行： vue upgrade --next #Vite Vite 是一个 web 开发构建工具，由于其原生 ES...

#mixins 类型：Array<Object> 详细： mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用特定的选项合并逻辑。例如，如果 mixin 包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。 Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。 示例： const mixin = { created: function() { console.log(1) } } Vue.createApp({ created() { console.log(2) }, mixins: [mixin] }) // => 1 // => 2 参考 Mixins #extends 类型：Object | Function 详细： 允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)。这主要是为了便于扩展单文件组件。 这和 mixins 类似。 示例： const CompA = { ... } // 在没有调用 `Vue.extend` 时候继承 CompA const CompB = { extends: CompA, ... } #provide / inject 类型： provide：Object | () => Object inject：Array<string> | { [key: string]: string | Symbol | Object } 详细： 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的 context 特性很相似。 provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。 inject 选项应该是： 一个字符串数组，或 一个对象，对象的 key 是本地的绑定名，value 是： 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或 一个对象，该对象的： from property...

#data 类型：Function 详细： 返回组件实例的 data 对象的函数。在 data 中，我们不建议观察具有自身状态行为的对象，如浏览器 API 对象和原型 property。一个好主意是这里只有一个表示组件 data 的普通对象。 一旦观察过，你就无法在根数据对象上添加响应式 property。因此推荐在创建实例之前，就声明所有的根级响应式 property。 实例创建之后，可以通过 vm.$data 访问原始数据对象。组件实例也代理了 data 对象上所有的 property，因此访问 vm.a 等价于访问 vm.$data.a。 以 _ 或 $ 开头的 property 不会被组件实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。 示例： // 直接创建一个实例 const data = { a: 1 } // 这个对象将添加到组件实例中 const vm = Vue.createApp({ data() { return data } }).mount('#app') console.log(vm.a) // => 1 注意，如果你为 data property 使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。 data: vm => ({ a: vm.myProp }) 参考深入响应性原理 #props 类型：Array<string> | Object 详细： props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高阶选项，如类型检测、自定义验证和设置默认值。 你可以基于对象的语法使用以下选项： type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。 default：any 为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回 required：Boolean 义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。 validator：Function 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。 示例： const app = Vue.createApp({})...

#概览 $on，$off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口。 #2.x 语法 在 2.x 中，Vue 实例可用于触发通过事件触发 API 强制附加的处理程序 ($on，$off 和 $once)，这用于创建 event hub，以创建在整个应用程序中使用的全局事件侦听器： // eventHub.js const eventHub = new Vue() export default eventHub // ChildComponent.vue import eventHub from './eventHub' export default { mounted() { // 添加 eventHub listener eventHub.$on('custom-event', () => { console.log('Custom event triggered!') }) }, beforeDestroy() { // 移除 eventHub listener eventHub.$off('custom-event') } } // ParentComponent.vue import eventHub from './eventHub' export default { methods: { callGlobalCustomEvent() { eventHub.$emit('custom-event') // 如果ChildComponent mounted，控制台中将显示一条消息 } } } #3.x 更新 我们整个从实例中移除了 $on，$off 和 $once 方法，$emit 仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序 #迁移策略 例如，可以通过使用实现事件发射器接口的外部库来替换现有的 event hub mitt。 在兼容性构建中也可以支持这些方法。