api查询地址
api请查阅vue3全部API
初始化实例
每个 Vue 应用都是通过 createApp
函数创建一个新的应用实例:
// index.html
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App) // 创建实例
app.mount('#app') // 挂载实例
应用配置
应用实例会暴露一个 .config
对象允许我们配置一些应用级的选项,例如定义一个应用级的错误处理器,用来捕获所有子组件上的错误:
app.config.errorHandler = (err) => {
/* 处理错误 */
}
应用实例还提供了一些方法来注册应用范围内可用的资源应用实例还提供了一些方法来注册应用范围内可用的资源。以下是一些常用的api:
// 注册组件
app.component('my-component', {
/* ... */
})
// 注册指令
app.directive('my-directive', () => {
/* ... */
})
// 安装插件
app.use(MyPlugin)
// 应用一个全局 mixin
app.mixin(mixin)
// 提供一个全局值
app.provide('message', 'hello')
常用模板语法
由于此处的模板语法与vue2基本相同,不做过多介绍,只演示具体案例:
// 文本插值
<span>Message: {{ msg }}</span>
// 原始html
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
// 属性绑定
<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
// 动态绑定多个值
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>
// 事件函数绑定
<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
// 动态参数绑定
<a v-bind:[attributeName]="url"> ... </a>
<a :[attributeName]="url"> ... </a>
// 动态事件绑定
<a v-on:[eventName]="doSomething"> ... </a>
<a @[eventName]="doSomething">
注意:
- 如空格和引号,在 HTML attribute 名称中都是不合法的,可以使用计算属性来代替。
<a :['foo' + bar]="value"> ... </a> // 不合法 <a :[someAttr]="value"> ... </a> // 合法
- 没有显式包含在列表中的全局对象将不能在模板内表达式中访问,例如用户附加在 window 上的属性。然而,你也可以自行在 app.config.globalProperties 上显式地添加它们,供所有的 Vue 表达式使用。
响应式基础
响应式声明
我们可以使用 reactive() 函数创建一个响应式对象或数组:
import { reactive } from 'vue'
const state = reactive({ count: 0 })
要在组件模板中使用响应式状态,需要在 setup() 函数中定义并返回。
import { reactive } from 'vue'
export default {
// `setup` 是一个专门用于组合式 API 的特殊钩子函数
setup() {
const state = reactive({ count: 0 })
function increment() {
state.count++
}
// 不要忘记同时暴露 increment 函数
return {
state,
increment
}
}
}
在 setup()
函数中手动暴露大量的状态和方法非常繁琐。幸运的是,我们可以通过使用构建工具来简化该操作。当使用单文件组件(SFC)时,我们可以使用 <script setup>
来大幅度地简化代码。
<script setup>
import { reactive } from 'vue'
const state = reactive({ count: 0 })
function increment() {
state.count++
}
</script>
<script setup>
中的顶层的导入和变量声明可在同一组件的模板中直接使用。你可以理解为模板中的表达式和 <script setup>
中的代码处在同一个作用域中。
DOM 更新时机
当你更改响应式状态后,DOM 会自动更新。然而,你得注意 DOM 的更新并不是同步的。相反,Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改,每个组件都只更新一次。
若要等待一个状态改变后的 DOM 更新完成,你可以使用 nextTick()
这个全局 API:
import { nextTick } from 'vue'
function increment() {
state.count++
nextTick(() => {
// 访问更新后的 DOM
})
}
深层响应
在 Vue3 中,状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组,你的改动也能被检测到。
import { reactive } from 'vue'
const obj = reactive({
nested: { count: 0 },
arr: ['foo', 'bar']
})
function mutateDeeply() {
// 以下都会按照期望工作
obj.nested.count++
obj.arr.push('baz')
}
响应式代理
reactive()
返回的是一个原始对象的Proxy
,它和原始对象是不相等的;- 只有代理对象是响应式的,更改原始对象不会触发更新。因此,使用 Vue 的响应式系统的最佳实践是仅使用你声明对象的代理版本。
- 为保证访问代理的一致性,对同一个原始对象调用
reactive()
会总是返回同样的代理对象,而对一个已存在的代理对象调用 reactive() 会返回其本身。
const raw = {}
const proxy = reactive(raw)
// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false
// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true
// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true
reactive 的局限性
- 仅对对象类型有效(对象、数组和
Map
、Set
这样的集合类型),而对string
、number
和boolean
这样的原始类型无效。 - 因为 Vue 的响应式系统是通过属性访问进行追踪的,因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象,因为这将导致对初始引用的响应性连接丢失。
ref 创建响应对象
reactive()
的种种限制归根结底是因为 JavaScript
没有可以作用于所有值类型的 “引用” 机制。为此,Vue 提供了一个 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
的 .value
属性也是响应式的。同时,当值为对象类型时,会用 reactive()
自动转换它的 .value
。
一个包含对象类型值的 ref
可以响应式地替换整个对象:
const objectRef = ref({ count: 0 })
// 这是响应式的替换
objectRef.value = { count: 1 }
ref
被传递给函数或是从一般对象上被解构时,不会丢失响应性:
const obj = {
foo: ref(1),
bar: ref(2)
}
// 该函数接收一个 ref
// 需要通过 .value 取值
// 但它会保持响应性
callSomeFunction(obj.foo)
// 仍然是响应式的
const { foo, bar } = obj
简言之,ref()
让我们能创造一种对任意值的 “引用”,并能够在不丢失响应性的前提下传递这些引用。这个功能很重要,因为它经常用于将逻辑提取到组合函数中。
当 ref
在模板中作为顶层属性被访问时,它们会被自动“解包”,所以不需要使用 .value
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
{{ count }} <!-- 无需 .value -->
</button>
</template>
跟响应式对象不同,当 ref
作为响应式数组或像 Map
这种原生集合类型的元素被访问时,不会进行解包。
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)
ref 与 reactive 区别
在 Vue3 中,ref
和 reactive
都是响应式的 API,但是它们的用途不同。ref
用于创建简单的值类型变量,而 reactive
则用于创建复杂的对象。ref创建的变量需要使用 .value
来获取和修改其值,而 reactive
创建的对象需要使用解构赋值来获取和修改其属性值。当我们在开发 Vue3 应用时,需要根据具体的场景选择使用 ref
或者 reactive
。在创建简单的值类型变量时,使用 ref
可以更方便地获取和修改其值。而当我们需要创建复杂的对象时,使用 reactive
可以更方便地进行响应式更新。