vue 3 中watch 与 computed 常用方法

export default defineComponent({
  name: 'HeaderForm',
  setup(props, { emit }) {
    const num = ref(0)
    
   const dataRea = reactive({
      periodLists: [],
      form: {
        period: '',
        num: 0
      }
    })
    // 第一种 computed 简单写法
    const newNum = computed(() => {
    	// 注意 ref的值 在 value下
      return num.value + 5
    })
    
    // 第二种 computed 接收一个 set get方法
    const otherNum = computed({
      get: () => {
        return num.value + 8
      },
      set: (parmas) => {
        console.log('====parmas=::', parmas)
        num.value = parmas - 1
      }
    })

    setTimeout(() => {
      otherNum.value = 100
    }, 3000) // 1. 三秒后给 newName 赋值

	// watch 监听一个 ref，单个属性监听
	/**
	* watch 接收三个参数
	* 1、要监听的属性，
	* 2、一个函数，获取新旧 值
	* 3、执行操作的修饰符
	*/ 
    watch(num, (n, o) => {
      console.log('---num--n-: ', n)
      console.log('---num--o-: ', o)
    }, {deep: true, immediate: true})
    
    // watch 监听一个 reactive 下 某个对象的某个属性
    watch(() => dataRea.form.num, (newValue, oldValue) => {
      console.log('form.num =111=newValue--:', newValue)
      console.log('form.num =111=oldValue--:', oldValue)
    })
    // 监听多个 参数， 返回的新旧值 为 多个参数的数组 如：newValu: [0, 23]
    watch([() => dataRea.form.num, num], (newValue, oldValue) => {
      console.log('form.num =22=newValue--:', newValue)
      console.log('form.num =222=oldValue--:', oldValue)
    })

    return {
      ...toRefs(dataRea),
      ...toRefs(myMethods),
      formRef,
      formRule,
      num,
      newNum,
      otherNum
    }
  }
})

WX: xhangxuyang