vue计算属性和侦听器

祭出demo

计算属性

            

                {{ message.split('').reverse().join('') }}
            
            

• 计算属性缓存vs方法函数

            
原始字符串：{{message}}
            
通过计算属性翻转后的字符串:{{reversedMessage}}

            
通过函数翻转后的字符串: {{ reversedMessageWithFunction() }}

            

• 计算属性vs侦听属性

            
侦听器：{{fullName}}
            
计算属性{{calcuteFullName}}
            

• 计算属性的setter

            
计算属性的getter与setter: {{calcuteStudentName}}
            

侦听器

            

                咨询一个回答是/否的问题:
                
            
            
{{ answer }}

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
除了 watch 选项之外，您还可以使用命令式的 vm.$watch API

执行效果

计算属性和侦听器.png

所有运行效果请看demo

祭出demo

参考：
vue.js计算属性和侦听器

更新时间: 2018-07-19