Vue官方文档学习笔记

Jay_yC

已于 2023-03-02 10:58:58 修改

阅读量35

点赞数

文章标签：学习 vue.js Powered by 金山文档

于 2023-03-01 10:45:09 首次发布

本文链接：https://blog.csdn.net/Jay_yC/article/details/129276557

版权

文章探讨了Vue.js中计算属性的工作原理，强调它们只在响应式依赖变更时重新计算，并警告不要在getter中执行异步操作或修改DOM。同时，对比了v-if和v-show在条件渲染时的性能差异，以及它们与v-for共用时的处理策略。文章还提供了一个解决v-if与v-for冲突的示例。

摘要由CSDN通过智能技术生成

原文链接

计算属性

仅会在其响应式依赖（date中的属性）更新时才重新计算。只要响应式依赖不改变，无论多少次访问该计算属性都会立即返回先前缓存的计算结果，而不用重复执行 getter 函数（计算属性内的方法会在vue的实例对象上。通过实例对象的setter与getter，获得与更改_data的数据。）。

不要在 getter 中做异步请求或者更改 DOM！ getter 的职责应该仅为计算和返回该值。

计算属性的返回值为只读的，并且无法更改，只有更新它所依赖的源状态以触发新的计算才会变化。

条件渲染

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if优先级更高，此时v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

<!--
在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题
-->
<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>