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变化