Vue之路之--计算属性

先说说对官网上“计算属性”的理解：

为啥要利用计算属性?

是为了来应对复杂计算的挑战，一般情况下，对于简单的模板，因为逻辑比较简单，所以就直接用就行了，但是如果要对模板中的表达式做复杂的处理，而且要用到多个地方，如果直接写将会很复杂，而且也不利于维护，所以“计算属性”就是为了解决这个问题而生的（个人观点）

先看代码：Html部分

<div class="container" id="containBox"><span style="color: green">{{datas}}</span><!-- 你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.slicefun 依赖于 vm.greetings ，因此当 vm.greetings 发生改变时，所有依赖于 vm.slicefun 的绑定也会更新。 --><h2 style="color: red">{{slicefun}}</h2><!-- 如果不加（），那么将会导致报错，所以......,从另一方面讲，methods中定义的都是方法呢，方法只有在执行的时候才会生效 --><h3>{{slicefunction()}}</h3><a href="">{{date-111111111111111111111111111}}</a></div>

JS部分

var vm =  new Vue({el:"#containBox",data:{datas:"这就是我，不一样的花朵！",greetings:"hello,Vuejs,it is my pleaure to meet you!"},methods:{slicefunction:function(){return this.greetings.toUpperCase()}},//声明了一个计算属性slicefun，computed:{slicefun:function(){// return this.greetings.toUpperCase()return this.greetings.toUpperCase()},date:function(){return Date.now()}}})

"你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.slicefun 依赖于 vm.greetings ，因此当 vm.greetings 发生改变时，所有依赖于 vm.slicefun 的绑定也会更新。"

 Vue 知道 vm.slicefun 依赖于 vm.greetings，  因为在slicefun里面有greetings，所以会有依赖；

"不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要greetings'，还没有发生改变，多次访问slicefun 计算属性会立即返回之前的计算结果，而不必再次执行函数。而methods是运行一次计算一次，

关于计算属性和methods，根据官网的总结，如果你不想想用缓存，那就请用method，如果你想用缓存，那就请用计算属性

利用缓存，我们可以提高写性能，尤其是在处理大量计算的时候更是如此，利用缓存我们也许只需要计算一次，但是不利用缓存我们就需要每次都计算，这样就严重影响了前端性能；

其实，在这里，你会发现其实这个时候，这个时候的compute好像有局限性--那就是只能返回（get），不能设置（set），然而在现实的应用中，更多的是返回和设置共存的，这里也就要谈到计算属性里面的getter和setter了；

其实，compute中的getter就是用来确定计算属性的值到底是多少，而setter就是来设置的，setter的回调函数在计算属性发生改变的时候才会调用，

以下是具体的案例：

<i>{{fullname}}</i><span>{{firstname}}</span><span>{{lastname}}</span><br><h4>{{fullname1}}</h4>

JS部分

computed:{slicefun:function(){// return this.greetings.toUpperCase()return this.greetings.toUpperCase()},date:function(){return Date.now()},fullname:{// setter,当fullname发生改变的时候触发set:function(val){console.log(val)// 在set函数中，形参代表着fullname的新值var names =  val.split(" ");this.firstname = names[0];this.lastname = names[names.length-1]},// getter，这里是用来确定fullname的值到底是谁的，当fullname发生改变的时候之所以{{fullname}}会发生改变，// 主要就是因为fullname发改变会触发set函数，导致this.firstname 和 this.lastname发生改变，所以在get函数中，// 就会导致name1发生改变，最终导致返回值改变，fullname也就发生了改变get:function(){//console.log(name1)var name1  =  this.firstname + " " + this.lastnamereturn name1}},//在刷新的时候会正常的返回fullname，但是在改变fullname1的时候，就会报错，因为没有setter，就不知道该如何处理this.datas//所以当然也就返回不了datas了fullname1:function(){return this.datas;}}

Vue 通过 watch 选项提供一个更通用的方法，来响应（监控）数据的变化。

先上实例吧：

<div id="VueRooter"><span>{{str}}</span><input type="text" name="" v-model = "str"><!-- 由于双向绑定，所以当输入框中的发生变化的时候就会导致num发生变化，进而触发num的监控函数changestr --><br><h1>{{num}}</h1><input type="text" name="" v-model = "num"><!-- 同理 --><br><h2>{{obj.tel}}</h2><input type="text" name="" v-model = "obj.tel"><!-- 同理 --><br><i>{{book}}</i><input type="text" name="" v-model = "book"><!-- 同理 --></div>

JS部分

var vm = new Vue({el:"#VueRooter",data:{str:" hello VueJS！",num:5,judge:true,obj:{tel:[phone]},book:"这是一本好书"},methods:{changeNum:function(){return this.num-3},changestr:function(val,oldVal){console.log(val,oldVal)}},/*Vue 通过 watch 选项提供一个更通用的方法，来响应（监控）数据的变化。*/watch:{// 监控str这个表达式，当其发生变化的时候执行changestr这个方法，这个方法是定义在methods里面的str:"changestr",// 监控num表达式，当其发生变化的时候执行回调函数，其中的形参val，代表变化后的值，old代表变化前的值num:function(val,oldval){var str =  "新的数字是:"+ val +"旧的数字是:"+oldval// return str;console.log(str)},// 监控对象中的表达式tel的变化，注意不能写成obj.tel,会报错的"obj.tel":function(val,oldVal){console.warn("change!")},// 监控bookbook:{// 是否是深度，说实话不怎么理解什么意思deep:true,// 变化的时候要做的事情，一定是handler，不能随意命名handler:function(val,oldval){console.log("我是新的"+val,"我是旧的"+oldval)}}}})//vm.str = "dadadadasdasdsada"

怎么感觉计算属性好像是对表达式（数据）的进一步加工，而watch则更偏重于监控表达式的变化