vue 组件属性监听_Vue计算属性和监听器使用

最新推荐文章于 2024-10-17 18:17:22 发布

原创最新推荐文章于 2024-10-17 18:17:22 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue 组件属性监听

本文介绍了Vue中计算属性和监听器。计算属性通过computed选项定义，类似methods中的函数但会缓存，默认是getter函数，支持单向绑定，也可设置setter实现双向绑定。监听器watch在属性数据变化时自动调用回调函数计算，可通过watch选项或vm实例的$watch()监听属性。

Vue中计算属性和监听器

计算属性 computed

computed 选项定义计算属性

计算属性类似于 methods 选项中定义的函数
计算属性会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值
函数每次都会执行函数体进行计算
案例源码：
需求：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分

<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>
div>
<script src="./node_modules/vue/dist/vue.js">script>
    <script>/* 
        1. 函数没有缓存，每次都会被调用
        2. 计算属性有缓存 ，只有当计算属性体内的属性值被更改之后才会被调用，不然不会被调用
        3. 函数只支持单向
        4. 计算属性默认情况下：只有getter函数，而没有setter函数，所以只支持单向
            如果你要进行双向，则需要自定义setter函数
        */var vm = new Vue({el: '#app',data: {mathScore: 80,englishScore: 90,sumScore3: 0 // 通过监听器，计算出来的总得分
            },methods: {sumScore: function () { //100console.log('sumScore函数被调用')// this 指向的就是 vm 实例 , 减0是为了字符串转为数字运算return (this.mathScore-0) + (this.englishScore-0)
                }
            },computed: { //定义计算属性选项//这个是单向绑定，默认只有getter方法
                sumScore1: function () { //计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会重新计算，只有发生改变 的时候才会重新计算console.log('sumScore1计算属性被调用')return (this.mathScore-0) + (this.englishScore-0)
                }
            }
           })

computed 选项内的计算属性默认是 getter 函数，所以上面只支持单向绑定，当修改数学和英语的数据才会
更新总分，而修改总分不会更新数据和英语

计算属性(双向绑定)

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
案例源码：

<body>
    <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">
    div>
    <script src="./node_modules/vue/dist/vue.js">script>
    <script>/* 
        1. 函数没有缓存，每次都会被调用
        2. 计算属性有缓存 ，只有当计算属性体内的属性值被更改之后才会被调用，不然不会被调用
        3. 函数只支持单向
        4. 计算属性默认情况下：只有getter函数，而没有setter函数，所以只支持单向
            如果你要进行双向，则需要自定义setter函数
        */var vm = new Vue({el: '#app',data: {mathScore: 80,englishScore: 90,sumScore3: 0 // 通过监听器，计算出来的总得分
            },methods: {sumScore: function () { //100console.log('sumScore函数被调用')// this 指向的就是 vm 实例 , 减0是为了字符串转为数字运算return (this.mathScore-0) + (this.englishScore-0)
                }
            },computed: { //定义计算属性选项//这个是单向绑定，默认只有getter方法
                sumScore1: function () { //计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会重新计算，只有发生改变 的时候才会重新计算console.log('sumScore1计算属性被调用')return (this.mathScore-0) + (this.englishScore-0)
                },sumScore2: { //有了setter和getter之后就可以进行双向绑定//获取数据
                    get: function() {console.log('sumScore2.get被调用')return (this.mathScore-0) + (this.englishScore-0)
                    },//设置数据， 当 sumScore2 计算属性更新之后 ，则会调用set方法
                    set: function(newValue) { // newVulue 是 sumScore2 更新之后的新值console.log('sumScore2.set被调用')var avgScore = newValue / 2this.mathScore = avgScorethis.englishScore = avgScore
                    }
                }
            },
         })

监听器 watch

当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算
通过 watch 选项或者 vm 实例的 $watch() 来监听指定的属性
通过 watch 选项监听数学分数，当数学更新后回调函数中重新计算总分sumScore3
通过 vm.$watch() 选项监听英语分数，当英语更新后回调函数中重新计算总分sumScore3
源码实现：
注意: 在data 选择中添加一个 sumScore3 属性

<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">

        
        总得分(监听器): <input type="text" v-model="sumScore3">   

    div>
    <script src="./node_modules/vue/dist/vue.js">script>
    <script>/* 
        1. 函数没有缓存，每次都会被调用
        2. 计算属性有缓存 ，只有当计算属性体内的属性值被更改之后才会被调用，不然不会被调用
        3. 函数只支持单向
        4. 计算属性默认情况下：只有getter函数，而没有setter函数，所以只支持单向
            如果你要进行双向，则需要自定义setter函数
        */var vm = new Vue({el: '#app',data: {mathScore: 80,englishScore: 90,sumScore3: 0 // 通过监听器，计算出来的总得分
            },methods: {sumScore: function () { //100console.log('sumScore函数被调用')// this 指向的就是 vm 实例 , 减0是为了字符串转为数字运算return (this.mathScore-0) + (this.englishScore-0)
                }
            },computed: { //定义计算属性选项//这个是单向绑定，默认只有getter方法
                sumScore1: function () { //计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会重新计算，只有发生改变 的时候才会重新计算console.log('sumScore1计算属性被调用')return (this.mathScore-0) + (this.englishScore-0)
                },sumScore2: { //有了setter和getter之后就可以进行双向绑定//获取数据
                    get: function() {console.log('sumScore2.get被调用')return (this.mathScore-0) + (this.englishScore-0)
                    },//设置数据， 当 sumScore2 计算属性更新之后 ，则会调用set方法
                    set: function(newValue) { // newVulue 是 sumScore2 更新之后的新值console.log('sumScore2.set被调用')var avgScore = newValue / 2this.mathScore = avgScorethis.englishScore = avgScore
                    }
                }
            },//监听器，
            watch: {//需求：通过 watch 选项 监听数学分数， 当数学更新后回调函数中重新计算总分sumScore3
                mathScore: function(newValue, oldValue) {console.log('watch监听器,监听到了数学分数已经更新')//  newValue 是更新后的值，oldValue更新之前的值this.sumScore3 = (newValue-0) + (this.englishScore-0)
                }
            },
        })//监听器方式2: 通过 vm 实例进行调用//第1个参数是被监听 的属性名， 第2个是回调函数 
        vm.$watch('englishScore', function(newValue) {//newValue就是更新之后的英语分数this.sumScore3 = (newValue-0) + (this.mathScore-0)
        })
        vm.$watch('sumScore3', function(newValue) {//newValue就是更新之后部分var avgScore = newValue / 2this.mathScore = avgScorethis.englishScore = avgScore
        })script>