vue计算属性

使用场景

如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。 例如：要对给定的字符串做翻转处理之后再来显示

<div id="app">
    <!-- 此处逻辑复杂 -->
    <h3>{{msg.split('').reverse().join('')}}</h3>
  </div>
  <script src="./vue.js"></script>
  <script>
    export default {
      data(){
        return  {
            msg: 'javascript'
          }
      }
    }
  </script>

定义格式

在vue实例中，补充computed配置项。

{
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }
    }
}

computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。

• 属性名称： 计算属性的名称

• 属性的值：计算属性的素材函数

• • 对需要依赖的数据，进行逻辑上的处理
  • 处理完毕后，需要return出去，返回的值就是计算属性的值

总结:

• 什么时间用：需要对数据进行复杂的逻辑加工，产生新的数据时。
• 定义： 就是一个特殊的配置项computed。其中有多个函数。
• 使用：计算属性的使用方式与data中的数据项一致；

• • 计算属性-计算：这个值是对原数据进行计算之后得到的新的数据
  • 计算属性-属性：它的使用方法与原数据一样。this.计算属性名,{{计算属性名}}

• 执行的时机： 如果计算属性中依赖的数据项变化时，它会自动调用。

计算属性有缓存，提高渲染性能。

• 如果在页面上需要用到 对现有的数据进行加工得到新数据，则时要使用计算属性