vue 计算属性与侦听器

  侦听器:顾名思义,就是用来监听数据变化用的。侦听器在vue实例中,定义变量watch来使用。监听新值newVal和旧值oldVal,具体使用方法如下:

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

<head>
    <meta charset="UTF-8">
    <title>vue侦听器与计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div class="myApp">
        <p>{{msg}}</p>
    </div>
    <script>
    var myApp = new Vue({
        el: '.myApp',
        data: {
            msg:'hello vue!'
        },
        watch: {
            msg: function (newVal, oldVal) {
                console.log('oldVal=' + oldVal);
                console.log('newVal=' + newVal);
            }
        }
    });
    </script>
</body>

</html>

  上面是一个简单的示例,watch监听的是变化的数据,可以监听新数据和老数据,我们可以使用Chrome的控制台来修改msg的值进行一下测试:

  如果只是监测一个变量值的变化,推荐使用watch,官网上还有一个复杂一些的例子,感兴趣的同学,可以去看看https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8,如果要监测两个以上变量的情况,最好还是使用计算属性computed,为什么这么说呢,我们可以看一下下面的例子:

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

<head>
    <meta charset="UTF-8">
    <title>vue侦听器与计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div class="myApp">
        <p>firstName:{{firstName}}</p>
        <p>lastName:{{lastName}}</p>
        <p>fullName:{{fullName}}</p>
        <p>xing:{{xing}}</p>
        <p>ming:{{ming}}</p>
        <p>quanming:{{quanming}}</p>
    </div>
    <script>
    var myApp = new Vue({
        el: '.myApp',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar',
            xing: 'zhang',
            ming: 'san',
        },
        watch: {
            firstName: function(val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function(val) {
                this.fullName = this.firstName + ' ' + val
            }
        },
        computed: {
            quanming: function(){
                return this.xing + ' ' + this.ming;
            }
        }
    });
    </script>
</body>

</html>

  从上面的例子,我们可以看出,同样的功能,使用computed要比watch更简洁。

  上一篇文章说到,在数据绑定双花括号中,我们可以使用表达式,但是,有些复杂的表达式,如果用到的地方比较多,那其实是不太方便的,这时候,就可以使用computed了,示例如下:

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

<head>
    <meta charset="UTF-8">
    <title>vue侦听器与计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div class="myApp">
        <p>Original message: "{{ msg }}"</p>
        <p>Computed reversed message: "{{ reversedMsg }}"</p>
        <p>Reversed message: "{{ reversedMsg1() }}"</p>
    </div>
    <script>
    var myApp = new Vue({
        el: '.myApp',
        data: {
            msg: 'hello vue'
        },
        computed: {
            reversedMsg: function() {
                return this.msg.split('').reverse().join('')
            }
        },
        methods: {
            reversedMsg1: function() {
                return this.msg.split('').reverse().join('')
            }
        }
    });
    </script>
</body>

</html>

  仔细看上面的例子中,反转字符串我使用了两种方法,一个是使用computed,另一个是在表达式中调用方法来实现,这两个方法有什么区别呢?其实,使用computed,是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

   computed计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

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

<head>
    <meta charset="UTF-8">
    <title>vue侦听器与计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <style>
    </style>
</head>

<body>
    <div class="myApp">
        <p>firstName:{{firstName}}</p>
        <p>lastName:{{lastName}}</p>
        <p>fullName:{{fullName}}</p>
    </div>
    <script>
    var myApp = new Vue({
        el: '.myApp',
        data: {
            firstName: 'john',
            lastName: 'doe'
        },
        computed: {
            fullName:{
                get: function(){
                    return this.firstName + ' ' + this.lastName;
                },
                set: function(newVal){
                    var names = newVal.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length -1];
                }
            }
        }
    });
    </script>
</body>

</html>

  在Chrome的控制台,输入myApp.fullName = 'zhang san',就可以看到页面上的名字被重新设置了。

 

猜你喜欢

转载自www.cnblogs.com/jiangtengteng/p/10373525.html
0条评论
添加一条新回复