VUE -- 基础知识讲解（一）

【点赞收藏加关注，前端技术不迷路~】

 一、Vue组件通信（VUE3）

1.props 父组件给子组件传参

2.$emit / $on 子组件给组父件传参，

        Vue3删除了$on，组件实例不再实现事件发射器接口，用于触发由父组件以声明方式附加的事件处理程序。

3.$children / $parent 比较简单的，子组件给组父件传参，

        Vue3删除了$children，因为功能与$refs重复，可以用$refs来直接访问子组件

4.$attrs / $listeners 非属性特性可以进行隔代传参，

        Vue3删除了$listeners，因为vue3中，事件监听器只是一个属性，是对象一部分的$attrs，例如：v-on:close监听器相当于$attrs的onClose：()=>{ ... }。

5.$refs 父组件给子组件传参

6.$root 子组件给根组件传参

7.eventbus 事件观察，VUE3删除了$on无法使用，可以使用第三方库或自己写派发。

8.vuex 使用中间层，解决组件之间参数传递

注意：Vue3中废除的几个API

        https://v3-migration.vuejs.org/breaking-changes/children.html

        https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html

        https://v3-migration.vuejs.org/breaking-changes/events-api.html#overview

总结：

        1.父子组件：

                props        $emit        $parent        $refs        $attrs

        2.兄弟组件：

                $parent        $root        eventbus        vuex

        3.跨层级关系：

                eventbus        vuex        provide+inject

        provide+inject：跨层级，父组件provide一个属性，只要该组件内的任何一个组件，inject了这个属性，那么当父组件改变这个属性值时，子组件的属性也一并改变。(Vue3)

// a.vue
import { provide } from 'vue'
export default {
    setup() {
        provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
    }
}

// c.vue
import { inject } from 'vue'
export default {
    setup() {
        const message = inject('message')
        return { message }
    }
}

二、v-if和v-for的优先级

文档中明确指出：永远不要把v-for和v-if放到一个组件上

1.vue2中，v-for的优先级高于v-if

        虽然放到一个组件上不会抛错，但会降低性能，因为每一个v-for都需要判断一下。

2.vue3中，v-if的优先级高于v-for

        如果放到一个组件上甚至直接抛错，因为有的v-if会基于v-for的循环项，if优先级高，还没循环呢，那循环项不存在，直接报错

三、vue的生命周期和各周期内干的事儿

思路：

        1. 给出概念

        2. 列举⽣命周期各阶段

        3. 阐述整体流程

        4. 结合实践

        5. 扩展：vue3变化

1.生命周期：创建前后