重学vue之computed计算属性

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

图片取自官方文档。
官方文档上面对computed的解释及使用场景看似简单清晰，但是在实际的开发中就会发现，我知道computed这是个计算属性，但是我什么时候用呢？像官方给的这个例子（分割、反转在拼接字符串），在实际开发的过程中，这个功能估计没人会用计算属性吧，一般都是在methods中处理好了直接用就完事了。在很长的一段时间里，我写的vue项目中从来没用过computed这个计算属性，以至于让我对这个属性产生了质疑。直到有一天项目中有个需求，让我第一体会到了这个属性的强大！

简单写了一个demo来讨论一下computed这个属性的用法

父组件

子组件

如图，父组件传递给子组件一个数组，子组件props接收到后又对传递过来的这个数组进行了修改。虽然控制台并没有报错，但我们都知道，这在vue中是不推荐的的。这时我们就可以使用computed这个计算属性，通过数组的concat()方法计算出一个新的值，以供这个子组件使用，这时我们无论再怎么修改子组件中的myList这个数据其父组件中的list都会保持原有数据！
当然，这个处理数组的方法也可以放在mounted中或者methods中，但是请记住一点！computed计算属性是基于它们的响应式依赖进行缓存的,以demo为例，也就是说只当父组件中的list发生改变的时候才会重新计算子组件中的mylist。当然这个例子中数组中只有2条数据，但是在真正的开发环境中，数组中的数据是比较多的，所以这里用computed计算属性还是比较合适的

计算属性的getter&setter

    computed:{
        //计算属性的简写方法，默认只有get函数，此函数必须有返回值作为初始值
        test(){
            reutrn xxx
        }
    }

    computed:{
       //计算属性的完整写法，get方法必须写，set方法需要的时候写(此时计算的属性需要写成对象形式)
       test:{
           get(){
               //获取当前test的值
               return xxx
           },
           set(val){
               //当test值发生改变时触发setter，val为改变后的值
           }
       }
      
    }