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>
        总得分（函数）：<input type="text" v-model="sumScore()">
        <br>
        总得分（计算属性 单向）：<input type="text" v-model="sumScore1">
        <br>
        总得分（计算属性 双向）：<input type="text" v-model="sumScore2">
        <br>
        总得分（侦听器）：<input type="text" v-model="sumScore3">

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
		 let vm = new Vue({
            el: "#app",
            data: {
                mathScore: 80,
                englishScore: 90,
                sumScore3: 0
            },
            //方法
            methods: {
                sumScore() {
                    return (this.mathScore - 0) + (this.englishScore - 0)
                }
            },
            //计算属性：
            computed: {
           		 //单项绑定
                sumScore1() {
                    return (this.mathScore - 0) + (this.englishScore - 0)
                },
                //双向绑定
                sumScore2: {
                    get() {
                        return (this.mathScore - 0) + (this.englishScore - 0)
                    },
              		//，当检测到总成绩发生改变时，把数学成绩和英语成绩更新为平均分
                    set(newValue) {
                        let avgValue = newValue / 2;
                        this.mathScore = avgValue;
                        this.englishScore = avgValue
                    }
                }
            },
            //用watch监听器监听数学分数，定义一个新的数学成绩的值，
            //总成绩为新的数学成绩的值和原来英语成绩的值的总和
            //当改变数学成绩的时候，总成绩发生改变，
            //当改变英语成绩的时候，总成绩不变
            watch: {
                mathScore(newValue) {
                    this.sumScore3 = (newValue - 0) + (this.englishScore - 0)
                }
            }
        })
        //通过vm的方式调用
        //第一个参数就是被监听的属性名，第二个参数是回调函数
        vm.$watch("englishScore", function (newValue) {
        //newValue是新的英语成绩
            this.sumScore3 = (newValue - 0) + (this.mathScore - 0)
        })
    </script>