computed是什么

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

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

• 属性名称:计算机属性的名称

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

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

  在两个地方使用:

• 模板

  • 用插值表达式{{计算属性名}}
  • 用其他指令

• 在实例内

  • this.计算属性名 示例

  <div id="app">
    <!-- 逻辑复杂 -->
    <h3>{{msg.split('').reverse().join('')}}</h3>
    <!-- 计算属性 和data类似-->
    <h3>{{reverseMsg}}</h3>
  </div>
  <script src="./vue.js"></script>
  <script>
     {
      data () {
        return { msg: 'hi vue' }
      },
      // 声明计算属性
      computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        reverseMsg () {
          // 对依赖的数据进行处理，且进行return
          return this.msg.split('').reverse().join('')
        }
      }
    })
  </script>

在模板中使用计算属性,和使用data方式是一样的.

• 虽然在计算属性中声明的是函数,但是在模板中使用,当中数据来使用,不需要加括号. 总结
• 什么时间用computed:需要对数据进行复杂的逻辑加工,产生新的数据时
• 定义:就是一个特殊的配置项,其中可以写多个函数.
• 使用:计算属性的使用方式与data中
  • 计算属性-计算:这个值是对原数据进行计算后得到的新的数据.
  • 计算属性-属性:它的使用方法与原数据一样.this.计算属性名,{{计算属性名}}
• 执行的实际:如果计算属性中依赖的数据项变化是,它会自动调用 补充

当面试官问,当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果是,我们有两种解决方案:

• 计算属性
• 函数 我们应该怎么选择.

这时我们要说出两种属性的作用.

• methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
• computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。

  computed有缓存

  • 计算属性有缓存,提高渲染性能.
  • 如果在页面上需要用到,对现有的数据进行加工得到新数据,这是要使用计算属性.

计算属性完整写法

语法:

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}