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'，就可以看到页面上的名字被重新设置了。

vue 计算属性与侦听器

猜你喜欢