vue3.x学习笔记之Mustache语法

• vue 语法

• vue 不常用和新增的语法

• v-pre 显示原始的Mustache标签
• v-cloak — 遮盖
• v-memo（新增）– 缓存指定值

• Vue3 新特性和命令

• setup 函数：
• Composition API：

• ref:
• reactive:
• watch:
• computed:
• toRefs:
• 生命周期钩子函数：

• Teleport 组件：
• Fragment（片段支持）：
• Suspense 组件：
• v-model 的改进：
• v-memo 指令（Vue 3.2+）：
• 新的指令语法：
• Script Setup 语法糖：

• 扩展：Mustache — 语法

• Mustache 模板语法的基本元素：

• 变量输出：
• 段落（Sections）：
• 真值判断：
• Inverted Sections：
• lambdas 函数：
• Partials：

vue 语法

<!-- 1.基本使用 -->
<h2>{{ message }}</h2>
<h2>当前计数: {{ counter }} </h2>

<!-- 2.表达式 -->
<h2>计数双倍: {{ counter * 2 }}</h2>
<h2>展示的信息: {{ info.split(" ") }}</h2>

<!-- 3.三元运算符 -->
<h2>{{ age >= 18? "成年人": "未成年人" }}</h2>

<!-- 4.调用methods中函数 -->
<h2>{{ formatDate(time) }}</h2>

<!-- 5.注意: 这里不能定义语句 -->
<!-- <h2>{{ const name = "abc" }}</h2> -->

• 大胡子语法中可以使用js表达式，但只限于Vue实例作用域和Vue沙盒白名单，白名单规定了一些全局变量例如Math和Date。

'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'

• 表达式一些基本表达式，和一些三元运算例{{num + 1}}、{{status ? 'succeed' : 'failed'}} 、{{changeTime()}}、{value.replace(/,/g,"")}
• 不支持流控制例如: {{ if (ok) { return message } }}

vue 不常用和新增的语法

v-pre 显示原始的Mustache标签

v-pre 用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签

作用：跳过这个元素和它的子元素的编译过程。

使用场景：当需要显示原始的 Mustache 标签（即不解析它们）时。

<div v-pre>
  <h2>{{ message }}</h2>
  <p>当前计数: {{ counter }}</p>
  <p>{{}}</p>
</div>

v-cloak — 遮盖

作用：

• 这个指令保持在元素上直到关联的 Vue 实例结束编译。
• 可以配合 CSS 规则来隐藏未编译的 Vue 模板相关的闪烁问题。

<div v-cloak style="display:none">
  {{ message }}
</div>

v-memo（新增）– 缓存指定值

Vue.js 3.2 版本引入了一个新的优化指令 v-memo，它的 主要目的是提高性能，特别是在大规模列表渲染时。

v-memo 指令可以 缓存模板子树的渲染结果，并根据一组依赖值的变化来决定是否重新渲染该子树。

用法：

<template>
  <div v-memo="[key1, key2]">
    <!-- 这里是复杂的 DOM 结构 -->
  </div>
</template>

在这个例子中，v-memo 接收一个数组作为参数，这个数组包含了当前组件或元素需要关注的依赖状态。

只有当这些依赖值发生变化时，v-memo 包含的整个 DOM 子树才会被重新渲染。

如果数组中的所有值与上一次渲染时保持一致，则会跳过子树的更新过程，从而减少不必要的DOM操作和提升性能。

另外，v-memo 也可以接收一个表达式：

<template>
  <div v-memo="myValue !== oldValue">
    <!-- 这里是基于 myValue 和 oldValue 的比较结果来决定是否渲染 -->
  </div>
</template>

注意事项：

• 如果传入的是一个空数组 []，那么 v-memo 的行为类似于 v-once，即只渲染该部分组件一次。
• 在配合 v-for 使用时，通常会在循环外部包裹一层带有 v-memo 的元素，以确保在大量数据变动时只重绘有实际变化的部分。

通过合理使用 v-memo，开发者可以更精确地控制组件的更新策略，这对于大数据量场景下的列表性能优化非常有用。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

Vue3 新特性和命令

Vue3 相对于 Vue2 引入了许多新特性和命令，以下是一些主要的新增功能和命令：

`setup()` 函数：

setup() 是 Vue3 中的一个新钩子函数，它替代了 Vue2 中的部分 data、computed 和 methods 的职责。

在 setup() 中可以定义响应式状态（使用 ref 或 reactive）以及计算属性，并且可以直接返回渲染上下文所需的属性或方法。

Composition API：

作为 setup() 函数的核心，Composition API 提供了一系列新的API，如：

`ref()`:

创建一个响应式的引用，用于包装基本数据类型。

`reactive()`:

用于创建一个响应式的对象。

`watch()`:

观察并处理响应式数据的变化。

`computed()`:

定义计算属性。

`toRefs()`:

将响应式对象转换为可解构的对象，方便组件之间共享多个响应式属性。

生命周期钩子函数：

onMounted(), onUnmounted(), onUpdated(), onBeforeUpdate() 等。

Teleport 组件：

<teleport> 允许你将元素渲染到DOM树中的任意其他位置，例如从模态框组件中将内容移到文档底部。

Fragment（片段支持）：

Vue3 支持模板中的多个根元素，不再强制要求每个组件只有一个顶级元素。

Suspense 组件：

• 用于异步加载组件时显示加载指示器或者占位内容。

v-model 的改进：

• 更灵活的 v-model 语法，支持自定义组件的双向绑定。

`v-memo` 指令（Vue 3.2+）：

• 如前所述，用于优化列表渲染性能，当依赖值不变时避免不必要的子组件重渲染。

新的指令语法：

Vue3 改进了指令的语法，允许在指令参数中直接写表达式，例如：v-bind:title="message" 可以简写为 :title="message"。

Script Setup 语法糖：

在 <script> 标签内使用 setup 语法糖，简化 Composition API 的编写。

这些变化使得 Vue3 更加灵活、高效，并提供了更强大的状态管理能力。

扩展：Mustache — 语法

Mustache 是一个逻辑性较弱（logic-less）的模板语言，它简单、易于理解且不引入新的编程语法。

其设计初衷是使模板与数据分离，提高代码可读性和维护性。

Mustache 语法可以用于多种编程语言环境，因为它是一种规范而非特定实现，并且有许多不同的库支持 Mustache 语法，包括 JavaScript、Java、.NET 等。

Mustache 模板语法的基本元素：

变量输出：

• 使用双大括号 {{}} 输出变量内容。

{{key}}

• 当模板渲染时，{{key}} 将被替换为与 key 匹配的数据对象中的相应值。

段落（Sections）：

• 开始标签 {{#key}} 和结束标签 {{/key}} 用来表示条件区块或迭代数组。

{{#items}}
  <li>{{name}}</li>
{{/items}}

• 如果 key 对应的数据是一个对象或非空数组，则该区块内的内容会被多次渲染，每次迭代对应数组的一个元素或对象的一个属性。

真值判断：

• 在段落标签中，如果 key 对应的值为假值（null, undefined, false），则整个区块不会被渲染。

Inverted Sections：

• 用以处理否定逻辑，当 key 的值为假值时，块内内容将被渲染。

 {{^key}}
   This will be displayed if key is falsy.
 {{/key}}

lambdas (函数)：

• Mustache 允许传递可调用的对象作为上下文的一部分，这些对象在渲染时会被调用，并插入返回的结果。

{{#lambda}}
  {{.}}
{{/lambda}}

Partials：

• 部分视图，允许你包含其他模板文件或子模板。

{{>partial_name}}

Mustache 模板遵循严格的“无逻辑”原则，意味着它不支持条件语句（如 if、else）或循环控制结构（如 for 循环）。

所有的条件和循环都是通过上下文数据结构和键的存在与否来隐式表达的。

原文始发于微信公众号（前端爱好者）：vue3.x学习笔记之Mustache语法

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267282.html