关于vue3 语法糖的一些写法记录

目录

watch

onMounted

---

watch

• 子组件监听多个值，并进行不同操作
• 子组件监听多个值，进行相同操作
• 子组件监听一个值

<template>
  <div>
    <p>{
   
   { value1 }}</p >
    <p>{
   
   { value2 }}</p >
    <p>{
   
   { value3 }}</p >
  </div>
</template>

<script>
import { watch, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      value1: 'Value 1',
      value2: 'Value 2',
      value3: 'Value 3',
    })
    //第一种
    watch(
      [() => state.value1, () => state.value2, () => state.value3],
      ([newValue1, newValue2, newValue3], [oldValue1, oldValue2, oldValue3]) => {
        console.log('Value 1 changed from', oldValue1, 'to', newValue1)
        console.log('Value 2 changed from', oldValue2, 'to', newValue2)
        console.log('Value 3 changed from', oldValue3, 'to', newValue3)

        // 根据不同的值执行不同的操作
        if (newValue1 === 'New Value 1') {
          // do something for value1
        }

        if (newValue2 === 'New Value 2') {
          // do something for value2
        }

        if (newValue3 === 'New Value 3') {
          // do something for value3
        }
      },
      { deep: true }
    )
    //第二种
    watch([() => props.value1, () => props.value1], (newValue, oldValue) => {
      //do something 
    })
    //第一种
    watch(
      () => props.value1,
          (newValue, oldValue) => {
            // do something 
          }
        )




    return {
      ...state,
    }
  },
}
</script>

onMounted

onMounted(() => {
  init()
})