vue2.0和vue3.0的区别（加油）

1.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：

•可直接监听数组类型的数据变化
•监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升
•可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行
•直接实现对象属性的新增/删除

2.新增Composition API，更好的逻辑复用和代码组织

3.重构 Virtual DOM

•模板编译时的优化，将一些静态节点编译成常量
•slot优化，将slot编译为lazy函数，将slot的渲染的决定权交给子组件
•模板中内联事件的提取并重用（原本每次渲染都重新生成内联函数）
4.代码结构调整，更便于Tree shaking，使得体积更小
5.使用Typescript替换Flow

为什么要新增Composition API，它能解决什么问题？

Vue2.0中，随着功能的增加，组件变得越来越复杂，越来越难维护，而难以维护的根本原因是Vue的API设计迫使开发者使用watch，computed，methods选项组织代码，而不是实际的业务逻辑。
另外Vue2.0缺少一种较为简洁的低成本的机制来完成逻辑复用，虽然可以minxis完成逻辑复用，但是当mixin变多的时候，会使得难以找到对应的data、computed或者method来源于哪个mixin，使得类型推断难以进行。
所以Composition API的出现，主要是也是为了解决Option API带来的问题，第一个是代码组织问题，Compostion API可以让开发者根据业务逻辑组织自己的代码，让代码具备更好的可读性和可扩展性，也就是说当下一个开发者接触这一段不是他自己写的代码时，他可以更好的利用代码的组织反推出实际的业务逻辑，或者根据业务逻辑更好的理解代码。
第二个是实现代码的逻辑提取与复用，当然mixin也可以实现逻辑提取与复用，但是像前面所说的，多个mixin作用在同一个组件时，很难看出property是来源于哪个mixin，来源不清楚，另外，多个mixin的property存在变量命名冲突的风险。而Composition API刚好解决了这两个问题。

mixin是什么？？

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

以上是官网的定义，mixin的作用是多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用，在已有的组件数据和方法进行了扩充。引入mixin分全局引用和局部引用。

定义一个mixin.js

let MIXIN = {
   data() {
       return {
           name: 'mixin'
       }
   },
   created() {
       console.log('mixin...', this.name);
   },
   mounted() {},
   methods: {}
};
export default MIXIN;

引用mixin

//全局引用
import mixin from './mixin'
Vue.mixin(mixin)

//在vue文件中引用
import '@/mixin'; // 引入mixin文件
export default {
   mixins: [mixin]
}

谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。大多数情况下，只应当应用于自定义选项。也可以将其用作 Plugins 以避免产生重复应用

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

• 数据对象（data）在内部会进行递归合并，在和组件的数据发生冲突时以组件数据优先。
• 同名钩子函数（created,mounted...）将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
• 值为对象的选项（methods, components 和 directives）将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。