自学前端开发 - VUE 框架 (三) 常用的标签指令 、组件选项、API

@[TOC](自学前端开发 - VUE 框架 (三) 常用的标签指令 、选项式API、组合式API)

vue 常用的标签指令

指令其实就是标签的一个属性，它由 v- 作为前缀，表明是一个由 vue 提供的特殊属性。它们将为渲染的 DOM 应用特殊的响应式行为。

v-html

v-html 指令的意思是，在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。

<p>Using text interpolation: {{ rawHtml }}p>
<p>Using v-html directive: <span v-html="rawHtml">span>p>
1
2

span 的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。注意，不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。

v-text

v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。相当于文本插值。

<span v-text="msg">span>

<span>{{msg}}span>
1
2
3

v-bind

v-bind 指令会绑定一个或若干属性到元素对象上：

<div v-bind:id="dynamicId">div>
1

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

也可以简写为

<div :id="dynamicId">div>
1

对于 v-bind 指令绑定的属性，如果是布尔型属性，例如 disabled、hidden 等，可以这样使用：

<button :disabled="isButtonDisabled">Buttonbutton>
1

当 isButtonDisabled 为真值或一个空字符串 (即 ) 时，元素会包含这个 disabled 属性。而当其为其他假值时属性将被忽略。

如果 v-bind 指令不带参数，则会绑定其包含的多个属性到元素对象上：

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}
1
2
3
4
5
6
7
8

<div v-bind="objectOfAttrs">div>
1

可以使用的修饰符有：

• .camel ——将短横线命名的属性转变为驼峰式命名。
• .prop ——强制绑定为 DOM 成员。
• .attr ——强制绑定为 DOM 属性。

参考示例：

<img v-bind:src="imageSrc" />


<button v-bind:[key]="value">button>


<img :src="imageSrc" />


<button :[key]="value">button>


<img :src="'/path/to/images/' + fileName" />


<div :class="{ red: isRed }">div>
<div :class="[classA, classB]">div>
<div :class="[classA, { classB: isB, classC: isC }]">div>


<div :style="{ fontSize: size + 'px' }">div>
<div :style="[styleObjectA, styleObjectB]">div>


<div v-bind="{ id: someProp, 'other-attr': otherProp }">div>


<MyComponent :prop="someThing" />


<MyComponent v-bind="$props" />


<svg><a :xlink:special="foo">a>svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

v-on

v-on 指令会监听一个 DOM 事件，参数就是需要监听的事件。当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。

当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的 $event 变量：v-on:click="handle('ok', $event)"。

<button v-on:click="doThis">button>


<button v-on:[event]="doThis">button>


<button v-on:click="doThat('hello', $event)">button>


<button @click="doThis">button>


<button @[event]="doThis">button>


<button @click.stop="doThis">button>


<button @click.prevent="doThis">button>


<form @submit.prevent>form>


<button @click.stop.prevent="doThis">button>


<input @keyup.enter="onEnter" />


<button v-on:click.once="doThis">button>


<button v-on="{ mousedown: doThis, mouseup: doThat }">button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

可以使用的修饰符：

• .stop ——调用 event.stopPropagation()。
• .prevent ——调用 event.preventDefault()。
• .capture ——在捕获模式添加事件监听器。
• .self ——只有事件从元素本身发出才触发处理函数。
• .{keyAlias} ——只在某些按键下触发处理函数。
• .once ——最多触发一次处理函数。
• .left ——只在鼠标左键事件触发处理函数。
• .right ——只在鼠标右键事件触发处理函数。
• .middle ——只在鼠标中键事件触发处理函数。
• .passive ——通过 { passive: true } 附加一个 DOM 事件。

v-model

v-model 指令会将表单元素的 value 属性双向绑定到数据模型中，例如当用户修改了元素对象的值，数据模型的值也同时被修改

<div id="app">
    <p>{{ num }}p>
    <input type="text" v-model="num">
div>

<script>
    const {createApp} = Vue
    let vm = Vue.createApp({
        data() {
            return {
                num: 0
            }
        },
        mounted() {
            setInterval(() => {
                this.num++;
            }, 1000)
        }
    }).mount('#app')
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

可以使用修饰符

• .lazy ——监听 change 事件而不是 input
• .number ——将输入的合法符串转为数字
• .trim ——移除输入内容两端空格

v-pre

跳过该元素及其所有子元素的编译，会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

<span v-pre>{{ this will not be compiled }}span>
1

v-once

仅渲染元素和组件一次，并跳过之后的更新。在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

<span v-once>This will never change: {{msg}}span>

<div v-once>
  <h1>commenth1>
  <p>{{msg}}p>
div>

<MyComponent v-once :comment="msg" />

<ul>
  <li v-for="i in list" v-once>{{i}}li>
ul>
1
2
3
4
5
6
7
8
9
10
11
12
13

v-memo

缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：

<div v-memo="[valueA, valueB]">
  ...
div>
1
2
3

当组件重新渲染，如果 valueA 和 valueB 都保持不变，这个

及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。

正确指定缓存数组很重要，否则应该生效的更新可能被跳过。v-memo 传入空依赖数组 (v-memo="[]") 将与 v-once 效果相同。

v-memo 与 v-for 一起使用

v-memo 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 v-for 列表 (长度超过 1000 的情况)：

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}p>
  <p>...more child nodesp>
div>
1
2
3
4

当组件的 selected 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。v-memo 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 item.id，因为 Vue 也会根据 item 的 :key 进行判断。需注意的是，当搭配 v-for 使用 v-memo，确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。

vue 常用的选项式API选项

状态选项

data

data 选项是 vue 默认的数据模型(model)，它会接收一个函数返回的数据对象，并将其在模板中渲染出来。

<div id="app">
	<p>{{ message }}p>
div>
<script>
	let vm = Vue.createApp({
		data() {
			return {
				message: 'Hello Vue!'
			}
		}
	}).mount('#app')
script>
1
2
3
4
5
6
7
8
9
10
11
12

可以通过修改其数据来更新页面渲染。

vm.$data.message = 'Hello World!'
1

data 中声明的所有数据会被 vm 对象进行遍历，并赋值给 vm 对象作为其属性。所以也可以这样来修改数据：

vm.message = 'Hello World!'
1

computed

computed 选项(计算属性)是一个对象，对象中的属性则是一个 getter 方法，用来描述依赖响应式状态的复杂逻辑。computed 选项生命的属性(getter 方法)在应用实例化时，也会像 data 声明的属性一样成为应用的属性。

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<p>Has published books:p>

<span>{{ publishedBooksMessage }}span>
1
2
3

计算属性是只读的，如果尝试写则会收到一个运行时警告。如果确实需要进行写入操作，则需要同时提供 getter 和 setter 来创建

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 注意：这里使用的是解构赋值语法
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

methods

methods 是方法选项，和 computed 组件类似的是，它也是一个对象，对象中的每个属性都是一个方法，可以在模板中被调用。

两者不同之处在于计算属性值会基于其响应式依赖被缓存，即计算属性仅会在其响应式依赖更新时才重新计算。而方法组件在每次调用时都会重新进行计算。

// 计算属性永远不会更新，因为 Date.now() 不是响应式依赖。所以应该使用方法组件。
computed: {
  now() {
    return Date.now()
  }
}
1
2
3
4
5
6

Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。这确保了方法在作为事件监听器或回调函数时始终保持正确的 this。你不应该在定义 methods 时使用箭头函数，因为箭头函数没有自己的 this 上下文。

watch

watch 选项用于声明在数据更改时调用的侦听回调。watch 选项期望接受一个方法或对象：如果是方法，则方法名为组件的示例属性名，方法参数包含旧值和新值，方法内容为回调函数。如果是对象，则其中的键是需要侦听的响应式组件实例属性 (例如，通过 data 或 computed 声明的属性)，而值是相应的回调函数。该回调函数接受被侦听源的新值和旧值。

除了一个根级属性，键名也可以是一个简单的由点分隔的路径，例如 a.b.c。注意，这种用法不支持复杂表达式——仅支持由点分隔的路径。如果你需要侦听复杂的数据源，可以使用命令式的 $watch() API。

值也可以是一个方法名称的字符串 (通过 methods 声明)，或包含额外选项的对象。当使用对象语法时，回调函数应被声明在 handler 中。额外的选项包含：

• immediate：在侦听器创建时立即触发回调。第一次调用时，旧值将为 undefined。
• deep：如果源是对象或数组，则强制深度遍历源，以便在深度变更时触发回调。
• flush：调整回调的刷新时机，例如 ‘post’ 会在 DOM 更新后进行回调(默认在 DOM 更新前进行回调)
• onTrack / onTrigger：调试侦听器的依赖关系。

声明侦听器回调时避免使用箭头函数，因为它们将无法通过 this 访问组件实例。

export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    }
  },
  watch: {
    // 侦听根级属性
    a(val, oldVal) {
      console.log(`new: ${val}, old: ${oldVal}`)
    },
    // 字符串方法名称
    b: 'someMethod',
    // 该回调将会在被侦听的对象的属性改变时调动，无论其被嵌套多深
    c: {
      handler(val, oldVal) {
        console.log('c changed')
      },
      deep: true
    },
    // 侦听单个嵌套属性：
    'c.d': function (val, oldVal) {
      // do something
    },
    // 该回调将会在侦听开始之后立即调用
    e: {
      handler(val, oldVal) {
        console.log('e changed')
      },
      immediate: true
    },
    // 你可以传入回调数组，它们将会被逐一调用
    f: [
      'handle1',
      function handle2(val, oldVal) {
        console.log('handle2 triggered')
      },
      {
        handler: function handle3(val, oldVal) {
          console.log('handle3 triggered')
        }
        /* ... */
      }
    ]
  },
  methods: {
    someMethod() {
      console.log('b changed')
    },
    handle1() {
      console.log('handle 1 triggered')
    }
  },
  created() {
    this.a = 3 // => new: 3, old: 1
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

生命周期选项（钩子）

created

created 选项在组件实例处理完所有与状态相关的选项后调用。

当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

mounted

mounted 选项接收一个函数，会在组件被挂载之后调用。

<div id='app'>
	<p>count = {{ count }}p>
<div>
<script>
	let vm = Vue.createApp({
		data() {return{
			count: 0
		}},
		mounted() {
			setInterval(()=>{
				this.count++;
				// 在 vm 外部，可以使用 vm.$data.count 改变绑定的数据
				// 也可以使用 vm.count 来改变绑定的数据
			},1000)
		}
	}).mount('#app')
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

updated

updated 选项接收一个函数，在组件因为一个响应式状态变更而更新其 DOM 树之后调用。父组件的更新钩子将在其子组件的更新钩子之后调用。这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果需要在某个特定的状态更改后访问更新后的 DOM，可以使用 nextTick() 作为替代。注：这个钩子在服务端渲染时不会被调用。

unmounted

unmounted 选项接收一个函数，在组件实例被卸载之后调用。一个组件在以下情况下被视为已卸载：

• 其所有子组件都已经被卸载。
• 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。这个钩子在服务端渲染时不会被调用。

vue 常用的组合式API函数

setup

setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

• 需要在非单文件组件中使用组合式 API 时。
• 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
  其他情况下，都应优先使用