vue计算属性和监听器

计算属性 computed

computed 选项定义计算属性。
计算属性类似于 methods 选项中的函数。

比较：

  • 计算属性：会进行缓存，只在相关响应式依赖发生改变的时候才会重新求值。
  • 函数：每次都会执行函数体进行计算。

需求：输入数学与英语的分数，采用 methods 与 computed 分别计算出总得分。

使用函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性和监听器</title>
</head>

<body>
    <div id="app">
        数学：<input type="text" v-model="mathScore">
        英语：<input type="text" v-model="englishScore">
        <!-- v-model调用函数时不要少了小括号（） -->
        总得分：<input type="text" v-model="sumScore()">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                mathScore: 80,
                englishScore: 90,
            },
            methods: {
                sumScore: function () {
                    console.log("sumScore函数被调用了。。。")
                    // this 指向的是vm实例
                    // 减0是为了字符串转为数字运算
                    return (this.mathScore - 0) + (this.englishScore - 0)
                },
            },
        })
    </script>
</body>

</html>

在这里插入图片描述

使用计算属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性和监听器</title>
</head>

<body>
    <div id="app">
        数学：<input type="text" v-model="mathScore">
        英语：<input type="text" v-model="englishScore">
        <!-- v-model调用函数时不要少了小括号（） -->
        总得分(函数)：<input type="text" v-model="sumScore()">
        <!-- 计算属性后面不需要加小括号 -->
        总得分(计算属性)：<input type="text" v-model="sumScore1">
    </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,
            },
            // 函数
            methods: {
                sumScore: function () {
                    console.log("sumScore函数被调用了。。。")
                    // this 指向的是vm实例
                    // 减0是为了字符串转为数字运算
                    return (this.mathScore - 0) + (this.englishScore - 0)
                },
            },
            // 计算属性
            computed: {
                sumScore1:function(){
                    // 计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会发生改变，只要属性值发生改变的时候才会重新计算。
                    console.log("计算属性被调用")
                    return (this.mathScore - 0) + (this.englishScore - 0)
                }
            },
        })
    </script>
</body>

</html>

在这里插入图片描述

  1. 函数没有缓存，每次都会调用。
  2. 计算属性有缓存，只有当计算属性体内的属性值发生改变之后才会被调用。
  3. 函数只支持单项的。
  4. 计算属性默认只有getter函数，而没有setter函数，所以只支持单项。如果想要进行双向，则需要自定义setter函数。

计算属性（双向绑定）

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性和监听器</title>
</head>

<body>
    <div id="app">
        数学：<input type="text" v-model="mathScore"><br>
        英语：<input type="text" v-model="englishScore"><br>
        <!-- v-model调用函数时不要少了小括号（） -->
        总得分(函数-单项绑定)：<input type="text" v-model="sumScore()"><br>
        <!-- 计算属性后面不需要加小括号 -->
        总得分(计算属性-单项绑定)：<input type="text" v-model="sumScore1"><br>
        总得分(计算属性-双向绑定)：<input type="text" v-model="sumScore2"><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,
            },
            // 函数
            methods: {
                sumScore: function () {
                    console.log("sumScore函数被调用了。。。")
                    // this 指向的是vm实例
                    // 减0是为了字符串转为数字运算
                    return (this.mathScore - 0) + (this.englishScore - 0)
                },
            },
            // 计算属性
            computed: {
                // 这个是单项绑定，默认只有getter方法。
                sumScore1:function(){
                    // 计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会发生改变，只要属性值发生改变的时候才会重新计算。
                    console.log("计算属性被调用")
                    return (this.mathScore - 0) + (this.englishScore - 0)
                },

                sumScore2:{ // 有了set和get之后就可以进行双向数据绑定
                    // 获取数据
                    get:function(){
                        console.log("sumScore2.get 计算属性被调用")
                        return (this.mathScore - 0) + (this.englishScore - 0)
                    },
                    // 设置数据
                    set:function(newValue){ // newValue 是 sumScore2 更新之后的新值。
                        // 当 sumScore2 这个计算属性值发生改变之后，则会调用这个方法。
                        console.log("sumScore2.set 计算属性被调用")
                        var avgValue = newValue / 2
                        this.mathScore = avgValue
                        this.englishScore = avgValue
                    }
                }
            },
        })
    </script>
</body>

</html>

在这里插入图片描述

监听器 watch

当属性数据发生变化的时候，对应属性的回调函数会自动调用，在函数内部进行计算。

通过 watch 选项或者是 vm 实例的 $watch 来监听指定的属性。

需求：

  1. 通过 watch() 选项来监听数学分数，当数学分数更新后回调函数中重新计算总分。
  2. 通过 $watch() 来监听英语分数，当英语更新后重新计算总分数。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性和监听器</title>
</head>

<body>
    <div id="app">
        数学：<input type="text" v-model="mathScore"><br>
        英语：<input type="text" v-model="englishScore"><br>
        <!-- v-model调用函数时不要少了小括号（） -->
        总得分(函数-单项绑定)：<input type="text" v-model="sumScore()"><br>
        <!-- 计算属性后面不需要加小括号 -->
        总得分(计算属性-单项绑定)：<input type="text" v-model="sumScore1"><br>
        总得分(计算属性-双向绑定)：<input type="text" v-model="sumScore2"><br>

        <!-- 通过 watch() 选项来监听数学分数，当数学分数更新后回调函数中重新计算总分。 -->
        总得分(监听器)：<input type="text" v-model="sumScore3"><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 () {
                    console.log("sumScore函数被调用了。。。")
                    // this 指向的是vm实例
                    // 减0是为了字符串转为数字运算
                    return (this.mathScore - 0) + (this.englishScore - 0)
                },
            },
            // 计算属性
            computed: {
                // 这个是单项绑定，默认只有getter方法。
                sumScore1: function () {
                    // 计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会发生改变，只要属性值发生改变的时候才会重新计算。
                    console.log("计算属性被调用")
                    return (this.mathScore - 0) + (this.englishScore - 0)
                },

                sumScore2: { // 有了set和get之后就可以进行双向数据绑定
                    // 获取数据
                    get: function () {
                        console.log("sumScore2.get 计算属性被调用")
                        return (this.mathScore - 0) + (this.englishScore - 0)
                    },
                    // 设置数据
                    set: function (newValue) { // newValue 是 sumScore2 更新之后的新值。
                        // 当 sumScore2 这个计算属性值发生改变之后，则会调用这个方法。
                        console.log("sumScore2.set 计算属性被调用")
                        var avgValue = newValue / 2
                        this.mathScore = avgValue
                        this.englishScore = avgValue
                    }
                }
            },
            // 监听器
            watch: {
                // 通过 watch() 选项来监听数学分数，当数学分数更新后回调函数中重新计算总分。
                mathScore: function (newValue, oldValue) {
                    // newValue 更新后的值
                    // oldValue 更新前的值
                    this.sumScore3 = (newValue - 0) + (this.englishScore - 0)
                }
            },
        })
    </script>
</body>

</html>

监听器注意

当对象的某个属性发生改变后，默认情况下不会被监听到！！

如果你希望修改对象的属性之后仍被监听器监听到，那么久像下面一样。

watch:{
    // 深度监听，当对象中的属性发生改变后，使用 deep:true选择则可以实现监听
	item: {
		deep: true // 深度监听对象中属性的变化
		handler: function(newItems, oldItems){
			// 数据处理逻辑 ...
		}
	}
}

源码位置：https://gitee.com/wjw1014/vue_learning_course

posted @   叫我+V  阅读(518)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示