快速入門vue3.0系列之生命周期及父傳值，建議“收藏細品”，會持續更新！❤

目錄 生命周期 父傳子 常用加值方法 代碼抽離

組合式 API 上的生命周期鈎子與選項式 API 的名稱相同，但字首為 on：即 mounted 看起來像 onMounted。

1.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
    }
  }      

1.// 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
    }
  }        

1.const addUser = () => {
    // alert(data.val);
    // 向數組的前面加一條資料
    // 向前添加
    data.todos.unshift({ name: data.val, show: false });
    // data.todos.push(//向後添加
    //   {name:data.val,show:false}
    // )
    data.val = "";
  };      

1.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,
//   };
// }      

部落客公_号：前端老實人，期待各位小夥伴加入同學們一起學習的隊伍哦❤