Vue中的监视属性watch和计算属性computed

1.watch

watch监听的是已经在data中定义的变量，当该值发生变化时，会触发watch中监听该属性的方法。

//基本语法：
watch:{
   attr(newVal, oldVal) {
        xxxxx
    }
}

简单写法示例：

---

<template>
  <div id="app">
    <h1>真的吗？--->{{isTruth ? '真的': '假的'}}</h1>
    <button @click="changetruth">切换真假</button>
  </div>
</template>

<script>

export default {
  data() {
      return {
        isTruth:true
      }
  },
  methods:{
    changetruth() {
      //改变isTruth的值
      this.isTruth = !this.isTruth
    }
  },
  watch: {
    //监视isTruth值的变化
    isTruth(newVal, oldVal) {
      console.log(`isTruth从${oldVal}被修改成${newVal}了`)
    }
  }
}
</script>

点击按钮后：isTruth由true变为false

 

初始化时监视一次：immediate：true

watch: {
    //监视isTruth值的变化
    isTruth: {
      immediate:true,
      handler(newVal, oldVal) {
        console.log(`isTruth从${oldVal}被修改成${newVal}了`)
      }
    }
  }

 不用点击按钮操作，立即执行一次监视方法

深度监视：deep:true，针对于引用类型的数据

<template>
  <div id="app">
    <p>a的值是：{{numbers.a}}</p>
    <button @click="numbers.a++">让a+1</button>
    <p>d的值是：{{numbers.c.d}}</p>
    <button @click="numbers.c.d++">让d+1</button>
  </div>
</template>

<script>

export default {
  data() {
      return {
        numbers:{
          a:1,
          b:1,
          c: {
            d:100
          }
        }
      }
  },
  watch: {
    numbers:{
      handler(newVal) {
        console.log('numbers发生变化了')
        console.log(newVal)
      }
    }
  }
}
</script>

上述代码没有加上deep属性，默认为false，对象的属性值发生变化时，watch并没有去监测到变化，现在把deep加上

watch: {
    numbers:{
      deep: true,
      handler(newVal) {
        console.log('numbers发生变化了')
        console.log(newVal)
      }
    }
  }

 2.computed

计算属性在data对象中不存在，定义的这个值依赖于其他值，当所依赖的值发生变化时或者变量发生变化，计算属性也会跟着变化，计算属性最终也会出现在vm中，直接可以读取使用即可，底层也是借助了Object.defindProperty()提供的getter和setter

computed的简化写法：

<template>
  <div id="app">
     姓：<input type="text" v-model="lastName" />
     名：<input type="text" v-model="firstName" />
    全名：<span>{{fullName}}</span>
  </div>
</template>

<script>

export default {
  data() {
      return {
        firstName:'三',
        lastName:'张'
      }
  },
  computed: {
    fullName() {
      return this.lastName + '-' + this.firstName
    }
  }
}
</script>

使用get()、set()方法完成属性计算：

<template>
  <div id="app">
     姓：<input type="text" v-model="lastName" />
     名：<input type="text" v-model="firstName" />
     <br />
     修改全名：<input type="text" v-model="fullName" />
    全名：<span>{{fullName}}</span>
  </div>
</template>

<script>

export default {
  data() {
      return {
        firstName:'三',
        lastName:'张'
      }
  },
  computed: {
    fullName: {
      //get在初次读取fullName和依赖的值发生变化时触发
      get() {
        console.log('get被调用')
        return this.lastName + '-' + this.firstName
      },
      //set在fullName改变的时候被调用
      set(value) {
          console.log('set', value)
          const name = value.split('-')
          this.lastName = name[0]
          this.firstName = name[1]
      }
    }
  }
}
</script>

 

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

1.值本身是否存在：computed要计算的属性本身不存在，但是依赖于其他值；watch要监视的属性已经在data中定义，当该值发生变化时，会触发监视对象中的handler方法

2.是否有返回值：computed最终要返回一个值供给外部使用，而watch不需要返回值