目录
生命周期
组合式 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, // }; // }
博主公_号:前端老实人,期待各位小伙伴加入同学们一起学习的队伍哦❤