1.3计算属性computed

 

computed必须是纯函数

 

纯函数：固定的输入得到固定的输出

 

 

扩展：

函数柯里化：函数返回函数

    {{ name.substring(0,1).toUpperCase()+name.substring(1)}}

 

 

 

---

 

计算属性computed：

    {{ changeword }}

 

 

 

 

与methods的区别：

在标签里多次调用menthods方法，console.log执行多次；

而在标签里多次调用computed属性，console.log执行一次，调用缓存结果，

所以：

- 计算属性是基于他们的依赖进行缓存的，（存在js对象里）

- 计算属性只有在他的相关依赖发生改变时才会重新求值

举个例子：

method：

 ADD TO A
 ADD TO B
 
A-{{a}}
 
B-{{b}}
 
age + a = {{addToA()}}
 
age + b = {{addToB()}}

data() {
    return {
      a: 0,
      b: 0,
      age: 20,
  }
}

methods: {
    addToA() {
      console.log("ADD TO A");
      return this.a + this.age;
    },
    addToB() {
      console.log("ADD TO B");
      return this.b + this.age;
    },
}

点击A按钮，打印出AB，点击B按钮打印AB,console.log多次执行。

每点击一次都渲染DOM，是非常耗费性能的。

 

computed：

 ADD TO A
 ADD TO B
 
A-{{a}}
 
B-{{b}}
 
age + a = {{addToA}}
 
age + b = {{addToB}}

data() {
    return {
      a: 0,
      b: 0,
      age: 20
 }
},
  computed: {
    addToA() {
      console.log("ADD TO A");
      return this.a + this.age;
    },
    addToB() {
      console.log("ADD TO B");
      return this.b + this.age;
    }
  },

点击A按钮，打印出A，点击B打印出B,console.log()只执行一次。

使用的是虚拟DOM,把真是的DOM拷贝一份，操作的是虚拟DOM,虚拟DOM跟真实DOM不同时才会触发这个方法，如果相同就不会触发这个方法，耗时，大量搜索时才用计算属性。

 

---

 

 

v-model: 双向数据绑定  常用于表单元素

watch:监听

   

单价：  v-model="price"/>

    

数量：

        

总额：{{sum}}

 

 

          

 

//计算属性：

   

单价：  v-model="price"/>

    

数量：

        

总额：{{getsum}}

 

 

 

与watch区别：

watch:只能监测data属性中的单个变量的改变，代码冗余

computed:自动检测依赖，代码更精简

 

 

---

 

 

计算属性 set

 

给计算属性赋值 （意义不大）

 

 

 

 

 

 

不建议这么做，代码难以控制