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

一、模板语法

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

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

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

二、基础指令

2.1 概述

• 指令是什么

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

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

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

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

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

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

2.2 基础指令

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

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

  
  
  {{msg}}
  

• v-html 更新元素的 innerHTML

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

  Using text interpolation: {{ rawHtml }}
  Using v-html directive: 
  

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

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

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

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

  
  This will never change: {{msg}}
  
  
    
  comment
    
  {{msg}}
  
  
  
  
  
    
  {{i}}
  
  

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

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

  {{ this will not be compiled }}
  

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

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

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

  ...

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

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

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

  
ID: {{ item.id }} - selected: {{ item.id === selected }}
  
...more child nodes

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

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

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