计算属性computed

旧城等待， 2022-11-02 00:57 136阅读 0赞

[vue官方文档：计算属性][vue]

计算属性和方法的区别

## 第 1 章：计算属性的基本用法 ##

<template>
      <div class="computed">
        <p>{ {  number }}</p>
        <p>double: { {  double1 }}</p>
        <input type="text" v-model="double2" />
      </div>
    </template>
    
    <script type="text/javascript">
    export default { 
      data () { 
        return { 
          number: 5
        }
      },
      computed: { 
        // 计算属性基本用法
        double1 () { 
          return this.number * 2
        },
        /** * 当计算属性和v-model混合使用，会出现的问题 * 控制台报错：Computed property "double2" was assigned to but it has no setter * 因为计算属性默认只有 getter，不过在需要时你也可以提供一个 setter： */
        double2: { 
          get: function () { 
            return this.number * 2
          },
          set: function (newValue) { 
            this.number = newValue / 2
          }
        }
      }
    }
    </script>

## 第 2 章：计算属性 和 方法的区别 ##

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。

然而，不同的是：

*  当触发重新渲染时，调用方法将**总会**再次执行函数
 *  **计算属性是基于它们的响应式依赖进行缓存的**。只在相关响应式依赖发生改变时它们才会重新求值。

意味着只要 `响应式依赖的数据` 没有发生改变， 计算属性会立即返回之前的计算结果，而不必再次执行函数

[vue]: https://cn.vuejs.org/v2/guide/computed.html

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关计算属性——computed

vuex的state与vue的data都是用户存放数据的地方，如果我们将vuex的数据直接赋值给data然后再页面使用数据，那么vuex的数据发生变化视图不会更新，那么这个时候

r囧r小猫/ 2022年12月21日 03:17/ 0 赞/ 83 阅读

相关 Vue 计算属性 Computed

基础布局 <div id="example"> <p>Original message: "{ { message }}"</p> <p>Co

喜欢ヅ旅行/ 2022年12月05日 10:19/ 0 赞/ 161 阅读

相关 vue计算属性computed

computed属性计算 new Vue({ el:"", data:{ }, methods:{ }, watch:{

谁借莪１个温暖的怀抱￠/ 2022年11月29日 12:15/ 0 赞/ 149 阅读

相关 Vue.js——计算属性(computed)(七)

计算属性什么是计算属性？我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或

野性酷女/ 2022年11月19日 11:28/ 0 赞/ 187 阅读

相关计算属性computed

[vue官方文档：计算属性][vue] 计算属性和方法的区别第 1 章：计算属性的基本用法 <template> <div class="com

旧城等待，/ 2022年11月02日 00:57/ 0 赞/ 137 阅读

相关 vue-计算属性computed

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

深藏阁楼爱情的钟/ 2022年07月12日 14:55/ 0 赞/ 179 阅读

相关深入理解 Vue Computed 计算属性

Computed 计算属性是 Vue 中常用的一个功能，但你理解它是怎么工作的吗？拿官网简单的例子来看一下： <div id="example"> <

电玩女神/ 2022年05月27日 13:27/ 0 赞/ 205 阅读

相关 Vue 框架-04-计算属性 computed

Vue 框架-04-计算属性计算属性是什么？大家可以去看官网解释：[计算属性和侦听器][Link 1] 今天的第一个小实例： ![在这里插入图片描述][201

ゞ浴缸里的玫瑰/ 2022年04月17日 06:05/ 0 赞/ 235 阅读

相关 Vuejs computed get set 计算属性

直接看代码吧 \`\`\` <template> <div id="example"> <!-- 设置计算属性的绑定字段，即reversedMessa

电玩女神/ 2022年02月04日 11:15/ 0 赞/ 249 阅读

相关 vue---computed计算属性的使用

一直以来在使用vue的时候，会对vue的computed属性和watch属性具体的使用分不清楚，总算花点时间整理了下。 computed:通常用于监控自己定义的变量，这个变量

落日映苍穹つ/ 2021年12月16日 07:03/ 0 赞/ 297 阅读