模版语法
-
文本插值
<span>Message: { { msg }}</span>
-
Attribute 绑定
<div v-bind:id="dynamicId"></div>
响应式基础
-
ref()
- Ref 可以持有任何类型的值,包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构;
- Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时,变化也会被检测到
-
reactive()
- 与将内部值包装在特殊对象中的 ref 不同,reactive() 将使对象本身具有响应性
- reactive() 将深层地转换对象:当访问嵌套对象时,它们也会被 reactive() 包装
- 值得注意的是,reactive() 返回的是一个原始对象的 Proxy,它和原始对象是不相等的:
const raw = {} const proxy = reactive(raw) // 代理对象和原始对象不是全等的 console.log(proxy === raw) // false
- 有限的值类型:它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
- 不能替换整个对象:由于 Vue 的响应式跟踪是通过属性访问实现的,因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象,因为这样的话与第一个引用的响应性连接将丢失:
- 对解构操作不友好:当我们将响应式对象的原始类型属性解构为本地变量时,或者将该属性传递给函数时,我们将丢失响应性连接:
计算属性
-
计算属性来描述依赖响应式状态的复杂逻辑
<script setup> import { reactive, computed } from 'vue' const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] }) // 一个计算属性 ref const publishedBooksMessage = computed(() => { return author.books.length >