Vue3 setup的注意点及watch监视属性的情况有哪些

  export default {    name: "Demo",    beforeCreate(){      console.log('beforeCreate已执行');    },    setup() {      console.log('setup已执行');      let person = reactive({        name: "小明",        age: 20,      });      return {        person,      };    },  };

  export default {    name: "Demo",    props:['msg','age'],    setup(props) {      console.log(props);      let person = reactive({        name: "小明",        age: 20,      });         return {        person,      };    },  };

<template v-slot:qwe><span>123</span></template><template v-slot:ewq><span>321</span></template>

 console.log(context.slots); // 得到插槽

<Demo @hi="Hello" msg="山鱼" age=10></Demo>

  setup() {    function Hello(){      console.log('你好！');    }    return {      Hello    }  }

 function point(){        context.emit('hi',666)      }     5TgxPT2v-1681788304084)]```js function point(){        context.emit('hi',666)      }

import { reactive,computed} from "vue";  export default {    name: "Demo",    setup() {      let person = reactive({        firstName: "小",        lastName: "明",      });       // 计算属性的简写形式，不考虑修改，是只读的      /*person.fullName= computed(()=>{        return person.firstName+'-'+person.lastName      }) */      // 计算属性的完整形式（可以读改）      person.fullName= computed({        get(){          return person.firstName +'-'+person.lastName        },        set(value){          const arr = value.split('-')          person.firstName = arr[0]          person.lastName = arr[1]        }      })      return {        person,      };    },  };

    watch(sum, (newvalue, oldvalue) => {      console.log('当前值为'+newvalue, '以前值为'+oldvalue);    });

        watch([sum,msg], (newvalue, oldvalue) => {      console.log('当前值为'+newvalue, '以前值为'+oldvalue);    });

             watch(person,(newValue, oldValue) => {                console.log('person变化了',newValue,oldValue)             })

            watch(()=>person.name,(newValue,oldValue)=>{               console.log('person.name发生了变化',newValue,oldValue)           })

watch([()=>{person.age},()=>{person.name}],(newValue,oldValue)=>{                console.log('person.name发生了变化',newValue,oldValue)            })

 watch(()=>person.job,(newValue,oldValue)=>{                console.log('person.name发生了变化',newValue,oldValue)            }, {deep: true})