vue2和vue3的区别

前言
vue经历从2.0到3.0更新之后，简而言之就是变得更轻，更快，使用起来更加方便，每一次的版本迭代都是对上一个版本的升级优化，不管是对于我们开发者还是对于用户体验都是不断地在越来越方便，接下来我会着重于开发者来说一下两个不同版本的区别，

详解
1.vue2.0和3.0的初始化就存在着一定区别，比如vue3.0可以在安装脚手架同时提前安装好一些项目开发必备的插件，并且3.0提供了可视化创建脚手架，可以更加方便的对插件和依赖进行管理和配置，同时两个版本的目录结构也是有些许差别的。

2.在开发过程中两个版本的使用方法虽然在表面上没有太大的一个区别，但是在他的底层方面去看的话区别还是很大的，其中就包括渲染方式，数据监听，双向绑定，生命周期，vue3更精准变更通知，

这里着重说一下关于双向绑定的更新，
vue2 的双向数据绑定是利用ES5 的一个 API ，Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每一个对象都包一层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。

这里是引相比于vue2版本，使用proxy的优势如下
1.defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
2.可以监听数组，不用再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美支持对数组的监听。用

3.另外vue3还新增了一些内置组件和方法，比如vue3可以默认进行懒观察，使用Function-based API，setup函数，对与插件或对象的一个按需引入，Computed Value ，新加入了 TypeScript 以及 PWA 的支持等等…
这里着重说一下vue3的一个按需引入

Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变，这样不仅提高了性能消耗，也无疑增加了用户加载时间。
而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等，不仅我们开发起来更加的便捷，减少了内存消耗，也同时减少了用户加载时间，优化用户体验。
 

数据双向绑定方面
Vue2.0使用Object.defineProperty

原理：通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知

 

// 数据
let data = {
    title: '',
    // 备份数据
    _data: {}
}
// 定义特性
Object.defineProperty(data, 'title', {
    // 定义特性属性或者特性方法
    // 取值方法
    get() {
        // console.log('get')
        // 注意：不能通过自身属性取值
        // return this.title
        // 返回备份的数据
        return this._data.title;
    },
    // 赋值方法
    set(value) {
        // this指向对象
        // 注意：不能为自身属性赋值
        // this.title = value
        // 我们可以向备份数据中存储
        this._data.title = value;
        // console.log('set')
        // 更新视图
        updateView(this._data)
    }
})
// 视图模板
let tpl = document.getElementById('app').innerHTML
// 实现更新视图的方法
function updateView(data) {
    // 处理模板
    let html = tpl.replace(/{{(\w+)}}/g, (match, $1) => {
        // 从data中获取数据
        return data[$1] || ''
    })
    // 更新视图
    document.getElementById('app').innerHTML = html;
}

Vue3.0数据绑定
使用ES6的新特性porxy

原理：通过ES6的新特性proxy来劫持数据，当数据改变时发出通知

总结：

Vue2.x版本中的双向绑定不能检测到下标的变化
proxy可以劫持整个对象，并返回一个新对象