[JavaScript知识库]计算属性computed和监视属性watch的区别

计算属性和监视属性的区别

计算属性(computed)
定义：要用的属性不存在，得通过data中已有的属性计算得来
原理：底层通过Object.defineproperty方法提供的getter和setter
computed中可以分为getter和setter，一般情况下是没setter
get函数什么时候执行

1. 初次读取计算属性时会执行一次
2. 当依赖的数据发生改变时会被再次调用
   优点：内部有缓存机制，可复用，效率高，调式方便
   注意：如果计算属性要被修改，必须写set函数去响应修改

<div id="root">
   姓：<input type"text" v-model="lastName"/><br/>
   名：<input type"text" v-model="firtName"/><br/>
   姓名：<p>{{fullName}}</p>
</div>

<script>
    new Vue({
      el:'#root',
      data:{
        lastName:"张",
        firtName:"三"
      },
      computed:{
        fullName:{
          get(){
            return this.lastName+ '.' + this.firtName
          }
          set(value){
            let arr = value.split('.')
            this.firtName = arr[1]
            this.lastName = arr[0]
          }
        }
      }
    })
</script>

如果计算属性被多次调用，打开控制台发现get函数只会执行一次，因为computed有缓存

<div id="root">
   姓：<input type"text" v-model="lastName"/><br/>
   名：<input type"text" v-model="firtName"/><br/>
   姓名：<p>{{fullName}}</p>
   姓名：<p>{{fullName}}</p>
   姓名：<p>{{fullName}}</p>
   姓名：<p>{{fullName}}</p>
</div>

<script>
    new Vue({
      el:'#root',
      data:{
        lastName:"张",
        firtName:"三"
      },
      computed:{
        fullName:{
          get(){
            console.log("fullName执行一次")
            return this.lastName+ '.' + this.firtName
          }
          set(value){
            let arr = value.split('.')
            this.firtName = arr[1]
            this.lastName = arr[0]
          }
        }
      }
    })
</script>

如果没有对计算属性进行修改（只读取不修改），可以简写为

computed:{
  //简写 function(){}相当于get函数
  fullName:function(){
      return this.lastName+ '.' + this.firtName
  }
}

监视属性(watch)
当监视的属性变化时，回调函数自动调用，进行相关操作
监视属性必须存在，才能进行监视
监视有两种写法：
1. new Vue时传入watch配置
2. 通过vm.$watch监视

<div id="root">
  <p>今天心情{{result}}</p>
  <button @click="changeData">切换</button>
</div>

<script>
   const vm = new Vue({
      el:'#root',
      data:{
        isGood:true,
      },
      computed:{
		 result(){
		     return this.isGood ? '很好': '很不好'
		 }
	  },
	  //第一种写法
      watch:{
        isGood:{
          immediate:true,//是否立即执行，初始化时调用handler一次
          //监视属性发生变化时，handler函数被调用
          handler(newValue,oldValue){
            console.log(newValue,oldValue)
          }
        }
      }
    })
    //第二种写法
    vm.$watch('isGood',{
      immediate:true,//是否立即执行，初始化时调用handler一次
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    })
</script>

深度监视

• vue中watch默认不监视对象内部属性的变化
• 配置deep为true，可以监视对象内部属性的变化

<div id="root">
  <p>a的值是{{number.a}}</p>
  <button @click="add">a+1</button>
   <br/>
  <hr/>
  <br/>
  <p>b的值是{{number.b}}</p>
  <button @click="add">b+1</button>
</div>

<script>
   const vm = new Vue({
      el:'#root',
      data:{
        number:{
          a:1,
          b:1
        }
      },
      watch:{
      //监视多级结构的某个属性变化
        /**'number.a':{
          immediate:true,//是否立即执行，初始化时调用handler一次
          handler(newValue,oldValue){
            console.log(newValue,oldValue)
          }
        }**/
        number:{
           //监视多级结构中所有属性的变化
           deep:true,
           handler(){
            console.log('number改变了')
          }
        }
      }
    })
</script>

computed和watch区别：
computed：有缓存机制；不能接受参数；不能与data中的属性重复
watch：没有缓存机制；可接受两个参数；监听属性必须存在；可进行异步操作

//computed写法
<div id="root">
   姓：<input type"text" v-model="lastName"/><br/>
   名：<input type"text" v-model="firtName"/><br/>
   姓名：<p>{{fullName}}</p>
</div>

<script>
    new Vue({
      el:'#root',
      data:{
        lastName:"张",
        firtName:"三"
      },
      computed:{
      //fullName监听属性不存在
        fullName(){
        //这样写法不行 computed不可以进行异步操作
         setTimeout(()=>{
            return this.lastName+ '.' + this.firtName
          },1000)   
          /**return this.lastName+ '.' + this.firtName**/
        }
      }
    })
</script>
//watch写法 监听属性必须存在
<div id="root">
   姓：<input type"text" v-model="lastName"/><br/>
   名：<input type"text" v-model="firtName"/><br/>
   姓名：<p>{{fullName}}</p>
</div>

<script>
    new Vue({
      el:'#root',
      data:{
        lastName:"张",
        firtName:"三",
        fullName:"张.三"
      },
      watch:{
        firtName(newValue){    
          //watch可以进行异步操作
          setTimeout(()=>{
          //fullName 监听属性必须存在
            this.fullName = this.lastName+ '.' + newValue
          },1000)     
        },
        lastName(newValue){    
          setTimeout(()=>{
             this.fullName = newValue + '.' + this.firtName
          },1000)      
        }
      }
    })
</script>