Vue3学习

布满荆棘的人生 2024-03-23 14:56 33阅读 0赞

## Attribute 绑定 ##

注意，你不能使用 `v-html` 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。

`v-bind` 指令指示 Vue 将元素的 `id` attribute 与组件的 `dynamicId` 属性保持一致。如果绑定的值是 `null` 或者 `undefined`，那么该 attribute 将会从渲染的元素上移除。

因为 `v-bind` 非常常用，我们提供了特定的简写语法：

另一个例子是 `v-on` 指令，它将监听 DOM 事件：

这里的参数是要监听的事件名称：`click`。`v-on` 有一个相应的缩写，即 `@` 字符。

<button :disabled="isButtonDisabled">Button</button>

当 `isButtonDisabled` 为[真值][Link 1]或一个空字符串 (即 `<button disabled="">`) 时，元素会包含这个 `disabled` attribute。而当其为其他[假值][Link 2]时 attribute 将被忽略。

#### 动态绑定多个值 ####

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

const objectOfAttrs = {
      id: 'container',
      class: 'wrapper'
    }

通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上：

### 使用 JavaScript 表达式 ###

至此，我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

{
       { number + 1 }}
    
    {
       { ok ? 'YES' : 'NO' }}
    
    {
       { message.split('').reverse().join('') }}
    
    <div :id="`list-${id}`"></div>

这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。

## 指令 Directives ##

指令是带有 `v-` 前缀的特殊 attribute。Vue 提供了许多[内置指令][Link 3]，包括上面我们所介绍的 `v-bind` 和 `v-html`。

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 `v-for`、`v-on` 和 `v-slot`)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 [v-if][] 为例：

这里，`v-if` 指令会基于表达式 `seen` 的值的真假来移除/插入该 `<p>` 元素。

#### 参数 Arguments ####

某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 `v-bind` 指令来响应式地更新一个 HTML attribute：

这里 `href` 就是一个参数，它告诉 `v-bind` 指令将表达式 `url` 的值绑定到元素的 `href` attribute 上。

#### 动态参数 ####

同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：

<a v-bind:[attributeName]="url"> ... </a>
    
    
    <a :[attributeName]="url"> ... </a>

#### 修饰符 Modifiers ####

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 `.prevent` 修饰符会告知 `v-on` 指令对触发的事件调用 `event.preventDefault()`：

![212d66ebe1e05617f590f48909e98f7f.png][]

### 声明响应式状态 ###

我们可以使用 [reactive()][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++
        }
    
        // 暴露state、 increment 函数到模块
        return {
          state,
          increment
        }
      }
    }

暴露的方法通常会被用作事件监听器：

<button @click="increment">
      {
       { state.count }}
    </button>

## **`<script setup>`** ##

在 `setup()` 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用构建工具来简化该操作。当使用单文件组件（SFC）时，我们可以使用 `<script setup>` 来大幅度地简化代码。

`reactive()` API 有两条限制：1、仅对对象类型有效（对象、数组和 `Map`、`Set` 这样的[集合类型][Link 4]），而对 `string`、`number` 和 `boolean` 这样的 [原始类型][Link 5] 无效。 2、因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失；

### 用 `ref()` 定义响应式变量 ###

[ref()][ref] 方法来允许我们创建可以使用任何值类型的响应式 **ref**：

`ref()` 将传入参数的值包装为一个带 `.value` 属性的 ref 对象：

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

TypeScript 用户请参阅：[为 ref 标注类型][ref 1]

和响应式对象的属性类似，ref 的 `.value` 属性也是响应式的。同时，当值为对象类型时，会用 `reactive()` 自动转换它的 `.value`。

#### ref 在模板中的解包 ####

当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 `.value`。下面是之前的计数器例子，用 `ref()` 代替：

#### 数组和集合类型的 ref 解包 ####

跟响应式对象不同，当 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)

## 计算属性 ##

使用**计算属性**来描述依赖响应式状态的复杂逻辑；

**`computed()` 方法期望接收一个 getter 函数，返回值为一个计算属性 ref**。和其他一般的 ref 类似。

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

<p>{
       { calculateBooksMessage() }}</p>

// 组件中
    function calculateBooksMessage() {
      return author.books.length > 0 ? 'Yes' : 'No'
    }

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于**计算属性值会基于其响应式依赖被缓存。**一个计算属性仅会在其响应式依赖更新时才重新计算，所以用 计算属性 的方式比调用函数要好得多。这意味着只要 `author.books` 不改变，无论多少次访问 `publishedBooksMessage` 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，**不要在 getter 中做异步请求或者更改 DOM**！

警告

同时使用 `v-if` 和 `v-for` 是**不推荐的**，因为这样二者的优先级不明显。请查看[风格指南][Link 6]获得更多信息。

## **v-for 列表渲染** ##

在 `v-for` 块中可以完整地访问父作用域内的属性和变量。`v-for` 也支持使用可选的第二个参数表示当前项的位置索引。

const parentMessage = ref('Parent')
    const items = ref([{id:'1', message: 'Foo' }, { id:'2',message: 'Bar' }])

<li v-for="(item, index) in items" :key="item.id">
      {
       { parentMessage }} - {
       { index }} - {
       { item.message }}
    </li>

*  Parent - 0 - Foo
 *  Parent - 1 - Bar

### `v-for` 与对象 ###

你也可以使用 `v-for` 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 `Object.keys()` 的返回值来决定。

const myObject = reactive({
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    })

<ul>
      <li v-for="value in myObject">
        {
       { value }}
      </li>
    </ul>

可以通过提供第二个参数表示属性名 (例如 key)：

<li v-for="(value, key) in myObject">
      {
       { key }}: {
       { value }}
    </li>

第三个参数表示位置索引：

<li v-for="(value, key, index) in myObject">
      {
       { index }}. {
       { key }}: {
       { value }}
    </li>

### `<template>` 上的 `v-for` ###

与模板上的 `v-if` 类似，你也可以在 `<template>` 标签上使用 `v-for` 来渲染一个包含多个元素的块。

推荐在任何可行的时候为 `v-for` 提供一个 `key` attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能

**组件上使用 `v-for` 和在一般的元素上使用没有区别 (别忘记提供一个 `key`):**

但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props：

不自动将 `item` 注入组件的原因是，这会使组件与 `v-for` 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用。

[Link 1]: https://developer.mozilla.org/en-US/docs/Glossary/Truthy
[Link 2]: https://developer.mozilla.org/en-US/docs/Glossary/Falsy
[Link 3]: https://cn.vuejs.org/api/built-in-directives.html
[v-if]: https://cn.vuejs.org/api/built-in-directives.html#v-if
[212d66ebe1e05617f590f48909e98f7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/2347cf3c727748d2b57d8445713f5ea5.png
[reactive]: https://cn.vuejs.org/api/reactivity-core.html#reactive
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects#%E4%BD%BF%E7%94%A8%E9%94%AE%E7%9A%84%E9%9B%86%E5%90%88%E5%AF%B9%E8%B1%A1
[Link 5]: https://developer.mozilla.org/zh-CN/docs/Glossary/Primitive
[ref]: https://cn.vuejs.org/api/reactivity-core.html#ref
[ref 1]: https://cn.vuejs.org/guide/typescript/composition-api.html#typing-ref
[Link 6]: https://cn.vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for