vue 监听属性watch与computed

最新推荐文章于 2022-09-24 07:30:00 发布

Mars-xq

最新推荐文章于 2022-09-24 07:30:00 发布

阅读量267

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sinat_31057219/article/details/106081270

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

参考：

详解vue2.0监听属性的使用心得及搭配计算属性的使用

vue 监听对象的属性

1.基础版监听：监听 ‘‘单个值’’

场景如下：输入框输入你的年龄，如果年龄在0-15岁提示信息：你还是个小孩，如果年龄在 15-25岁，提示信息：你已经是个少年，如果年龄在25岁以上，提示信息：你已经长大了。根据需求配合监听属性我们得到下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    年齡：<input type="number" v-model="age"><br>
    提示信息：<span>{{infoMsg}}</span>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            age: 0,
            infoMsg: ""
        },
        watch: {
            age: function (val, oldval) {
                if (val > 0 && val < 15) {
                    this.infoMsg = "你还是个小孩"
                } else if (val > 15 && val < 25) {
                    this.infoMsg = "你已经是个少年"
                } else {
                    this.infoMsg = "你已经长大了"
                }
            }
        }
    })
</script>
</body>
</html>

这里需要特别说明一下的是：坚挺属性方法中的两个参数分别代表的含义：第一个val是当面正在监听的属性的值，oldval是属性改变之前的值，由于这是形参的原因，参数的名字可以自己定义，但是但是参数所代表的含义是不会变化的。

2.进阶版监听：监听对象

由于我们监听的是对象info中的属性age值的变化，所以我们需要使用到的是深度监听，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app4">
    年齡：<input type="number" v-model="info4.age4"><br>
    提示信息：<span>{{infoMsg4}}</span>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app4',
        data: {
            info4: {
                age4: ""
            },
            infoMsg4: ""
        },
        watch: {
            info4: {
                handler: function (val, oldval) {
                    var that = this;
                    if (val.age4 > 0 && val.age4 < 15) {
                        that.infoMsg4 = "你还是个小孩";
                    } else if (val.age4 > 15 && val.age4 < 25) {
                        that.infoMsg4 = "你已经是个少年";
                    } else {
                        that.infoMsg4 = "你已经长大了";
                    }
                },
                deep: true
            }
        }
    })
</script>
</body>
</html>

在这里需要注意的有两点：

1，这里的function不能使用箭头函数替代，如果使用箭头函数的话，this的指向会是全局。
2，你会注意到这里多加入一个属性是deep，它的含义表示是否开启深度监听，如果开启值为true，反之为false。

3.最高级监听：监听对象中的某个属性

针对第二个案例不知道你有没有发现一个问题：我们监听的是一个对象里面某个属性的变化，
但是如果当这个对象里面有很多个值的时候，虽然也可以使用第二种方法进行监听，
但是这将会是对资源的一种极大的浪费，身为一个严谨的程序员（微笑脸），绝对不能允许这样的事情发生，
所以我们可以结合computed（计算属性）对上面的代码进行优化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app5">
    年齡：<input type="number" v-model="info5.age5"><br>
    提示信息：<span>{{infoMsg5}}</span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app5',
        data: {
            info5: {
                age5: "",
                name5: "",
                hobit5: ""
            },
            infoMsg5: ""
        },
        computed: {
            ageval: function () {
                return this.info5.age5;
            }
        },
        watch: {
            ageval: {
                handler: function (val, oldval) {
                    var that = this;
                    if (val > 0 && val < 15) {
                        that.infoMsg5 = "你还是个小孩";
                    } else if (val > 15 && val < 25) {
                        that.infoMsg5 = "你已经是个少年";
                    } else {
                        that.infoMsg5 = "你已经长大了";
                    }
                },
                deep: true
            }
        }
    })
</script>
</body>
</html>