vue基础学习笔记 --- 计算属性、计算属性与函数之间的区别、watch监听器

计算属性和函数的区别

函数不会缓存数据，在每次访问都要重新求值（如果数据经常发生变化，推荐使用函数）
计算属性会缓存数据，只要数据没有发生变化，就不会重新求值（如果数据不经常变化，推荐使用计算属性）

计算属性 - computed计算属性

什么是计算属性？
computed定义计算属性，计算属性类似于methods里面定义的函数；
首先computed计算属性是用于在HTML模板中表达式更加简洁，易维护。
computed具有缓存功能，当与computed变量相关的变量值不发生改变时，一直用的是缓存中的值，只有当依赖变量值发生改变时，computed计算属性值才会发生更改
computed变量不在data中定义，而是在computed对象中定义

格式： 在和data、methods同级的地方写 computed:{
处理完的数据变量(){
return 你的操纵数据的逻辑
}
}

watch监听器

• watch监听属性监听的是data中已经存在的变量，只有当变量值当属性数据发生变化的时候，对应属性的回调函数会自动调用，在函数内部进行计算
• 通过watch选项或者vm实例的$watch()来监听指定的属性
  当需要在数据变化时执行异步或开销较大的操作时，这时watch是非常有用的
• watch只能监听简单数据类型，当监听对象、数组等复杂数据类型时，其中的元素值改变也不会触发watch中监听对象的方法。
  但是可以采用深度监听来监听对象的变化，设置deep: true，就可以解决特点3的问题来监听某个对象的属性，但是当对象嵌套的属性太深时开销太大。

示例：已知一位同学的数学成绩和英语成绩，求总成绩,

    <div id="app">
   	   
        数学：<input type="text" v-model="mathScore">    
        英语：<input type="text" v-model="englishScore">
        <br>
        总得分（函数）：