一.计算属性： 我们在开发当中通常会遇到这种情况，需要返回的是两个变量的计算值 ，那我们就在computed属性中去定义计算的方法： eg： 我们现在有两个变量：fristname 和 lastname 。我们想要页面输出的是fullname 全名:
当更改age的时候， fullName 函数不执行； 只有当更改 firstname或 lastname fullname才会执行
data(){ return{ firstname:'hani', lastname:'wen', age：‘12’ } }, computed:{ fullname:function(){ return this.firstname + ' ' +this.lastname } },OK，在页面上就显示fullname的值了。（当我们用插值表达式，表达式的值会先在data中找，找不到再去计算属性computed中找） 效果： hani wen
当更改age的时候， fullName 函数执行， 这样就增加了代码冗余，浏览器运行性能降低； 当更改fristName的时候， fullName 函数仍执行。
methods:{ fullname:function(){ return this.firstname + ' ' +this.lastname } }在页面上调用方法：{{function()}}
<h1>{{fullname()}}<h1>效果： hani wen 但是方法和计算属性有什么区别呢？ 方法没有缓存机制，计算属性的性能更好。
先初始化数据：
data(){ return{ firstname:'hani', lastname:'wen', fullname:'hani wen' } }监听fristname 和lastname的变化，一旦有变化则触发：
watch:{ firstname:function(){ this.fullname =this.firstname +' '+this.lastname; }, lastname:function(){ this.fullname = this.firstname + " "+this.lastname; },效果： hani wen 虽然监听的方法能够实现计算的结果，也有缓存的机制，但是看起来冗余。 这三种综合来看，涉及到计算，还是用computed比较好。
在computed中可以将fullname 定义成一个对象，在对象中定义get 和set 的方法。
computed:{ fullname:{ get:function(){ return this.firstname + ' ' +this.lastname }, set:function(value){ console.log(value); var arr = value.split(' '); this.firstname = arr[0]; this.lastname = arr[1]; } } },在调用上get没有改变。set方法，在控制台上输入：app.fullname=“dell Lee”，然后就会更新到该实例上的数据中，并在页面做出响应
计算属性的特点 当我们第一次使用计算属性的时候，会执行计算属性并进行计算，然后将计算属性结果缓存起来 后续我们在去使用计算属性的时候，如果计算属性使用的数据没有发生改变，那么就会直接读取缓存结果，不会重新计算 注意：每次计算的结果缓存的时候。都会重新创建一个便令保存结果 侦听器特点 当定义一个侦听器的时候，如果侦听器与data的属性同名，当属性的值发生改变的时候，侦听器就会被触发执行 注意：一个侦听器对应data中的一个属性，当属性发生变化时触发侦听器执行
分析结果：
从上面的特点来说，我们可以得出结论： 1).计算属性的应用场景是计算的内容需要依赖多个属性的情况 侦听器的应用场景是计算的内容依赖一个属性的情况 2).计算属性缓存结果时每次都会重新创建变量 而侦听器是直接计算，不会创建变量保存结果
也就意味着，数据如果会反复的发生变化，计算很多次的情况下，计算属性的开销将会更大，也就意味着这种情况不适合使用计算属性，适合使用侦听器 那么，如果一个数据反复会被使用，但是它计算依赖的内容很少发生变化的情况下，计算属性会缓存结果，就更加适合这种情况。 3).computed的结果是通过return返回的，而watch不需要return。 4).watch中的参数可以得到侦听属性改变的最新结果，而computed函数没有这种参数。
补充： watch只会监听数据的值是否发生改变，而不会监听地址的变化，如果需要监听引用类型的数据变化，需要深度监听：obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。 在特殊的情况下(更改数组中的数据时，数组已经更改，但是视图没有更新)，watch无法监听数组的变化,更改数组必须要用splice()或者$set。 结论：
我们在计算开销比较大(计算次数多或者异步处理)的时候，会使用侦听器watch来得到计算结果。 而其他情况建议使用计算属性computed，因为缓存节省多次计算的性能。
