Propiedades computadas calculadas de Vue3 (análisis de código fuente)

Uso flexible de los atributos informáticos calculados de vue3 (análisis de código fuente)

• Siempre que se utilice para realizar algún procesamiento complejo de los datos en los datos, se realizará.
• Las operaciones complicadas en los datos pueden almacenar en caché los resultados de las operaciones (ejecutadas solo una vez en varios lugares) para ahorrar recursos
• Evite usar la misma lógica en varios lugares para provocar la duplicación del código, lo que reducirá la legibilidad y la capacidad de mantenimiento del código.

computed使用

//使用方法1
computed:{
    
    
  handleName(){
    
    
    return this.name + this.number
  }
}
//使用方法2
methods:{
    
    
  setHandleName(){
    
    
    this.handleName="xxxxxxx"
  }
}
computed:{
    
    
  handleName:{
    
    
    get(){
    
    
      return this.name + this.number
    },
      //newValue  xxxxxxx
    set(newValue){
    
    
        //对newValue 做一些处理  茹改变data中的值
      }
  }
}

computed vu3 部分源码

//computed 源码
//从组件options中解构出来的 computed=> computedOptions
  if (computedOptions) {
    
    
    //循环computedOptions  从中拿到每个计算属性 并进行处理
    for (const key in computedOptions) {
    
    
      //将当前计算属性赋值给opt
      const opt = (computedOptions as ComputedOptions)[key]
      //判断 当前计算属性是否是一个方法  如果是  那么就将当前opt bind publicThis  如果不是  那么就是一个对象 将opt.get也bind上  publicThis并返回
      const get = isFunction(opt)? opt.bind(publicThis, publicThis): isFunction(opt.get)? opt.get.bind(publicThis, publicThis): NOOP
      //如果不是方法 也不是一个对象   那么就提示warn
      if (__DEV__ && get === NOOP) {
    
    
        warn(`Computed property "${
      
      key}" has no getter.`)
      }
      //再判断当前的set   道理同上
      const set =
        !isFunction(opt) && isFunction(opt.set)
          ? opt.set.bind(publicThis)
          : __DEV__
          ? () => {
    
    
              warn(
                `Write operation failed: computed property "${
      
      key}" is readonly.`
              )
            }
          : NOOP
      //将computed 的get set 属性加入响应式系统中
      const c = computed({
    
    get,set})
      Object.defineProperty(ctx, key, {
    
    
        enumerable: true,
        configurable: true,
        get: () => c.value,
        set: v => (c.value = v)
      })
      if (__DEV__) {
    
    
        checkDuplicateProperties!(OptionTypes.COMPUTED, key)
      }
    }
  }