Vue3.x 全家桶 | 09 - Vue 的指令 : v-once

一、Vue 的指令

在 Vue 中，指令（Directives）也是模板语法的一部分，指令是一种特殊的 token，它带有 v- 前缀，用于为模板提供额外的功能。指令的作用是通过一种声明式的方式将数据与 DOM 元素的行为进行绑定。

在前面的文章中我们也使用到了几个 v- 指令，比如 v-for 和 v-on 等；Vue 提供了许多内置的指令，每个指令都有特定的功能，常用的指令包括了；

v-bind： 用于动态地绑定一个或多个 HTML 特性，或者一个组件 prop 到表达式。
v-model： 用于在表单元素上创建双向数据绑定，将表单元素的值与 Vue 实例的数据属性进行关联。
v-for： 用于渲染一个列表，根据数组或对象的值重复渲染一个元素或组件。
v-if、v-else-if、v-else： 用于条件性地渲染一块内容，根据表达式的值来选择是否渲染。
v-show： 与 v-if 类似，也用于根据条件显示或隐藏元素，但不会重新销毁或重建元素。
v-on： 用于监听 DOM 事件，触发相应的方法。
v-cloak： 用于防止页面加载时闪烁出未编译的 Mustache 标签，通常与 CSS 结合使用。

这只是 Vue 内置指令的一部分，Vue 还提供了更多的指令用于实现各种功能。除了内置指令，你还可以创建自定义指令以满足特定需求。指令是 Vue 中实现动态数据绑定和交互的关键工具之一。

二、Vue 的 v-once 指令

与插值语法不同的是 Vue 中的指令都是作用在元素的属性上面的，v-once 指令用于标记一个元素或组件，使其只渲染一次。一旦被渲染，v-once 指令所在的元素及其子元素将不再响应数据的变化，也不会重新执行组件的生命周期钩子函数。

使用 v-once 的主要场景是在一些静态内容上，这样可以避免不必要的重新渲染，提高性能。

创建一个 HTML 页面：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    // 创建 app
    const app = Vue.createApp({
      data: function(){
        return {
          message: 'Hello Vue'
        }
      }
    })

    // 挂载 app
    app.mount('#app')
  </script>
</body>
</html>

在 div#app 下添加一个按钮，同时添加点击事件来修改 message 变量的值：

html 复制代码

<button v-on:click="changeValue">Edit</button>

增加 methods 选项并在实现 changeValue 方法，在该方法中修改 message 的值；

js 复制代码

methods: {
    changeValue(){
      this.message = "Hello Tesla"
      console.log(this.message)
    }
},

使用 LiverServer 打开 HTML 页面，点击 Edit 按钮修改 message 的值：

可以修改成功，如果在元素的属性位置加上 v-once 指令之后：

html 复制代码

<h2 v-once>{{message}}</h2>

刷新 HTML 页面，再次点击 Edit 按钮：

可以看到控制输出的内容，修改成功了，但是并没有渲染成功，也就是只渲染了一次。

在 h2 元素中增加一个 i 子元素，该子元素中渲染 volume 变量：

html 复制代码

<div id="app">
  <h2 v-once>
    {{ message }}
    <i>{{ volume }}</i>
  </h2>
  <button v-on:click="changeValue">Edit</button>
</div>

在 data 选项中返回 volume 属性，并在 methods 选项的 changeValue 方法中修改 volume 的值：

js 复制代码

// 创建 app
const app = Vue.createApp({
  data: function(){
    return {
      message: 'Hello Vue',
      volume: 1000
    }
  },
  methods: {
    changeValue(){
      this.message = "Hello Tesla"
      this.volume = 2000
      console.log(this.message)
      console.log(this.volume)
    }
  },
})

// 挂载 app
app.mount('#app')

刷新 HTML 页面，点击 Edit 按钮：

可以看到两个变量都修改成功了，但是都没有渲染成功。

v-once 只影响元素及其子元素的渲染，不影响组件实例内部的数据和逻辑。如果组件内部有需要只执行一次的逻辑，可以在组件的生命周期钩子函数中处理。