前端技术交流群:565733884

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

Vue教程 码云 70℃ 0评论

本章内容将为大家介绍最常用的最常见的计算属性和侦听属性,计算属性的关键词是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他们两个之间的区别。

转载请注明:码云笔记 » [Vue教程]计算属性与侦听器

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 学习了
    元芳2019-01-29 09:50 回复