首先，我们先了解在vue2.0使用过程中遇到哪些难题
- vue2.0对typeScript的支持是有限的。
- vue2.0中mixins(按功能模块提取出来)
- 作用：它可以将可重用的代码封装起来，在需要用到的页面中引入就可以将组件内部如data、method等与父组件中相应内容进行合并，相当于扩充了父组件。
- 缺点：不利于维护、命名冲突、不清楚暴露出来的变量的作用。
- 作用：它可以将可重用的代码封装起来，在需要用到的页面中引入就可以将组件内部如data、method等与父组件中相应内容进行合并，相当于扩充了父组件。
vue3.0做了哪些重要的改进
- 打包大小减少41%
- 初次渲染快55%，更新快133%
- 内存使用减少54%
- 完全支持typescript
- 性能的提升(重写了diff算法、tree-shaking的优化)
- 重写虚拟dom（新增了静态标记（PatchFlag），只比对带有PF的节点，跳过了静态（常量）节点，只处理动态（模板）节点，从而很大程度的提升了性能）
- 提升网络加载性能：tree-shaking机制（原理：依赖es6的模块化语法，将无用的代码进行剔除）
- composition API（把一个功能的所有状态、方法、都封装到一个函数里面，方便统一管理）
vue2.0和vue3.0的一些区别
- 响应式原理的改变，使用proxy取代了object.defineproperty（proxy可以之间监测到对象和数组的变化）
- vue2通过object.defineproperty来完成数据的劫持，但考虑到性能，没有对数组的每一项进行劫持，而是用AOP切片思想对数组的7个方法（push,shift,pop,splice,unshift,sort,reverse）进行重写，所以改变数组的索引和长度是监测不到的。
- vue3是利用ES6中的proxy代理实现，在访问对象之前设置一层拦截，对整个对象进行代理(可以是任何类型的对象，包括原生数组、函数，或者是另一个代理)
- 调整了v-if v-for的优先级，调整后v-if优先级大于v-for.
- v-model语法糖弃用，改用modelValue
- vue3.0允许template设置key值
- 弃用全局api new Vue，使用createApp
- 弃用Vue.prototype，使用
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
- 移除事件api，$on、$off、$once、$eventBus
vue3.0部分api
- setup()方法
setup函数是compoditionAPI的入口函数，通过return暴露出setup中定义的变量和方法。
-
ref 可以声明简单类型的变量并转化成响应式。
-
reactive 声明复杂类型的变量并转化成响应式。
-
toRefs 可以将setup函数中直接return出复杂类型的值变成响应式的。
2.生命周期函数
可以在setup函数中处理生命周期函数，因为beforeCreate、created和setup执行时间几乎相同，所以要处理的东西可以写在setup函数中。
-
beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestory -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
// 调试用的debugger函数（记录了当render时，哪些值发生了变化）
onRenderTracked
onRenderTriggered
3.侦听器watch
接受三个参数：参数1：监听的数据源 (可以为一个ref或者一个函数) 参数2：回调函数 (newValue, oldValue) => {} 参数3：深度监听或立即执行的配置(deep: true, imediate: true)
4.计算属性computed
当一个值需要通过计算来得到时就可以使用计算属性，和vue2中使用一样，回调函数必须要有return，不支持异步，可以使用set、get方法，可以直接读取或修改。总的来说，计算属性变化不大。
好了，今天先到这里 bey~~
