Vue.js 计算属性
使用计算属性的实例：
<!DOCTYPE html><html> ???<head> ???????<meta cahrset="utf-8"> ???????<title>computed</title> ???????<script src="vue.min.js"></script> ???</head> ???<body> ???????<div id="app"> ???????????<p>原始字符串：{{message}}</p> ???????????<p>反转后字符串{{reversedMessage}}</p> ???????</div> ???????<script> ???????var vm = new Vue({ ???????????el: ‘#app‘, ???????????data: { ???????????????message: ‘Runoob‘ ???????????}, ???????????computed: { ???????????????// 计算属性的 getter ???????????????reversedMessage :function(){ ???????????????????// `this` 指向 vm 实例 ???????????????????return this.message.split(‘‘).reverse().join(‘‘) ???????????????} ???????????} ???????}) ???????</script> ???</body></html>提供的函数将用作属性 vm.reversedMessage 的 getter 。 vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
<!DOCTYPE html><html> ???<head> ???????<meta cahrset="utf-8"> ???????<title>computed</title> ???????<script src="vue.min.js"></script> ???</head> ???<body> ???????<div id="app"> ???????????<p>原始字符串：{{message}}</p> ???????????<p>反转后字符串{{reversedMessage()}}</p> ???????</div> ???????<script> ???????var vm = new Vue({ ???????????el: ‘#app‘, ???????????data: { ???????????????message: ‘Runoob‘ ???????????}, ???????????methods: { ???????????????reversedMessage: function () { ???????????????return this.message.split(‘‘).reverse().join(‘‘) ???????????????} ???????????} ???????}) ???????</script> ???</body></html>- 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8"> ???????<title>getters of computed</title> ???????<script src="vue.min.js"></script> ???</head> ???<body> ???????<div id="app"> ???????????<p>{{site}}</p> ???????</div> ???????<script> ???????var vm = new Vue({ ???????????el: ‘#app‘, ???????????data: { ???????????????name: ‘Google‘, ???????????????url: ‘http://www.google.com‘ ???????????}, ???????????computed: { ???????????????site: { ???????????????????// getter ???????????????????get: function(){ ???????????????????????return this.name + ‘ ‘ + this.url ???????????????????}, ???????????????????// setter ???????????????????set: function(newValue){ ???????????????????????var names = newValue.split(‘ ‘) ???????????????????????this.name = names[0] ???????????????????????this.url = names[names.length - 1] ???????????????????} ???????????????} ???????????} ???????}) ???????// 调用 setter， vm.name 和 vm.url 也会被对应更新 ???????vm.site = ‘百度 www.baidu.com‘; ???????document.write(‘name:‘ + vm.name); ???????document.write(‘<br>‘); ???????document.write(‘url: ‘ + vm.url); ???????</script> ???</body></html>Vue.js 计算属性
原文地址：http://www.cnblogs.com/sinceForever/p/7615320.html