组件嵌套后的生命周期

父子组件执行顺序

在原本的setup mounted onMounted 下加入了computed ，watching：immediate

同步加载组件

异步脚在组件

理解思路：

首先一个vue组件的加载可以分为数据+DOM，首先是数据的初始化，无论在父组件还在子组件都是优先于DOM执行的，在数据初始化完成后才是数据的DOM渲染，所以第一步是初始化父组件的数据，然后在加载父组件的DOM前，可以知道父组件的DOM 是由子组件的组合成的，所有要先有子组件DOM，而初始化子组件DOM的前提需要先初始化数据所以第二步是子组件的setup执行初始化数据，此时就可以获取到父组件同步传入的prop数据，然后第三步完成子组件的DOM渲染即onMounted周期，最后完成父组件的DOM渲染，即父组件onMounted。同理在卸载组件的时候，也是先卸载子组件再卸载父组件。

在初始化数据时就会同步执行computed和watch:immediate

父组件setup
子组件seup
子组件onMounted
父组件onMounted

备注：存在子组件又有子组件嵌套时同理。

组件的数据绑定

明确父子数据传递是单项数据流

使用prop 传递数据时，父组件数据改变会影响子组件数据刷新，但是数据刷新具有同步性：即在时间循环的一轮中只会刷新一次：例子

    //chilid
    const prop = defindeProps({
        form:{}
    })
    
    watch(()=> prop.form,(newVal)=>{
        console.log(newVal)
    },{
        deep:true
    })
    
    //parent
    form.name = '1';
    fomr.age = '1'
    ...
    
    //在同步执行时无论form 改边多少次，子组件只会刷新一次  console也只执行一次

在组件中自定义v-model

参考学习地方：cn.vuejs.org/guide/compo…

    //子组件
    defineProps({ modelValue: String, custom: String })
    defineEmits(['update:modelValue', 'update:custom'])
    //父组件
    <Child v-mode="value" v-model:custom="custom" />

常用的input二次组件封装


<!-- CustomInput.vue --> 
<script setup> 
import { computed } from 'vue' 
const props = defineProps(['modelValue']) 
const emit = defineEmits(['update:modelValue'])
//compute 的 set get 使用
const value = computed({ 
    get() { 
        return props.modelValue 
    }, 
    set(value) { 
        emit('update:modelValue', value) 
    }
})
</script>
<template>
    <input v-model="value" /> 
</template>

VUE3+TS 中组件的prop声明（常用）

 //类型式声明（推荐）
 const props = withDefaults(
     //类型声明
    defineProps<{
      disabled?: boolean;
    }>(),
    //默认值
    {
      disabled: false,
     
    }
  );
  
  //运行时声明
  import { PropType } from 'vue'
   const props  = defineProps({
       diabled:{
           type:Boolean,
           default:false
       }，
       //复杂数据结构时需要用到PropType 辅助
       obj:{
           type:Object as PropType<{ a: string， b: number }>，
           default:{
               a:'a',
               b:'b'
           }

       }
   })
``

VUE3学习日记—— 组件的学习（小知识点）