Vue3中的组合API:computed函数,watch函数_vue3如何用computed函数去监听一个对象的变化

一.计算属性:computed

1.计算属性中要有return

2.计算属性不能做异步操作,因为他是同步的,异步的不能通过返回值来被处理

3.如果使用修改数据set方法与读取数据get方法,computed({})中的参数需要是对象的形式,其中set会自动获取你设置的值,get中要有return,set中没有return

 1.基本使用的代码:

<template>
<h1>计算属性</h1>
<button @click="age = 28">点击</button>
<div>今年:{{age}}</div>
<div>明年:{{nextage}}</div>
</template>
 
<script>
import { ref, computed } from 'vue'
export default {
  name: 'App',
  setup () {
    const age = ref(18)
    const nextage = computed(() =>
      age.value + 1
    )
    return {
      age,
      nextage
    }
  }
 
}
</script>

set与get方法

<template>
<h1>计算属性</h1>
<button @click="age = 28">点击修改今年年龄</button>
<button @click="nextage = 40">点击修改明年年龄</button>
<div>今年:{{age}}</div>
<div>明年:{{nextage}}</div>
</template>
 
<script>
import { ref, computed } from 'vue'
export default {
  name: 'App',
  setup () {
    const age = ref(18)
    const nextage = computed({
      get () {
        return age.value + 1
      },
      set (v) {
        age.value = v - 1
      }
    })
    return {
      age,
      nextage
    }
  }
 
}
</script>

二.watch函数(侦听器)

侦听器:被真的信息变化时,触发侦听器的回调函数,

典型的场景:路由参数发生变化,重新调用用接口获取组件的数据

1.监听ref定义的响应式数据(简单数据类型用的多)

 

<template>
<h1>侦听器</h1>
<h2>{{count}}</h2>
<button @click="count += 1">点击</button>
</template>
 
<script>
import { ref, watch } from 'vue'
export default {
  name: 'App',
  setup () {
    const count = ref(0)
    watch(count, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    })
    return {
      count
    }
  }
}
</script>

2.监听reactive定义的响应式数据(复杂数据类型较多)

  注意:

1).监听对象中的某一个属性的时候watch里面要使用箭头函数指向对象中的属性

<template>
<h1>侦听器侦听对象</h1>
<h2>{{obj.info}}</h2>
<button @click="handlerClick">点击</button>
</template>
 
<script>
import { watch, reactive, toRefs } from 'vue'
export default {
  name: 'App',
  setup () {
    const obj = reactive({
      info: '中国',
      msg: '加纳'
    })
    const { info } = toRefs(obj)
    const handlerClick = () => {
      info.value = '中国加油'
    }
    // 监听对象中的某一个属性的时候watch里面要使用箭头函数指向对象中的属性
    watch(() => obj.info, (v, v2) => {
      console.log(v, v2)
    })
    return {
      obj,
      handlerClick
    }
  }
}
</script>

 2).监听整个对象的时候(如果想看新对象与旧对象的对比可以使用{...obj}浅拷贝来实现)

<template>
<h1>侦听器侦听对象</h1>
<h2>{{obj.info}}</h2>
<button @click="handlerClick">点击</button>
</template>
 
<script>
import { watch, reactive, toRefs } from 'vue'
export default {
  name: 'App',
  setup () {
    const obj = reactive({
      info: '中国',
      msg: '加纳'
    })
    const { info } = toRefs(obj)
    const handlerClick = () => {
      info.value = '中国加油'
    }
    // 监听obj整个的时候里面直接写,不用写函数的形式,否则不好使
    //   watch(obj, (v, v2) => {           // 前后对比的v与v2都是一个值,因为他是引用数据类型
    //   console.log('新值', v)
    //   console.log('旧值', v2)
    // })
    watch(() => { return { ...obj } }, (v, v2) => {   // 这是能够看到修改之后的前后对比
      console.log('新值', v)
      console.log('旧值', v2)
    })
    return {
      obj,
      handlerClick
    }
  }
}
</script>

 3).监听数值中的多个响应式数据

<template>
<h1>侦听器侦听数组</h1>
<h2>{{n1+"-----"+n2}}</h2>
<button @click="handlerClick">点击</button>
</template>
 
<script>
import { watch, ref } from 'vue'
export default {
  name: 'App',
  setup () {
    const n1 = ref(1)
    const n2 = ref(2)
    const handlerClick = () => {
      n1.value = '从1改变了其他的'
    }
    // 监听数组的时候,里面直接写也不用写成函数的形式
    watch([n1, n2], (v, v2) => {
      console.log(v)
      console.log(v2)
    })
    return {
      n1,
      n2,
      handlerClick
    }
  }
}
</script>

 4).监听正个数组

<template>
<h1>侦听器侦听数组</h1>
<!-- <h2>{{n1+"-----"+n2}}</h2>-->
<button @click="handlerClick">点击</button>
</template>
 
<script>
import { watch, reactive } from 'vue'
export default {
  name: 'App',
  setup () {
    const arr = reactive([1, 2])
    const handlerClick = () => {
      arr[0] = 2
    }
    // 监听数组的时候,里面直接写也不用写成函数的形式
    // watch(arr, (v, v2) => {
    //   console.log('新值:', v)
    //   console.log('旧值:', v2)
    // })
    // 这可以对比出数组的前后不一样的值,使用浅拷贝
    watch(() => [...arr], (v, v2) => {
      console.log('新值:', v)
      console.log('旧值:', v2)
    })
    return {
      arr,
      handlerClick
    }
  }
}
</script>

 3.使用参数(immediate,deep)

<template>
<h1>侦听器中的参数形式</h1>
<div>{{obj.friend.name}}</div>
<button @click="handlerClick">点击</button>
</template>
 
<script>
import { watch, reactive } from 'vue'
export default {
  name: 'App',
  setup () {
    const obj = reactive({
      n1: '哈哈',
      n2: '嘿嘿',
      friend: {
        name: '婷婷',
        age: 18
      }
    })
    const handlerClick = () => {
      obj.friend.name = '小明'
    }
    watch(() => obj.friend, (v, v2) => {
      console.log('忠于自己')
    }, { deep: true })
    return {
      obj,
      handlerClick
    }
  }
 
}
</script>