vue3学习-1（基础）

电脑硬件
2025-09-16 07:48:02

vue3学习-1（基础） 1. 开始API 风格选项式 API (Options API)组合式 API (Composition API) 快速创建个应用 2.基础1. 创建个应用2.模板语法3.响应式基础`reactive()` 的局限性[]( cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive)4.计算属性5. 组件上使用 `v-for`6. 事件处理内联事件处理器方法事件处理器 7. 表单输入绑定8.侦听器深层侦听器即时回调的侦听器一次性侦听器`watchEffect`副作用清理同步侦听器停止侦听器 9. 模板引用10.组件基础定义一个组件传递 props监听事件插槽动态组件DOM 内模板解析注意事项 11.生命周期钩子注册周期钩子生命周期图示 3.深入组件4.逻辑复用5.内置组件6.应用规模化7.最佳实践8.进阶主题

1. 开始 API 风格

选项式 API 和组合式 API。

选项式 API (Options API) <script> export default { // data() 返回的属性将会成为响应式的状态 // 并且暴露在 `this` 上 data() { return { count: 0 } }, // methods 是一些用来更改状态与触发更新的函数 // 它们可以在模板中作为事件处理器绑定 methods: { increment() { this.count++ } }, // 生命周期钩子会在组件生命周期的各个不同阶段被调用 // 例如这个函数就会在组件挂载完成后被调用 mounted() { console.log(`The initial count is ${this.count}.`) } } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template> 组合式 API (Composition API) <script setup> import { ref, onMounted } from 'vue' // 响应式状态 const count = ref(0) // 用来修改状态、触发更新的函数 function increment() { count.value++ } // 生命周期钩子 onMounted(() => { console.log(`The initial count is ${count.value}.`) }) </script> <template> <button @click="increment">Count is: {{ count }}</button> </template> 在生产项目中：当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API。当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件。快速创建个应用

安装 18.3 或更高版本的 Node.js，使用nvm最好，可以切换版本，就算是老项目的vue2也可以不影响

npm create vue@latest cd <your-project-name> npm install npm run dev # npm run build 如果是生产需要build出个文件，一般编译好的文件是放在dist目录

使用全局构建版本，写个html直接打开就行

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body></body> <script src=" unpkg /vue@3/dist/vue.global.js"></script> <div id="app">{{ message }}</div> <script> const { createApp, ref } = Vue; createApp({ setup() { const message = ref('Hello vue!'); return { message, }; }, }).mount('#app'); </script> </html>

使用 ES 模块构建版本，启用 Import maps，拆分模块，这些都不太重要不影响主流程看不看都可以以下是链接， cn.vuejs.org/guide/quick-start.html

2.基础 1. 创建个应用

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例

import { createApp } from 'vue' const app = createApp({ /* 根组件选项 */ })

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。

import { createApp } from 'vue' // 从一个单文件组件中导入根组件 import App from './App.vue' const app = createApp(App)

项目中整体结构大概会是这种组件树的形式

App (root component) ├─ TodoList │ └─ TodoItem │ ├─ TodoDeleteButton │ └─ TodoEditButton └─ TodoFooter ├─ TodoClearButton └─ TodoStatistics

挂在应用

html <div id="app"> <button @click="count++">{{ count }}</button> </div>

import { createApp } from 'vue' const app = createApp({ data() { return { count: 0 } } }) app.mount('#app')

多个应用实例

const app1 = createApp({ /* ... */ }) app1.mount('#container-1') const app2 = createApp({ /* ... */ }) app2.mount('#container-2') 如果你正在使用 Vue 来增强服务端渲染 HTML，并且只想要 Vue 去控制一个大型页面中特殊的一小部分，应避免将一个单独的 Vue 应用实例挂载到整个页面上，而是应该创建多个小的应用实例，将它们分别挂载到所需的元素上去。 2.模板语法 # 文本插值 <span>Message: {{ msg }}</span> # 原始 HTML html插值很容易XSS 漏洞少用 <p>Using v-html directive: <span v-html="rawHtml"></span></p> # Attribute 绑定 # v-bind 指令 <div v-bind:id="dynamicId"></div> # 简写 <div :id="dynamicId"></div> # 同名简写仅支持 3.4 版本及以上  <div :id></div> # 布尔型 Attribute <button :disabled="isButtonDisabled">Button</button> # 动态绑定多个值 const objectOfAttrs = { id: 'container', class: 'wrapper', style: 'background-color:green' } <div v-bind="objectOfAttrs"></div> # 可以在绑定的表达式中使用一个组件暴露的方法：toTitleDate是组件中的方法 <time :title="toTitleDate(date)" :datetime="date"> {{ formatDate(date) }} </time> # 指令是带有 v- 前缀的特殊 attribute 3.响应式基础

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：

import { ref } from 'vue' const count = ref(0) console.log(count) // { value: 0 } console.log(count.value) // 0 count.value++ console.log(count.value) // 1

要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们：

import { ref } from 'vue' export default { // `setup` 是一个特殊的钩子，专门用于组合式 API。 setup() { const count = ref(0) // 将 ref 暴露给模板 return { count } } } <div>{{ count }}</div>

在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包 (有一些注意事项)。

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用单文件组件 (SFC) 来避免这种情况。我们可以使用 <script setup> 来大幅度地简化代码：

Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到

还有另一种声明响应式状态的方式，即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性：

import { reactive } from 'vue' const state = reactive({ count: 0 }) <button @click="state.count++"> {{ state.count }} </button> reactive() 的局限性

reactive() API 有一些局限性：

有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。

不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

let state = reactive({ count: 0 }) // 上面的 ({ count: 0 }) 引用将不再被追踪 // (响应性连接已丢失！) state = reactive({ count: 1 })

对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：

const state = reactive({ count: 0 }) // 当解构时，count 已经与 state.count 断开连接 let { count } = state // 不会影响原始的 state count++ // 该函数接收到的是一个普通的数字 // 并且无法追踪 state.count 的变化 // 我们必须传入整个对象以保持响应性 callSomeFunction(state.count)

由于这些限制，我们建议使用 ref() 作为声明响应式状态的主要 API。

4.计算属性

可以缓存，如果属性无变化不会重复执行，比函数性能好，Getter 不应有副作用（不要改变其他状态、在 getter 中做异步请求或者更改 DOM！），避免直接修改计算属性值

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行

const items = ref([{ message: 'Foo' }, { message: 'Bar' }]) <li v-for="item in items"> {{ item.message }} </li> <li v-for="(value, key, index) in myObject"> {{ index }}. {{ key }}: {{ value }} </li>  <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo.name }} </li> <template v-for="todo in todos"> <li v-if="!todo.isComplete"> {{ todo.name }} </li> </template> 5. 组件上使用 v-for <MyComponent v-for="(item, index) in items" :item="item" :index="index" :key="item.id" />

:item="item"：将当前迭代项的值绑定到子组件的 item 属性上。

:index="index"：将当前迭代项的索引绑定到子组件的 index 属性上。

替换一个数组，当遇到的是非变更方法时，我们需要将旧的数组替换为新的：

// `items` 是一个数组的 ref items.value = items.value.filter((item) => item.message.match(/Foo/)) 6. 事件处理内联事件处理器 const count = ref(0) <button @click="count++">Add 1</button> <p>Count is: {{ count }}</p> 方法事件处理器 const name = ref('Vue.js') function greet(event) { alert(`Hello ${name.value}!`) // `event` 是 DOM 原生事件 if (event) { alert(event.target.tagName) } }  <button @click="greet">Greet</button> 7. 表单输入绑定 # 不使用v-model <input :value="text" @input="event => text = event.target.value"> # 使用v-model <input v-model="text"> # 注意在 <textarea> 中是不支持插值表达式的。请使用 v-model 来替代：  <textarea>{{ text }}</textarea>  <textarea v-model="text"></textarea> # 复选框 <input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">{{ checked }}</label> # 复选框多值 const checkedNames = ref([]) <div>Checked names: {{ checkedNames }}</div> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" /> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames" /> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" /> <label for="mike">Mike</label> # 单选按钮 <div>Picked: {{ picked }}</div> <input type="radio" id="one" value="One" v-model="picked" /> <label for="one">One</label> <input type="radio" id="two" value="Two" v-model="picked" /> <label for="two">Two</label> # 选择器 <div>Selected: {{ selected }}</div> <select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select> # 选择器的选项可以使用 v-for 动态渲染： const selected = ref('A') const options = ref([ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ]) <select v-model="selected"> <option v-for="option in options" :value="option.value"> {{ option.text }} </option> </select> <div>Selected: {{ selected }}</div> # 值绑定  <input type="radio" v-model="picked" value="a" />  <input type="checkbox" v-model="toggle" />  <select v-model="selected"> <option value="abc">ABC</option> </select> # 但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。 # 复选框 <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" /> # true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值： <input type="checkbox" v-model="toggle" :true-value="dynamicTrueValue" :false-value="dynamicFalseValue" /> # 输入自动转为数字 <input v-model.number="age" /> # 自动去除两端的空格 <input v-model.trim="msg" /> 8.侦听器 const x = ref(0) const y = ref(0) // 单个 ref watch(x, (newX) => { console.log(`x is ${newX}`) }) // getter 函数 watch( () => x.value + y.value, (sum) => { console.log(`sum of x + y is: ${sum}`) } ) // 多个来源组成的数组 watch([x, () => y.value], ([newX, newY]) => { console.log(`x is ${newX} and y is ${newY}`) }) const obj = reactive({ count: 0 }) // 错误，因为 watch() 得到的参数是一个 number watch(obj.count, (count) => { console.log(`Count is: ${count}`) }) // 提供一个 getter 函数 watch( () => obj.count, (count) => { console.log(`Count is: ${count}`) } ) 深层侦听器

直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发：

const obj = reactive({ count: 0 }) watch(obj, (newValue, oldValue) => { // 在嵌套的属性变更时触发 // 注意：`newValue` 此处和 `oldValue` 是相等的 // 因为它们是同一个对象！ }) obj.count++

相比之下，一个返回响应式对象的 getter 函数，只有在返回不同的对象时，才会触发回调：

watch( () => state.someObject, () => { // 仅当 state.someObject 被替换时触发 } )

你也可以给上面这个例子显式地加上 deep 选项，强制转成深层侦听器：

watch( () => state.someObject, (newValue, oldValue) => { // 注意：`newValue` 此处和 `oldValue` 是相等的 // *除非* state.someObject 被整个替换了 }, { deep: true } )

在 Vue 3.5+ 中，deep 选项还可以是一个数字，表示最大遍历深度——即 Vue 应该遍历对象嵌套属性的级数。

即时回调的侦听器

watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。

watch( source, (newValue, oldValue) => { // 立即执行，且当 `source` 改变时再次执行 }, { immediate: true } ) 一次性侦听器仅支持 3.4 及以上版本

每当被侦听源发生变化时，侦听器的回调就会执行。如果希望回调只在源变化时触发一次，请使用 once: true 选项。

watch( source, (newValue, oldValue) => { // 当 `source` 变化时，仅触发一次 }, { once: true } ) watchEffect const todoId = ref(1) const data = ref(null) watch( todoId, async () => { const response = await fetch( ` jsonplaceholder.typicode /todos/${todoId.value}` ) data.value = await response.json() }, { immediate: true } )

特别是注意侦听器是如何两次使用 todoId 的，一次是作为源，另一次是在回调中。

我们可以用 watchEffect 函数来简化上面的代码。watchEffect() 允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为：

watchEffect(async () => { const response = await fetch( ` jsonplaceholder.typicode /todos/${todoId.value}` ) data.value = await response.json() }) 副作用清理

有时我们可能会在侦听器中执行副作用，例如异步请求：

watch(id, (newId) => { fetch(`/api/${newId}`).then(() => { // 回调逻辑 }) })

但是如果在请求完成之前 id 发生了变化怎么办？当上一个请求完成时，它仍会使用已经过时的 ID 值触发回调。理想情况下，我们希望能够在 id 变为新值时取消过时的请求。

我们可以使用 onWatcherCleanup() API 来注册一个清理函数，当侦听器失效并准备重新运行时会被调用：

import { watch, onWatcherCleanup } from 'vue' watch(id, (newId) => { const controller = new AbortController() fetch(`/api/${newId}`, { signal: controller.signal }).then(() => { // 回调逻辑 }) onWatcherCleanup(() => { // 终止过期请求 controller.abort() }) }) watchPostEffect(() => { /* 在 Vue 更新后执行 */ }) 同步侦听器 import { watchSyncEffect } from 'vue' watchSyncEffect(() => { /* 在响应式数据变化时同步执行 */ }) 停止侦听器

在 setup() 或 <script setup> 中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。因此，在大多数情况下，你无需关心怎么停止一个侦听器。

一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。如下方这个例子：

注意，需要异步创建侦听器的情况很少，请尽可能选择同步创建。如果需要等待一些异步数据，你可以使用条件式的侦听逻辑：

// 需要异步请求得到的数据 const data = ref(null) watchEffect(() => { if (data.value) { // 数据加载后执行某些操作... } }) 9. 模板引用

访问模板引用

useTemplateRef() 3.5+

v-for 中的模板引用

函数模板引用

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

组件上的 ref

如果一个子组件使用的是选项式 API 或没有使用 <script setup>，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。

使用了 <script setup> 的组件是默认私有的：一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露：

请注意，defineExpose 必须在任何 await 操作之前调用。否则，在 await 操作后暴露的属性和方法将无法访问。

10.组件基础

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成一个层层嵌套的树状结构：

定义一个组件

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

当不使用构建步骤时，一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义：

import { ref } from 'vue' export default { setup() { const count = ref(0) return { count } }, template: ` <button @click="count++"> You clicked me {{ count }} times. </button>` // 也可以针对一个 DOM 内联模板： // template: '#my-template-element' }

要使用一个子组件，我们需要在父组件中导入它。假设我们把计数器组件放在了一个叫做 ButtonCounter.vue 的文件中，这个组件将会以默认导出的形式被暴露给外部。

通过 <script setup>，导入的组件都在模板中直接可用。

如果你是直接在 DOM 中书写模板 (例如原生 <template> 元素的内容)，模板的编译需要遵从浏览器中 HTML 的解析行为。在这种情况下，你应该需要使用 kebab-case 形式并显式地关闭这些组件的标签。

<button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> 传递 props

Props 是一种特别的 attributes，你可以在组件上声明注册。要传递给博客文章组件一个标题，我们必须在组件的 props 列表上声明它。这里要用到 defineProps 宏：

<script setup> defineProps(['title']) </script> <template> <h4>{{ title }}</h4> </template>

defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入。声明的 props 会自动暴露给模板。defineProps 会返回一个对象，其中包含了可以传递给组件的所有 props

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

如果你没有使用 <script setup>，props 必须以 props 选项的方式声明，props 对象会作为 setup() 函数的第一个参数被传入：

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

一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。

当一个 prop 被注册后，可以像这样以自定义 attribute 的形式传递数据给它：

在实际应用中，我们可能在父组件中会有如下的一个博客文章数组：

const posts = ref([ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ])

这种情况下，我们可以使用 v-for 来渲染它们：

使用 v-bind 语法 (:title="post.title") 来传递动态 prop 值的。当事先不知道要渲染的确切内容时，这一点特别有用。

监听事件

组件实例提供了一个自定义事件系统。父组件可以通过 v-on 或 @ 来选择性地监听子组件上抛的事件，就像监听原生 DOM 事件那样：

子组件可以通过调用内置的 $emit 方法，通过传入事件名称来抛出一个事件：

<template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('enlarge-text')">Enlarge text</button> </div> </template>

因为有了 @enlarge-text="postFontSize += 0.1" 的监听，父组件会接收这一事件，从而更新 postFontSize 的值。

我们可以通过 defineEmits 宏来声明需要抛出的事件：

<script setup> defineProps(['title']) const emit = defineEmits(['enlarge-text']) //emit 函数 emit('enlarge-text') </script>

如果你没有在使用 <script setup>，你可以通过 emits 选项定义组件会抛出的事件。你可以从 setup() 函数的第二个参数，即 setup 上下文对象上访问到 emit 函数：

export default { emits: ['enlarge-text'], setup(props, ctx) { ctx.emit('enlarge-text') } } 插槽 <AlertBox> Something bad happened. </AlertBox>

可以通过 Vue 的自定义 <slot> 元素来实现：

Something bad happened.会插入到strong标签后

<template> <div class="alert-box"> <strong>This is an Error for Demo Purposes</strong> <slot /> </div> </template> <style scoped> .alert-box { /* ... */ } </style> 动态组件 <script setup> import Home from './Home.vue' import Posts from './Posts.vue' import Archive from './Archive.vue' import { ref } from 'vue' const currentTab = ref('Home') const tabs = { Home, Posts, Archive } </script> <template> <div class="demo"> <button v-for="(_, tab) in tabs" :key="tab" :class="['tab-button', { active: currentTab === tab }]" @click="currentTab = tab" > {{ tab }} </button> <component :is="tabs[currentTab]" class="tab"></component> </div> </template>  <component :is="tabs[currentTab]"></component>

在上面的例子中，被传给 :is 的值可以是以下几种：

被注册的组件名导入的组件对象

你也可以使用 is attribute 来创建一般的 HTML 元素。

当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。我们可以通过 `` 组件强制被切换掉的组件仍然保持“存活”的状态。

DOM 内模板解析注意事项

大小写区分：HTML 标签和属性名称是不分大小写的，所以浏览器会把任何大写的字符解释为小写，无论是 PascalCase 形式的组件名称、camelCase 形式的 prop 名称还是 v-on 的事件名称，都需要转换为相应等价的 kebab-case (短横线连字符) 形式

闭合标签：在 DOM 内模板中，我们必须显式地写出关闭标签。由于 HTML 只允许一小部分特殊的元素省略其关闭标签，最常见的就是 <input> 和 <img>。对于其他的元素来说，如果你省略了关闭标签，原生的 HTML 解析器会认为开启的标签永远没有结束。

元素位置限制:某些 HTML 元素对于放在其中的元素类型有限制，例如 <ul>，<ol>，<table> 和 <select>，相应的，某些元素仅在放置于特定元素中时才会显示，例如 <li>，<tr> 和 <option>。

这将导致在使用带有此类限制元素的组件时出现问题。例如：

自定义的组件 <blog-post-row> 将作为无效的内容被忽略，因而在最终呈现的输出中造成错误。我们可以使用特殊的 is attribute 作为一种解决方案：

一些小例子：示例

11.生命周期钩子