Vue中的计算属性

计算属性

意义：模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板变得简洁易于维护。计算属性是基于他们的响应式进行缓存的。适合多个变量或对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生的变化，则我们监控的这个值也就会发生变化

:属性=“表达式”

动态绑定属性，一般不建议在模板中写太多的业务逻辑

-> 建议写在计算属性中 computed配置中

computed最终还是映射到data数据源中 -> 在模板中调用就和data中属性调用是一样的

aa => data{aa} ==> this.aa ==> 计算属性它虽然绑以data中，但它不能直接去修改 =》 defineProperty

计算属性它是具有缓存，如果它里面的依赖项没有发生改变，则在下一次调用时，会走缓存数据

-> 脏检查[dirty] -> 读取数据时，加一个标识位，如果这个标识位为true,则走缓存，为false，重新计算

-> 缓存机制LRU[least recently used-最近最少使用算法]

-> 计算属性它一般多用于，模板中使用，一不会在js中用去

-> 把原本写在视图代码中的运算，提取到js代码中来完成，而且多次调用，只要依赖项没有改变，它还有缓存

-> 计算属性中不能写异步：它要收集依赖项，如果是异步，则完成收集到

-> 计算属性在初始时，不会自动进行数据劫持，它只会在调用后才进行 lazy字符来解决

举个栗子

【html】

  <div id="app">
    
    
    <hr>
    
    
    <hr>
    
    <div>{{sum}}div>  //计算
    <div>{{sum}}div>  //调用缓存
    <h3>{{msg}}h3>
    <hr>
    <button @click="getComputedSum">获取计算属性中的数据button>
  div>

【js】

    const app = new Vue({
      el: '#app',
      data: {
        n1: 1,
        n2: 2,
        msg: ''
      },
      // 计算属性
      computed: {
        // 它必须要有返回值，不支持异步,多用模板中使用
        // 简写,它只用到了Object.definedProperty中的get方法，此方法注定，计算不能直接赋值，否则报错
        // sum() {
        //   console.log('sum')
        //   return this.n1 + this.n2
        // }
        // 计算属性是不可以通过赋值来直接修改，但它可以接受你赋值
        sum: {
          get() {
            return this.n1 + this.n2
          },
          set(newValue) {
            // console.log(newValue);
            this.n1 = newValue
            if (newValue > 2) {
              this.msg = '小样值大了'
            }
          }
        }
      },
      methods: {
        // sum() {
        //   console.log('sum');
        //   // this.n1,this.n2就是当前计算方法的依赖项
        //   return this.n1 + this.n2
        // }
        getComputedSum() {
          // console.log(this.sum);
          this.sum = 100
        }
      }
    })