[Vue教程]计算属性与侦听器

本章内容将为大家介绍最常用的最常见的计算属性和侦听属性,计算属性的关键词是 computed,然后侦听器的关键词是 watch,介绍完它的使用方法之后,还会介绍它的使用场景。

之前我们介绍了使用 BootCDN 快速引用 vue 库,我在新的创建一个 HTML 文件,继续引入 CDN 方式引入 vue 库,我们在页面上方一个 div 元素用来绑定 vue 实例。

<div id="app"></div>

JavaScript 代码:

new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue'
        },
        warch: {

        },
        computed: {

        }
    })

watch 这个属性顾名思义就是监听的作用,比如说我们要监听 msg 这个对象或者是变量,怎么做呢?监听谁就用谁来写,然后加一个 function,此时可以穿入两个值,一个是新的值 newval,一个是旧的值 oldval,然后我们在后台分别打印一下这两个值,当 msg 发生变化的时候,这个 function 就回去执行。

var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue'
        },
        watch: {
            msg: function (newval, oldval) {
                console.log("newval is:" + newval);
                console.log("oldval is:" + oldval);
            }
        },
        computed: {

        }
    })

如何调试呢?我们打开控制台,输入 app.msg,回车打印出来的是“”Hello Vue!””,那么如何修改 msg 值看一下是否会被侦听到呢?只需要我们在控制台给 msg 付一个新值就可以了,即输入“app.msg = “new message!!””回车我们看一下会有什么结果。

[Vue 教程]计算属性与侦听器

从上图可以看出新修改的 msg 值就去执行了对应的 function 方法,在控制台就打印出了新的值是“new message!!”旧的值是“Hello Vue!”,而页面上也同步的发生了变化,这个就是 watch 属性的作用用法。

watch 侦听方法

接下来看看 computed 属性的用法,我们给页面上一个 msg1 属性

<div id="app">
    {{msg}}
    <p>
        {{msg1}}
    </p>
</div>

computed 属性中 msg1 同样的给它一个 function,在 msg1 中的 function 内我们只做一件事情,return 返回 this.msg,这里面的 this 就是代表 Vue 对象或者说代表的本实例,this.msg 就是代表现在我们这个实例 msg 变量。

computed: {
            msg1: function () {
                return 'computed:' + this.msg;
            }
        }

看一下此时的效果:

computed 属性

通过上图可以看出我们 msg1 输出了 computed 加上 msg 上的内容,然后我们和刚才一样改变一下 msg 这个变量的值,看一下

computed 属性用法

由上图大家可以看到,msg1 的值发生了变化,同样的 msg 的值也发生了变化,它也经过了 watch 属性方法,因为我们改变了 msg 的值,而我们之前也没有删除 msg 监听的属性。此时大家可能会问了,computed 的执行的 msg1 方法是不是和 watch 属性执行的 msg 方法的值是一样的,其实它们两是不一样的,不一样在那里呢?我们在代码上测试一下。

我们在 data 上新添加一个 another 值,然后在 msg1 上加上 this.another 的值

data: {
            msg: 'Hello Vue!',
            another: 'another Hello Vue!!'
        },
        watch: {
            msg: function (newval, oldval) {
                console.log("newval is:" + newval);
                console.log("oldval is:" + oldval);
            }
        },
        computed: {
            msg1: function () {
                return 'computed:' + this.msg + ',' + this.another;
            }
        }
})

watch 这个属性它只能监听当前或者说它里面指定的这个变量值的变化,而 compute 属性只要是包含在它这个 function 里面的任意一个值发生变化,它对应的返回的 msg1 的值都会发生变化,我们看一下页面上的效果:

[Vue 教程]计算属性与侦听器

我们在控制台直接使用 app.another 改变它的值,msg1 的变量就跟着发生变化,同样的道理我们可以同时改变 app.msg 和 app.another 的值,此时 compute 里面 msg1 对应的值都发生了变化,如下图,那么 msg1 的值是怎么得到呢?它是通过 this.msg 加上 this.another 得到的,只要他们任意一个值发生变化都会影响 msg1 的值的变化,这个就是 computed 特性,但它坚挺的这个值一定都是本实例 data 中的值。

computed 改变影响 msg1 的值

如果我们这个值在实例以外呢?它会不会监听呢我们试一下:

var arr = 'new test';
var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            another: 'another Hello Vue!!'
        },
        watch: {
            msg: function (newval, oldval) {
                console.log("newval is:" + newval);
                console.log("oldval is:" + oldval);
            }
        },
        computed: {
            msg1: function () {
                return 'computed:' + this.msg + ',' + this.another + arr;
            }
        }
})

我们也来改变一下 arr 的值,右下图可以看出,虽然我们改变了 arr 的值,但是本实例 msg1 的值未发生任何改变。

改变 arr 值未影响 msg1 的值

但是呢这里还有一个神奇的地方,我改变 msg 的值使得刚刚修改的 arr 的值改变成功了,然后 computed 发生了变化,那么,触发我们 computed 里面的 msg1 变量变化的条件是什么呢?就是 msg1 里面所包含的本实例里面的变量它发生了变化,比如 msg、another 的值它发生了变化后,就会触发 msg1 重新的运算,也会导致页面上这些 msg1 所影响的变量会重新的渲染。这里有点复杂,希望大家一定要去实践一下,感受一下,或者敲一下我的例子,就会感受到 computed 实际的作用。

总结

本章我们学到了两个重要知识点,一个是计算属性 computed,第二个是侦听器 watch,介绍了 watch 和 computed 他们两个的使用场景,用很直白的话总结他们之间的区别:watch 通常来说监听的是一个变量,或者说是一个常量的变化,这个变量可能是一个单一的变量也可能是一个数组;computed 可以监听很多个变量,但这个变量一定是在 vue 实例里面的。这就是 watch 和 computed 他们两个之间的区别。

「点点赞赏,手留余香」

6

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » [Vue教程]计算属性与侦听器

2 评论

发表回复