快速入门vue3.0系列之生命周期及父传值，建议“收藏细品”，会持续更新！❤

Posted 2021-10-11 前端老实人

目录

生命周期

父传子

常用加值方法

代码抽离

---

生命周期

组合式 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,
//   };
// }

• 博主公_号：前端老实人，期待各位小伙伴加入同学们一起学习的队伍哦❤