【Vue3 知识第三讲】模板语法、Vue3指令

一、模板语法

插值表达式 {{ data }} 可以用于渲染 Vue 中提供的数据。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

<script setup>
    import {ref} from "vue"
    const message = ref("Hello Vue3!!")
    const num = ref(10)
</script>
<template>
  <div class="message">{{message}} ~ {{num + 10}}</div>
  <div>{{ ok ? 'YES' : 'NO' }}</div>
  <div>{{ message.split('').reverse().join('') }}</div>
</template>
<style lang="scss" scoped>
.message {
  color: red;
  font-weight: bold;
  font-family: "楷体","MicroSoft Yahei";
}
</style>

注：vue中的插值提供了真正的js环境，因此我们可以直接使用 JS 表达式

二、基础指令

2.1 概述

• 指令是什么

  指令就是一个自定义属性，Vue中的指令都是以 v- 开头

• {{}} 插值表达式渲染页面闪烁问题

  代码加载的时候先加载 HTML 把插值语法当做 HTML 内容加载到页面上 当加载完 js 后才把插值语法替换掉 所以我们会看到闪烁问题

• v-cloak 指令解决插值语法的闪烁问题

  原理：先隐藏，替换好值之后再显示最终的值

  //CSS中提供样式设置
  [v-cloak] {
  	display: none;
  }
  
  //在插值表达式标签中添加v-cloak指令
  <div id="app" v-cloak>{{ title }} === {{ num + 10 }}</div>
  

2.2 基础指令

• v-text 更新元素的文本内容

  v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果想要替换指定的部分内容，请使用插值表达式（mustache interpolations）代替。

  <span v-text="msg"></span>
  <!-- 等同于 -->
  <span>{{msg}}</span>
  

• v-html 更新元素的 innerHTML

  v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。

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

  在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。

• v-once 仅渲染元素和组件一次，并跳过之后的更新

  执行一次性的插值（当数据改变时，插值处的内容不会继续更新）

  应用场景：显示的信息后续不需要再修改，可以使用 v-once 指令来提高性能

  <!-- 单个元素 -->
  <span v-once>This will never change: {{msg}}</span>
  <!-- 带有子元素的元素 -->
  <div v-once>
    <h1>comment</h1>
    <p>{{msg}}</p>
  </div>
  <!-- 组件 -->
  <MyComponent v-once :comment="msg" />
  <!-- `v-for` 指令 -->
  <ul>
    <li v-for="i in list" v-once>{{i}}</li>
  </ul>
  

• v-pre 跳过该元素及其所有子元素的编译

  元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。

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

- v-memo 期望的绑定值类型（了解）

Vue3.2版本新增指令。期望的绑定值类型：any[]

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

<div v-memo="[valueA, valueB]">
  ...
</div>

当组件重新渲染，如果 valueA 和 valueB 都保持不变，这个 `` 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。

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

**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 nodes</p>
</div>

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

当搭配 v-for 使用 v-memo，确保两者都绑定在同一个元素上。v-memo 不能用在 v-for 内部。

v-memo 也能被用于在一些默认优化失败的边际情况下，手动避免子组件出现不需要的更新。但是一样的，开发者需要负责指定正确的依赖数组以免跳过必要的更新。

<script setup>
	const arr = [1,2,3]
</script>
<template>
	// 这里 v-memo 条件成立的话跳过更新
	<div v-for="item in arr" v-memo="[item == 2]"></div>
</template>