使用Computed properties(计算得到的属性)和watchers(监听器)

使用Computed properties(计算得到的属性)和watchers(监听器)

很多时候，我们在页面上想要显示某个变量的值时，都需要经过一些计算，例如：

<div id="example">
  {% raw %}{{{% endraw %} some_string.split(',').reverse().join('-') }}
</div>

越是复杂，到后期越容易出错。

这个时候，我们就需要一种机制，可以方便的创建这样的通过计算得来的数据。

所以， Computed Properties 就是我们的解决方案。

典型例子

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <p> 原始字符串： {{my_text}} </p>
        <p> 通过运算后得到的字符串： {{my_computed_text}} </p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                my_text: 'good good study, day day up'
            },
            computed: {
                my_computed_text: function(){
                    // 先去掉逗号，然后按照空格分割成数组，然后翻转，并用'-'来连接
                    return this.my_text.replace(',', '').split(' ').reverse().join('-')
                }
            }
        })
    </script>
</body>
</html>

可以看到，上面的关键代码是，在 Vue的构造函数中，传入一个 computed的段落。

使用浏览器运行后，可以看到结果如下图所示：

我们也打开 console 来查看。

输入

> app.my_text

会得到： “good good study, day day up”

输入

> app.my_computed_text

会得到转换后的： “up-day-day-study-good-good”

Computed Properties 与普通方法的区别。

根据上面的例子，我们可以使用普通方法来实现：

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <p> 原始字符串： {{my_text}} </p>
        <p> 通过运算后得到的字符串： {% raw %}{{{% endraw %}my_computed_text() }} </p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                my_text: 'good good study, day day up'
            },
            methods: {
                my_computed_text: function(){
                    return this.my_text.replace(',', '').split(' ').reverse().join('-') + '，我来自于 function, 不是computed '
                }
            }
        })
    </script>
</body>
</html>

上面的代码，运行后如下图所示：

可以发现，他们达到的效果是一样的。

他们的区别在于：使用computed properties的方式，会把结果“缓存”起来。每次调用对应的computed properties时，只要对应的依赖数据没有改动，那么就不会变化。

而使用 “function” 实现的版本，则不存在缓存问题。每次都会重新计算对应的数值。

所以，我们需要按照实际情况，来选择是使用 “computed properties” ，还是使用普通function的形式。

watched property

Vuejs 中的property(属性)，是可以要么根据计算发生变化（computed) , 要么根据监听（watch)其他的变量的变化而发生变化

我们看一下，如何根据监听（watch) 其他的变量而自身发生变化的例子，如下；

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <p> 
            我所在的城市： <input v-model='city' />（这是个watched property)
        </p>
        <p> 
            我所在的街道： <input v-model='district' />（这是个watched property)
        </p>
        <p> 我所在的详细一些的地址： {{full_address}} （每次其他两个发生变化，这里就会跟着变化) </p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                city: '北京市',
                district: '朝阳区',
                full_address: "某市某区"
            },
            watch: {
                city: function(city_name){
                    this.full_address = city_name + '-' + this.district
                },
                district: function(district_name){
                    this.full_address = this.city + '-' + district_name
                }
            }
        })
    </script>
</body>
</html>

在上面的代码中，可以看到， watch: { city: ..., district: ...}, 表示， city 和 district 都已经被监听了，这两个都是 watched properties.

只要city 和 district发生变化， full_address 就会跟着变化。

我们用浏览器打开上面的代码，如下图所示，此时由于 city 和district 还没有发生变化，所以 full_address的值还是 “某市某区” ：

当我在 “街道” 的输入框，后面加上 “望京街道” 几个字后，可以看到，下面的“详细地址”，就发生了变化。如下图所示：

使用computed 会比watch 更加简洁

上面的例子，我们可以使用 computed 来改写，如下图所示：

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <p> 
            我所在的城市： <input v-model='city' />
        </p>
        <p> 
            我所在的街道： <input v-model='district' />
        </p>
        <p> 我所在的详细一些的地址： {{full_address}} （这是使用computed 实现的版本) </p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                city: '北京市',
                district: '朝阳区',
            },
            computed: {
                full_address: function(){
                    return this.city + this.district;
                }
            }
        })
    </script>
</body>
</html>

可以看到，方法少了一个， data中定义的属性也少了一个，简洁了不少。代码简洁，维护起来就容易（代码量越少，程序越好理解）

为 computed property 的setter （赋值函数)

原则上来说， computed property 是根据其他的值，经过计算得来的。是不应该被修改的。

不过在开发中，确实有一些情况，需要对 “computed property” 做修改，同时影响某些对应的属性。（过程跟上面是相反的） .

我们看下面的代码：

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <p> 
            我所在的城市： <input v-model='city' />
        </p>
        <p> 
            我所在的街道： <input v-model='district' />
        </p>
        <p> 我所在的详细一些的地址：    <input v-model='full_address' /> </p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                city: '北京市',
                district: '朝阳区',
            },
            computed: {
                full_address: {
                    get: function(){
                        return this.city + "-" + this.district;
                    },
                    set: function(new_value){
                        this.city = new_value.split('-')[0]
                        this.district = new_value.split('-')[1]
                    }
                }
            }
        })
    </script>
</body>
</html>

可以看出，上面代码中，有这样一段：

computed: {
    full_address: {
        get: function(){
            return this.city + "-" + this.district;
        },
        set: function(new_value){
            this.city = new_value.split('-')[0]
            this.district = new_value.split('-')[1]
        }
    }
}

可以看出，上面的 get 代码段，就是原来的代码内容。而 set端中，则定义了，如果 computed property (也就是 full_address) 发生变化的时候，city 和 district 的值应该如何变化。

用浏览器打开后，我们在 “最下方的输入框” 中，后面输入一些字，可以看到，对应的 “街道”发生了变化：

computed properties