vue3.0的生命周期和父子传值，一学就会#yyds干货盘点#

Posted 2022-03-01 前端老实人

生命周期

组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on：即 mounted 看起来像 onMounted。

setup() //setup组合式api的入口函数,在beforeCreate之前执行
    const count=ref(0)
    console.log(setup);
    onBeforeMount(() => //组件挂载到节点之前执行
      console.log(组件挂载到节点之前onBeforeMount);
    )
    onMounted(() => 
      console.log(onMounted组件挂载完成);
    )
    onBeforeUpdate(() => //组件更新前执行
      console.log(组件更新前执行onBeforeUpdate);
    )
    onUpdated(() => //组件更新完成后执行
      console.log(组件更新完成后执行onUpdated);
    )
    onBeforeUnmount(() => 
        console.log(组件卸载之前执行onBeforeUnmount);
    )
    onUnmounted(() => 
        console.log(组件卸载完成后onUnmounted);
    )
    return
      count
    
  

父传子

// father组件
setup() 
  //father作为父级组件,通过provide函数提供数据共享(不限层次)
  // provide只能向下传递数据,向子孙组件传递数据
  provide(globalVal,这是father组件传递过来的值)
  const str = ref(str)
  provide(globalStr,str)

  return
    str
  

// One组件
setup() 
    const val = inject(globalVal)
    const str = inject(globalStr)
    provide(globalStr,这是one组件传递过来的值)
    return 
      val,
      str
    
  
// Two组件
setup() 
    // inject通过自定的函数名获取到父级组件的共享数据
    const val = inject(globalVal)
    // 父组件和爷组件都有globalStr,引用近的父组件内容
    const str = inject(globalStr)
    return 
      val,
      str
    
    

常用加值方法

const addUser = () => 
    // alert(data.val);
    // 向数组的前面加一条数据
    // 向前添加
    data.todos.unshift( name: data.val, show: false );
    // data.todos.push(//向后添加
    //   name:data.val,show:false
    // )
    data.val = "";
  ;

代码抽离

import userAdd from ../hook/userAdd.js
export default 
  setup() 
    const total,val,todos,addUser = userAdd();
    return
      total,val,todos,addUser
    
  ,
;
// 自定义函数
// function userAdd() 
//   const data = reactive(
//     val: "",
//     todos: [
//        name: "学习", show: false ,
//        name: "敲代码", show: false ,
//     ],
//   );
//   const addUser = () => 
//     // alert(data.val);
//     // 向数组的前面加一条数据
//     // 向前添加
//     data.todos.unshift( name: data.val, show: false );
//     // data.todos.push(//向后添加
//     //   name:data.val,show:false
//     // )
//     data.val = "";
//   ;
//   const total = computed(() => data.todos.length);
//   return 
//     ...toRefs(data),
//     addUser,
//     total,
//   ;
// 

最后

如果对您有帮助，希望能给个