Vue中的computed属性

看了网上不少资料，对vue的computed讲解本身看的都不是很清晰，今天忙里抽闲，和同事们又闲聊起来，对computed这个属性才有了一个稍微比较清晰的认识，下面的文章有一部分是转自： https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com，

感受这篇文章上面的例子通俗易懂，因此此处借用了。

本身的理解：

• computed用来监控本身定义的变量，该变量不在data里面声明，直接在computed里面定义，而后就能够在页面上进行双向数据绑定展现出结果或者用做其余处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则咱们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减小或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

与watch之间的区别：

　　刚开始老是傻傻分不清到底在何时使用watch，何时使用computed。这里大体说一下本身的理解：

• watch主要用于监控vue实例的变化，它监控的变量固然必须在data里面声明才能够，它能够监控一个变量，也能够是一个对象，可是咱们不能相似这样监控，好比：

watch:{
goodsList.price(newVal,oldVal){
    //监控商品列表中是商品价格
}
}

data(){
　　　　　　　　return {
　　　　　　　　　　example0:"",
　　　　　　　　　　example1:"",
　　　　　　　　　　example2:{
 　　　　　　　　　　　　inner0:1, 　　　　　　　　　
                        　　　innner1:2 　　　　　　　　　
                    　}
　　　　　　}
　　　　},
watch:{
　example0(newVal,oldVal){//监控单个变量
           ……
   }，
example2(newVal,oldVal){//监控对象
           ……
   }，
}

• watch通常用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据

如下内容是摘自https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com：

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，而且只在须要时更新。

在Vue中有多种方法为视图设置值：

• 使用指令直接将数据值绑定到视图
• 使用简单的表达式对内容进行简单的转换
• 使用过滤器对内容进行简单的转换

除此以外，咱们还可使用计算属性根据数据模型中的值或一组值来计算显示值。

计算属性

计算属性容许咱们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在须要时更新。

例如，咱们能够在数据模型中有一个results数组：

假设咱们想要查看全部主题的总数。咱们不能使用filters或expressions来完成这个任务。

• filters：用于简单的数据格式，在应用程序的多个位置都须要它
• expressions：不容许使用流操做或其余复杂的逻辑。他们应该保持简单

这个时候，计算属性就能够派上用场。咱们能够向模型中添加一个计算值，以下：

效果以下：

计算属性 vs 方法

咱们可使用Vue中的method计算出学科的总分，最终获得的总数结果是相同的。

在上例的基础上，咱们把computed区块中的totalMarks函数总体移到methods中。同时在模板中将{{ totalMarks }} 替换成{{ totalMarks() }}。 你最终看到的结果是同样的，以下所示：

虽然这两种方式输出的结果是相同的，可是性能将遭受毁灭性的打击。使用这种方法totalMarks()方法在每次页面渲染时都被执行一次（例如，使用每个change）。

若是咱们有一个计算属性，那么Vue会记住计算的属性所依赖的值（在咱们这个示例中，那就是results）。经过这样作，Vue只有在依赖变化时才能够计算值。不然，将返回之前缓存的值。这也意味着只要results尚未发生改变，屡次访问totalMark计算属性会当即返回以前的计算结果，而没必要再次执行函数。

上面两个示例也说明，在Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。

这也一样意味着下面的计算属性将再也不更新，由于Date.now()不是响应式依赖：

相比之下，每当触发从新渲染时，方法的调用方式将老是再次执行函数。所以，函数必须是一个纯函数。它不能有反作用。输出只能依赖于传递给函数的值。

那么咱们为何须要缓存？假设咱们有一个性能开销比较大的的计算属性A，它须要遍历一个极大的数组和作大量的计算。而后咱们可能有其余的计算属性依赖于 A 。若是没有缓存，咱们将不可避免的屡次执行 A 的 getter！若是你不但愿有缓存，请用方法来替代。

计算属性的setter

计算属性默认只有getter，不过在须要时你也能够提供一个setter

效果以下：

你在输入框中输入一个fullName，而后点击set按钮，能够看到对应的效果。你如今再运行app.fullName="Airen liao"时，计算属性的setter会被调用，app.firstName和app.lastName也相应地会被更新。以下图所示：

观察者：

虽然计算属性在大多数状况下更合适，但有时候也须要一个自定义的watcher。这是为何Vue经过watch选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操做或开销较大的操做，这是颇有用的。

Vue确实提供了一种更通用的方式来观察和响应Vue实例上的数据变更：watch属性。当你有一些数据须要随着其它数据变更而变更时，你很容易滥用watch。然而，一般更好的想法是使用计算属性而不是命令式的watch回调。好比下面的示例：

上面代码是命令式的和重复的。将它与计算属性的版本进行比较：

 

 

假设咱们想要查看全部主题的总数。咱们不能使用filters或expressions来完成这个任务著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

除此以外，咱们还可使用计算属性根据数据模型中的值或一组值来计算显示值。著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

在Vue中有多种方法为视图设置值：

• 使用指令直接将数据值绑定到视图
• 使用简单的表达式对内容进行简单的转换
• 使用过滤器对内容进行简单的转换

除此以外，咱们还可使用计算属性根据数据模型中的值或一组值来计算显示值。

著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，而且只在须要时更新。著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，而且只在须要时更新。著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，而且只在须要时更新。著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com

天天将本身工做和学习中遇到的问题和好的方法写下来，做为积累，养成一个好习惯，今后刻开始~