vue3的好处
- 实现代码的逻辑提取与复用
- diff算法更快
- 内存占比更少
- 打包体积变小
- compositon Api（组合式api）：使用传统的option配置方法写组件的时候问题会导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的
vue3移除的语法
vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意
- 实例方法$on移除 （eventBus现有实现模式不再支持 可以使用三方插件替代）
- 过滤器filter移除 （插值表达式里不能再使用过滤器 可以使用methods替代）
- .sync语法移除 （和v-model语法合并）
搭建vue3
创建vue脚手架项目
yarn create 项目名称
也可以使用npm 个人习惯yarn
下载后可以在你的package-lock.json看到下载后的包
compositon-api提供了以下函数
- reactive---处理简单数据
- ref---简单、复杂数据
- toRefs---模板中省略对象名称，直接使用属性名访问数据
（state.user.name）可以省略state直接(user.name) - computed---计算属性可以使用多次
- watch---侦听,分为普通侦听 立即执行 深度侦听
- onmounted---生命周期函数
- 其他.........
setup()函数
- 这些函数必须写在setup中，作为组件式api的起点
- setup中不能使用this，this为undefined
- 它会在beforecreated执行之前执行
ref()函数
- ref函数执行完的返回响应式数据是一个对象 如果想要在setup函数中修改 必须.value 模板中不需要
- ref函数弥补了reactive函数对于类型的支持不足
推荐: 如果明确的知道要转化的对象key名称 就使用reactive函数 否则一律使用ref函数
想知道其他函数的使用方法敬请期待作者更新.......(大佬们也可以自己个研究)
组件传值
1.父传子 父传子通过props在子组件中接收
- setup函数提供俩个参数，第一个参数为props，第二个参数为一个对象context
- props为一个对象，内部包含了父组件传递过来的所有prop数据
2.子传父 子传父通过触发自定义事件使用emit
使用setup函数中的context对象,包含了attrs，slots， emit属性，其中的emit可以触发自定义事件的执行从而完成子传父
provide和inject
作用:不仅可以跨层传递数据,还可以通过provide/inject传递响应式数据
- 爷爷组件在setup方法中使用
provide函数提供数据 - 孙子组件在setup方法中使用
inject函数获取数据
