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

Riemann Hypothesis

于 2024-03-10 15:23:04 发布

阅读量907

点赞数 36

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/JingnanJia/article/details/136602769

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Vue.js中的指令，重点讲解了v-bind、v-model、v-for、条件渲染(v-if/v-else/v-show)和事件监听(v-on)。特别提到了v-once指令用于元素一次性渲染，有助于提升性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

theme: vuepress

iShot_2023-12-21_18.33.21.png

一、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 页面：

<!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 变量的值：

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

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

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

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

Dec-22-2023 17-22-54.gif

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

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

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

Dec-22-2023 17-25-26.gif

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

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

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

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

// 创建 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')