1set和get:
注意：
this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题
练习代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="fullName"> <br> firstName: <input type="text" v-model="firstName"/> <br> lastName: <input type="text" v-model="lastName"/> </div> <script> var app=new Vue({ el:'#app', data:{ firstName:'Jack', lastName:'Green' }, computed:{ fullName:{ //getter,用于读取 get:function(){ return this.firstName+' '+this.lastName; }, set:function(newValue){ var names=newValue.split(' '); this.firstName=names[0]; // this.lastName=names[1]; 这样子在多个连续空格的情况下，lastname消失的 this.lastName=names[names.length-1]; } } } }) </script> </body> </html>
计算属性还有两个很实用的小技巧容易被忽略：
1计算属性可以依赖其他计算属性。
2计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例的数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <div id="app1"> {{arr}} </div> <div id="app2"> {{reversedTest}} </div> <script> var app1=new Vue({ el:"#app1", data:{ text:'123,456' }, computed:{ arr:function(){ return this.text.split(',').reverse(); } } }); var app2=new Vue({ el:"#app2", data:{ }, computed:{ reversedTest:function(){ return app1.arr.join(','); } } }) </script> </body> </html>
计算属性缓存：
调用methods里的方法也可以与计算属性起到同样的作用。
<div id="app"> <!-- 注意，这里的reversedText是方法，所以要带() --> {{reversedText()}} </div> <script> var app=new Vue({ el:'#app', data:{ text:'123,456' }, methods:{ reversedText:function(){ //这里的this指向的是当前Vue实例 return this.text.split(',').reverse().join(','); } } }) </script>
计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以上例中text只要不改变，计算属性也就不会更新。
computed:{ now:funcntion(){ return Date.now(); } }
这里的Date.now()不是响应式依赖，所以计算属性now不会更新。但是methods则不同，只要重新渲染，它就会被调用，因此函数也会被执行。
使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。