Vue3 生命周期，watchEffect监听属性

Vue3 生命周期需要先引入

    import {reactive,toRefs,toRef, ref,
    onBeforeMount, 
    onMounted,
    onBeforeUpdate,onUpdated
    } from 'vue'
    /* 
    toRef
    如果想单独使用对象上的属性，不能直接赋值，因为这样会失去和对象的双向数据绑定关系，怎么解决?
    使用toRef(对象，"字符串属性名')包裹一下，才可以建立和对象之间的联系
    例如----name:toRef(obj,'name'),

    toRefs
    如果涉及到多个属性，可以使用toRefs，
    在return 中使用...toRefs的方式把属性结构出来即可
     */
    export default {
      setup(){
        /* shallowReactive 只针对对象的第一层数据，再往下就不能实现数据的双向绑定了 (stu.no不进行数据绑定) */
        /* 有点减少性能消耗 */
        const obj =reactive({
          name:'张三',
          age:30,
          stu:{
            no:9555
          }

        })
          let flag=ref(true)


        /* Vue3生命周期 */
        /* Vue3中的挂载前 */
        onBeforeMount(()=>{
          console.log('挂载前onBeforeMount');
        })
        /* Vue3中的挂载后 */
        onMounted(()=>{
          console.log('挂载后onMounted');
        })
        /* Vue3中的数据更新前 */
        /* 响应式数据修改的时候触发 */
        onBeforeUpdate(()=>{
          console.log('数据更新前onBeforeUpdate');
        })
        /* Vue3中的数据更新后 */
        /* 响应式数据修改的时候触发 */
        onUpdated(() => {
          console.log('数据更新后onUpdated');
        })
        return{ 
          /* name:toRef(obj,'name'),
          age:toRef(obj,'age'), */
          ...toRefs(obj),
          flag
        }
      }
    }
    </script>

Vue3卸载前卸载后生命周期

        import {onBeforeUnmount,onUnmounted} from 'vue'
        export default {
            setup(){
                onBeforeUnmount(()=>{
                    console.log('卸载前onBeforeUnmount');
                })
                onUnmounted(()=>{
                    console.log('卸载后onUnmounted');
                })
            }
        }
        
        

        <template>
          <input type="text" v-model="obj.name">
          <h1>{{obj.name}}</h1>
          <input type="text" v-model="a">
          <h1>{{a}}</h1>
        </template>
        <script>
        import {watchEffect,reactive,ref} from 'vue'

        export default {

          setup(){
            const obj =reactive({
              name:'张三'
            })
            let a=ref('芭比球了')
            /* watchEffect一进入页面就会执行一次 
            也可以进行监听*/
            /* watchEffect的回调函数中的响应式数据只要发生了变化，回调函数都会执行一遍 */
            watchEffect(()=>{
              let v=obj.name
              let v2=a
              console.log(v,v2.value);
            })
            return{ 
              obj,a
            }
          }
        }