千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础
组件的简介：是vue中的一种思想 封装html 方便我们独立的或者复用的代码进行页面的构建，
什么是ui组件库：是提前封装好了的项目的公共组件，减少代码的冗余，方便后期的维护。
组件的关系：只要被调用了 就是子组件。
封装思想：公共组件和页面组件， 公共组件增加代码的复用性，便于后期维护。页面组件 增加了代码的可读性 ，也便于
后期的维护 。
组件的通信：父传子 用props 子传父 $emit 详细用法 props可以写单个属性 也可以写数字组 也可以对象
一般用的都是对象 props:{属性名：类型，type:类型,required:布尔,default:默认值},
$emit 发送通知的语法 不同的页面调用相同的子组件 实现的是不同的逻辑 所以得 用$emit 将事件传给父组件使用
this.$emit("自定义事件",参数) 父组件接受使用 @自定义事件="(形参)=>{逻辑代码}"
细节：vue3中直接写原生事件是生效的 但是会和自定义事件重复 解决：emits：[ 'click'];
vue2中直接写原生事件是不生效的 必须得使用自定事件。
通过provide提供可以被后代组件注入值 inject声明要通过从上层提供方匹配并注入进当前组件的属性；
单向数据流：子组件通过props接受的父组件的数据只能父组件修改 子组件无法修改，
组件通信 插槽slot： 默认插槽：定义组件<slot></slot>调用组件的双标签内自动填入 内部可以解析超文本，
具名插槽：定义组件<slot name="标识"></slot> 调用时 <template #标识></template>
作用域插槽：定义组件<slot name="标识" a='1' :b='c'></slot> 调用时 <template #标识='props'></template>
动态组件：<component :is="who"></component>
可以动态的切换需要的子组件
内置组件transition
单元素/组件过渡
1.写页面布局样式
2.控制元素的隐藏显示 v-if/v-show
3. 使用transition将代码包裹起来
enter-active-class 进入
leave-active-class 离开
appear 首次刷新进来触发
多元素过渡
transition 有两个标签 必须用v-if
mode "out-in" / "in-out"
内置组件KeepAlive
KeepAlive 是一个内置组件， 在多个组件间动态切换时缓存被移除的组件实例
最大缓存数
keepalive :max='num'
缓存实例的生命周期
没有keepalive 组件切换会触发销毁destroyed 和创建 created/mounted
有keepalive 组件切换不会触发销毁destroyed 创建created/mounted 只会首次触发
内置组件Teleport
组件创建时只会在app根目录下
vue3 和 vue2 的区别
v3弃用：filter过滤器 大道至简还使用以前的methods
mixin混入 参考react改成了hooks 下周一
v3新增：teleport 把代码放到指定位置避免样式污染、emits 让自定义事件重写原生事件 避免重复触发
v3原理：Object.defineProperty 改成 Proxy
组合式API的好处
把data methods computed 统一放到setup中一起写 增强代码的可读性 ，方便后期的维护。
ref reactive
ref 响应式对象refImpl{value :get/set}
reactive 代理对象
区别: 1. 数据 ref返回响应式对象 reactive返回代理对象
2.使用 ref操作数据需要.value，template模板中不需要 reactive都不需要,value
3.原理 ref通过Object.defineProperty()的get和set实现数据代理
reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据
