VUE学习（四）-计算属性与监听器

VUE学习（四）-计算属性与监视

1 计算属性

1.1 什么是计算属性

    计算属性一般就是用来通过其他的数据算出一个新数据。一般用于处理在模板中需要多次使用需要通过计算得到新值的情况。

1.2 语法

  computed: {
    计算属性名称: function () {
      return 返回信息
    }
  }

1.3 示例

例如：如下所示根据输入各科成绩计算总分数及平均分数

代码：

    <div id="app">
        成绩：
        <hr/>
        <p>数学：<input type="text" v-model.number="math"/></p>
        <p>语文：<input type="text" v-model.number="chinese"/></p>
        <p>英语：<input type="text" v-model.number="english"/></p>
        <p>总分数：{{sum}}</p>
        <p>平均分数：{{average}}</p>
    </div>

    <script type="text/javascript" src="../plugins/js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                math:83,
                chinese:82,
                english:80
            },
            computed: {
                sum:function(){
                    return (this.math + this.chinese + this.english)
                },
                average:function(){
                    return Math.round((this.math + this.chinese + this.english)/3)
                }
            }
        })
    </script>

    这里我们申明了两个计算属性分别为sum和average，在html标签中可以使用大括号表达式将其显示。JavaScript中可以通过例子中的 vm实例获取值，Eg:console.log(vm.average)

1.4 计算属性的getter和setter

    计算属性默认只有 getter，不过在需要时也可以提供一个 setter。

    getter用于获取值，当需要读取当前属性值的时候回调

    setter用于监视属性值的变化，当属性值发生变化是回调

1.4.1 语法

computed: {
  计算属性名称: {
    // getter
    get: function () {
      return ...
    },
    // setter
    set: function (newValue) {
      // ...
    }
  }
}

1.4.2 实例

    实现如下输入姓名的双向数据绑定

    <div id="app">
        <p>姓：<input type="text" v-model="firstName"/></p>
        <p>名：<input type="text" v-model="lastName"/></p>
        <p>姓名：<input type="text" v-model="name"/></p>
    </div>
    
    <script type="text/javascript" src="../plugins/js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                firstName:'张',
                lastName:'三'
            },
            computed: {
                name:{
                    get:function () {
                        return this.firstName + " " + this.lastName
                    },
                    set:function (value) { // value监视计算属性的变化值
                        let nameArr = value.split(" ")
                        this.firstName = nameArr[0]
                        this.lastName =  nameArr[1]
                    }
                }
            }
        })
    </script>

 

1.5 特点

    （1）计算属性一般就是用来通过其他的数据算出一个新数据

    （2）计算属性存在缓存, 多次读取只执行一次 getter 计算，当其他的数据没有发生改变导致计算数据发生变化，它调用的是缓存的数据

2 监听器

    用于响应数据的变化。通常情况下计算属性更合适，但当需要在数据变化时执行异步或开销较大的操作时watch更适合

2.1 语法

  watch: {
    // 如果监听器属性值发生改变，这个函数就会运行
    监听器属性名称: function (新值, 旧值) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }

2.2 示例

    <div id="app">
        <p>问题：<input type="text" v-model="question"/></p>
        <p>答案：{{answer}}</p>
    </div>

    <script type="text/javascript" src="../plugins/js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                question:'',
                answer:''
            },
            watch:{
                question:function (newValue, oldValue) {
                    //... 执行ajax请求
                    this.answer = "'" + newValue + "'问题的答案是：哈，就是上一个问题'"  + oldValue + "'的答案"
                }
            }
        })
    </script>

3 计算属性理解及与watch的区别

    1、计算属性用于描述一个值依赖另一个值，当依赖的值发生变化是计算属性值跟着变化，watch用于监听定义的变量,当定义的变量的值发生变化时，调用对应的方法

    2、计算属性在可以使用大括号表达式显示器计算属性的值，watch用于监听定义的变量