computed的使用

最新推荐文章于 2024-08-22 12:04:52 发布

做个有准备的人

最新推荐文章于 2024-08-22 12:04:52 发布

阅读量2.9k

点赞数

分类专栏：前端埋坑之路-前端技术

本文链接：https://blog.csdn.net/u011565547/article/details/104882176

版权

前端埋坑之路-前端技术专栏收录该内容

357 篇文章 15 订阅 ¥9.90 ¥99.90

订阅专栏

超级会员免费看

本文探讨了Vue.js中的computed属性，它用于处理复杂逻辑并基于依赖缓存。当依赖变化时，computed会自动更新。相比methods，computed在性能上有优势，适合不需要重复计算的情况。文中通过翻转字符串的实例比较了computed和methods的差异，并详细解释了set()的用途，强调了其与get()的配合使用，以及computed依赖缓存的重要性。

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

使用计算处理相关数据

如可以是data里申明的数据；可以是其他页面 $emit('的数据'); 还可是自身申明的变量数据

1、vue.js的computed方法：
处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值。用methods也可以实现同样的效果，但methods在重新渲染的时候会重新调用执行，在性能上computed优于methods,当不需要缓存时可用methods。

实例1：computed和methods实现翻转字符串

<template>
  <div>
    <input v-model="message">
    <p>原始字符串: {
  { message }}</p>
    <p>计算后反转字符串: {
  { reversedMessage }}</p>
    <p>使用方法后反转字符串: {
  { reversedMessage2() }}</p>
  </div>
</template>