双向绑定的实现方式不同
vue2.x主要依赖Object.definePoperty来劫持对象属性的getter和setter操作,但数据发生变化的时候发出通知
而vue3.x是通过Proxy来劫持数据,当数据发生变化的时候发出通知
vue2.0
element.addEventListener(event, function, useCapture)
keyup是键盘按下松开
2.0的劫持过程就是通过.defineProperty()给obj添加了一个prop属性,随后再给这个属性添加事件监听
vue3.0
内部和2类似,就是get和set多了几个参数,val变成了target[key],这是3可以类似数组的方式直接精确定位目标的证明
proxy 由于defineProperty的优势
1.直接监听的对象而不是属性
2.直接监听数组的变化
3.拦截方式多 *13
4.Proxy返回的是一个新对象,可以只操作新对象达到目的,而defineProperty只能遍历对象属性直接修改(深拷贝)
5.Proxy比较新
懒观察
2中不管数据多大,都会在一开始为其创建观察者,当数据很大时,这可能会在页面载入时造成明显的性能压力。
而在3中,只会对“被用于渲染初始可见部分的数据”创建观察者
精准的变更通知
在2中使用Vue.set来给对象新增一个属性时,这个对象的所有watcher都会重新运行;
而在3中,只有依赖那个属性的watcher才会重新运行
**部分指令的变化 **
下载安装命令: npm install -g [email protected]
删除了vue list
创建项目 vue create
默认项目目录结构也发生了变化
移除了配置文件目录的config和build文件夹
移除了static文件夹,新增puublic文件夹,并且index.html移动到public中