Vue3--computed计算属性与watch侦听器的使用

在setup函数中使用计算属性函数

根据现有响应式数据经过一定的计算得到全新的数据
有两种方式:

方式一:

import {computed} from 'vue'
export default {
  setup() {
    const filterList = computed(() => {
      return ... //return 计算后的值
    })
    return {
      filterList
    }
  }
复制代码

方式二:

import {computed} from 'vue'
export default {
  setup() {
    const filterList = computed({
      get(){//设置值
          return 计算后的值
      },
      set(val){//获取值 val就是filterList的当前状态
      }
    })
    return {
      filterList
    }
  }
复制代码

注意:要从vue实例中引入computed

在setup函数中使用watch侦听器

基于响应式数据的变化执行回调逻辑，和vue2中的watch的功能完全一致

使用步骤

1. 从vue框架中导入watch函数

import { ref,watch } from 'vue'
复制代码

2. 在setup函数中执行watch函数开启对响应式数据的监听

export default {
  setup() {
    const age = ref(18)
    watch(() => {
      // 返回你想要监听的响应式属性(ref产生的对象必须加.value)
      return age.value
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    })
    return {
      age
    }
  }
复制代码

3. watch函数接收三个常规参数:(第一个参数为函数，返回你要监听变化的响应式数据,第二个参数为响应式数据变化之后要执行的回调函数,第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听)

export default {
  setup() {
    const age = ref(18)
    watch(() => {
      // 返回你想要监听的响应式属性(ref产生的对象必须加.value) 监听谁,返回谁
      return age.value
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    },{
    immediate: true, // 页面进入就执行一次监听
    deep:true // 开启深度监听
    })
    return {
      age
    }
  }
复制代码

使用watch的时候，尽量详细的表明你到底要监听哪个属性，避免使用deep引起的性能问题,如:监听多个对象嵌套的属性: return obj.obj.item 详细指定到具体侦听的属性