学习vue3第九节(新加指令 v-pre/v-once/v-memo/v-cloak )

1、v-pre

作用 :防止编译器解析某个特定的元素及其内容,即v-pre 会跳过当前元素以及其子元素的vue语法解析,并将其保持原样输出;

用于:vue 中一些没有指令和插值表达式的节点的元素,使用 v-pre 可以提高 Vue 应用的编译速度,因为它减少了编译器需要处理的内容。
v-pre 通常用于那些不需要处理的静态内容,或者在展示 Vue 代码的文档中,以确保代码不会被执行,而是作为示例显示出来。{``{ person.name }}:只会原样输出,而不是将其解析为: Andy

如下:

csharp 复制代码
<template>
  <div class="cntainer">
      <div>{{ person. name}}</div> // 输出:Andy
      <br>
      <div v-pre>{{ person.name}}</div> // 输出:{{ person.name}}
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
const person = reactive({
  name: 'Andy',
  age: 18,
  sex: ''
})
</script>

如图:

2、v-once

作用被该指令作用的元素或组件,只会被编译解析一次, 如果之后有更新,将会被跳过

注意v-once指令适用于那些在初始化后内容不再改变的静态组件或元素 。如果内容会随着数据的变化而改变,就不应该使用v-once,否则可能导致显示不正确的结果

csharp 复制代码
<template>
    <div>没有使用v-once:{{ person.age }}</div>
    <br>
    <div v-once>使用v-once:{{ person.age }}</div>
    <div>personAge 更新次数{{ person.age - 18}}</div>
    <br>
    <button @click="handleChangeAge">change age</button>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
const person = reactive({
  name: 'Andy',
  age: 18,
  sex: '男'
})
const handleChangeAge = () => {
  person.age = person.age + 1
}
</script>

可以用于提高性能优化

比如:
减少不必要的重新渲染 :在Vue中,当数据发生变化时,相关的组件会重新渲染以反映最新的数据状态。然而,有些情况下组件的内容是不需要随着数据变化而改变的,这时可以用v-once指令避免不必要的重新渲染,减少渲染开销。

提高渲染效率 :重新渲染一个组件需要执行一系列的操作,包括虚拟DOM的比对和更新,以及可能的真实DOM的重新绘制。使用v-once可以避免这些操作,从而提高渲染的效率,特别是在大规模数据变化的情况下。

减少触发其他组件的重新渲染 :Vue.js中的组件之间可能存在父子组件或兄弟组件的关系。当一个组件重新渲染时,其子组件或兄弟组件也可能被重新渲染,即使它们的数据没有发生变化。使用v-once可以阻止这种不必要的重新渲染,减少了整个组件树的渲染开销。

3、v-memo指令

通过对比传入的参数,决定是否需要重新进行渲染;如果数组里的每个值都与最后一次的渲染相同,那么整个子树的更新将被跳过
注意 :需要开发者传入明确的数组,避免错过必要的更新,而导致视图与数据不同步;

传入一个 any[] 类型的数组;

当v-memo="[]"传入的是空数组时候,与v-once的作用一样;
此指令对于性能优化的作用相对要很小,使用需谨慎

4、v-cloak 指令

作用:当网速或者页面渲染慢的时候,页面会出现如: {``{name}} 这种编译模板闪现的情况,不利于用户的体验,我们可以通过给对应的div添加{display:none}来取消这种影响;如下

csharp 复制代码
<template>
  <div v-cloak>{{name}}</div> 
  // 添加v-cloak指令,页面加载时,div元素会隐藏,当页面加载编译完成后,
  // v-cloak指令失效,div元素会显示
</template>
<style lang="scss" scoped>
[v-cloak]{
  display:none;
}
</style>
相关推荐
咔咔学姐kk9 分钟前
大模型微调技术宝典:Transformer架构,从小白到专家
人工智能·深度学习·学习·算法·transformer
Jayyih44 分钟前
嵌入式系统学习Day35(sqlite3数据库)
数据库·学习·sqlite
lingggggaaaa2 小时前
小迪安全v2023学习笔记(八十一讲)—— 框架安全&ThinkPHP&Laravel&Struts2&SpringBoot&CVE复现
笔记·学习·struts·安全·网络安全·laravel
CC数分3 小时前
零基础3个月上岸[特殊字符]自学数据分析路线
学习·数据挖掘·数据分析·大学生·考证
HAH-HAH3 小时前
【蓝桥杯 2024 国 Java A】粉刷匠小蓝
c++·学习·数学·算法·职场和发展·蓝桥杯·组合数学
酷讯网络_2408701603 小时前
多语言共享贩卖机投资理财共享售卖机投资理财系统
学习·开源
番薯大佬4 小时前
Python学习-day8 元组tuple
java·python·学习
wanzhong23334 小时前
ArcGIS学习-17 实战-密度分析
学习·arcgis
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
yuxb736 小时前
Docker 学习笔记(七):Docker Swarm 服务管理与 Containerd 实践
笔记·学习·docker