Vue-计算属性computed和侦听器watch -例子解析

假设现在有一个需求需要实现，就是把下面message中的的字符串翻转过来，期望得到结果是“！euV olleH ”

const vm =new Vue({

      el: '#app',

      data: {

                message: 'Hello Vue!',

                

            },

})

 

如果我们不使用计算属性的话，可以这样做

<div id="root">
 <!-- 先切开，在反转，最后缝合 -->
{{message.split('').reverse().join('')}}
</div>

但是如果这样的话就会运算过于复杂，冗长，且不好维护，因此我们对于复杂的运算应该 使用计算属性的方式去书写。

const vm =new Vue({

      el: '#app',

      data: {

                message: 'Hello Vue!',

                

            },

      computed: {

                reverseMsg() {

                    return this.message.split('').reverse().join('')

                }

            },

})

这样的话，只需要

<div id="root">
{{reverseMessage}}
</div>

即可在控制台看到期望结果

 

 

计算属性computer总结：

总结：

1.变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号 。

2.根据传入的变量的变化 进行结果的更新。

3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次 计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算　一次，为了进行不必要的资源消耗，选择用计算属性。

 

 侦听器watch：

 data: {
                message: 'Hello Vue!',
                num: 0
            },

 

 watch: {
                //    函数名： 侦听谁就跟谁同名
                num(newVal, oldVal) {
                    console.log(newVal,oldVal);
                    console.log('祝某某小朋友' + newVal + '岁生日快乐')
                }

            }

html代码:

 <button @click="num++">点击增加1</button>
        <p>{{num}}</p>

点击两次button按钮后，

控制台输出：

 

 

 

侦听器watch：

上面说到计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。

当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。

 

计算属性 和属性监听的区别：

1.计算属性变量在computed中定义，属性监听在data中定义。

2.计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。