vue03

Vu03

计算属性 Computed

计算属性主要是用于对各个状态之间进行运算，数据过滤的一种处理

<input v-model="name">
<input v-model="version">
<h1>{{  name + version }}</h1>  //运算结果直接拼接
<h1>{{  getFullAppVersionName() }}</h1>  //函数
<h1>{{  fullAppVersionName }}</h1>  //计算属性

<script>
  export default {
    data(){
      return {
        name : "",
        version : ""
      }
    },
    methods : {
      getFullAppVersionName(){
         return this.name + this.version
      },
      fn(){
         //方法内部可以直接通过this.访问计算属性
         console.log(this.fullAppVersionName)
      }
    },
    computed : {
      fullAppVersionName(){
        return this.name + this.version
      }
    }
  }
</script>

计算属性 VS 方法&视图表达式

计算属性是具有数据缓存的，当其依赖的状态没有发生变化时，计算属性是不会调用求值的。方法&视图表达式每次都会进行求值，并更新视图

计算属性的完整写法

<input v-model="name">
<input v-model="version">
<input v-model="fullAppVersionName">

<script>
  export default {
    data(){
      return {
        name : "",
        version : ""
      }
    },
    
    computed : {
      fullAppVersionName:{
        get(){
          //计算属性被读取时调用
           return this.name + this.version ;
        },
        set(val){
           //计算属性被赋值时调用
           this.name = val.split('v')[0]
           this.version = val.split('v')[1]
        }
      }
    }
  }
</script>

watch 数据监听

允许我们对任意一个已经注册过的状态，进行监听，如果状态值发生变化，可以进行回调处理

<span>价格： {{ price }}</span>
<input v-model.number.lazy="count">
<span>总价格：{{ totalPrice }} </span>

<script>
  export default {
    data(){
      return {
         price : 123,
         count  : 0,
         totalPrice : 0,
      }
    },
    watch : {
      count(){
        //当count值发生变化时，该方法就会被回调
        this.totalPrice = this.price * this.count
      }
    }
  }
</script>

watch VS computed

• 共同点： 都是在基于状态的变化，而触发一个函数的回调
• 区别
• watch 是一个单纯的监听回调函数，因此内部可以写异步操作，而computed是利用函数的返回值作为计算属性值的。只能是同步过程

   export default {
      data(){
        return {
          count : 10
        }
      },
      watch : {
         //监听count变化
         count(){
            setTimeout(()=>{
                this.count++
            },3000)
         }
      },
      computed : {
          //新增计算属性
          countA(){
             setTimeout(()=>{
               //这样写是无法实现的
               this.countA =  this.count++
            },3000)
          }
      }
   }

• watch一次是只能监听一个值的变化， 计算属性任何一个状态变化，都会触发运算
• 面对复杂多状态运算结果的情况下，使用计算属性代码更简洁

<span>价格：<input v-model.number.lazy="price">  </span>
<input v-model.number.lazy="count">
<span>总价格：{{ totalPrice }} </span>
<span>总价格：{{ cTotalPrice }} </span>

<script>
  export default {
    data(){
      return {
         price : 123,
         count  : 0,
         totalPrice : 0,
      }
    },
    watch : {
      count(){
        //当count值发生变化时，该方法就会被回调
        this.totalPrice = this.price * this.count
      },
      price(){
        //当count值发生变化时，该方法就会被回调
        this.totalPrice = this.price * this.count
      }
    },
    computed: {
      //计算属性更简洁
        cTotalPrice(){
           return this.price * this.count 
        }
    }
  }
</script>

对于多状态变化且同步的运算，使用计算属性
对于单状态，或监听状态变化后有异步操作业务的，使用watch

watch 完整写法 & 深度监听

   export default {
       data(){
         return {
            obj : {
               name : "李雷",
               age  : 12
            }
         }
       },
       watch : {
         //监听obj的name属性
         "obj.name" : {
           handler(newVal, oldVal){
              //newVal：是变化后的值
              //oldVal: 是变化前的值
              
           }
         },
         //直接监听对象
         obj : {
            handler(newVal,oldVal){
               
            },
            deep : true //开启深度监听
         }
          
       }
   }