Vue基础知识2-计算属性

一.什么是计算属性

计算属性是写在computed对象中的属性，本质上是一个方法，不过使用时仍然当属性来使用

二.为什么需要计算属性

1.为什么不使用插值表达式

使用插值表达式虽然可以填入简单运算，但是当表达式变得复杂，或运算结果需要复用多次的时候，使代码的可读性变差

2.为什么要使用计算属性

计算属性是基于缓存实现的，只在计算属性所依赖的数据发生改变时它们才会重新求值，否则访问 计算属性会立即返回之前的计算结果，而不必再次执行函数。

3 .计算属性与method的区别

• 既然计算属性computed都叫属性了，那么他就是可以当作属性来使用，可以修改;而method是当作方法来使用，它也可以获取值，只不过是return返回值
• computed有getter和setter进行赋值.而method不行
• 计算属性不能传值，虽然你在定义的时候看上去是方法computed(){},但是他不能像方法那样可以进行传递参数
• computed如果数据不变是可以进行缓存的，而method方法不行，只要是在页面中使用了方法，那么使用几次就会调用方法几次，而computed不会

三.计算属性的使用

1.计算属性的默认使用方法

<template>
<div>
	<p>{{ num }}</p>
</div>
</template>
<script>
export default {
data(){
  return{
    a:30,
    b:10,
}，
computed:{
  num(){
    return this.a + this.b
  }
}
</script>

这里相当于只调用了计算属性默认的get()方法，可以省略不写，当需要调用set()方法时，需要写完整写法

2.计算属性的完整使用方法

计算属性内包含两个方法 get() 和 set()

• get()什么时候被调用？当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
• set()什么时候被调用？当计算属性被修改时被调用

<input type="text" v-model="full">

computed:{
full:{
    //当在输入框中改变输入结果时触发set()方法
    set(val){
      console.log(val);
    },
    //第一次渲染时调用get()，输出a+b的值，当a或b改变时再次调用该方法
    get(){
      return this.a + this.b
    }
  }
}