菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue 教程

Vue 首页 Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue 为什么、如何及设置 Vue 第一个 SFC 页面 Vue 组件 Vue Props Vue v-for 组件 Vue $emit() Vue 穿透属性 Vue 作用域样式 Vue 局部组件 Vue 插槽 Vue v-slot Vue 作用域插槽 Vue 动态组件 Vue Teleport Vue HTTP 请求 Vue 模板引用 Vue 生命周期钩子 Vue Provide/Inject Vue 路由 Vue 表单输入 Vue 动画 Vue v-for 动画 Vue 构建 Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue v-memo 指令


示例

使用 v-memo 指令仅在 updateProp 属性值更改时才重新渲染。

<div 
  v-for="x in circle" 
  :style="{ backgroundColor: x.color }" 
  v-memo="[updateProp]"
></div>
运行示例 »

定义和用法

v-memo 指令用于优化 Vue 中的性能。

为了优化性能,v-memo 与一个属性数组一起使用,并且 v-memo 将阻止元素的重新渲染,以及任何子元素的重新渲染,直到这些属性之一发生更改。

只有在极少数情况下,例如使用 v-for 创建的大列表时,使用 v-memo 优化性能才有意义。

如果提供给 v-memo 的数组为空,像这样:v-memo="[]",您将获得与 v-once 相同的功能。


相关页面

Vue 教程: Vue v-for 指令

Vue 教程:Vue v-bind 指令

Vue 教程:Vue CSS 绑定

Vue 参考:Vue v-for 指令

Vue 参考:Vue v-once 指令

JavaScript 参考:Window setTimeout()


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持