Vue3.0和2.0的区别

1.特点比较

    更快

    1、virtual DOM 完全重写,mounting & patching 提速 100%;
    2、更多编译时 (compile-time)提醒以减少 runtime 开销;
         3、基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能;
         4、放弃 Object.defineProperty ,使用更快的原生 Proxy;
         5、组件实例初始化速度提高 100%;
         6、提速一倍/内存使用降低一半;

 更小

    1、Tree-shaking 更友好;
    2、新的 core runtime:~ 10kb gzipped;

   变化

  • 下载安装 npm install -g vue@cli

  • 删除了vue list

  • 创建项目 vue create

  • 启动项目 npm run serve

  • 默认项目目录结构也发生了变化:

  • 移除了配置文件目录,config 和 build 文件夹

  • 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中

  • 在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件

 

2.双向绑定的底层原理分析

  vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。

  vue3 中使⽤了 es6 的 ProxyAPI 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽ 实现对数据的监控。

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

 

3.内置组件与api细究

vue3可以默认进⾏懒观察,使⽤Function-based API,setup函数,对与插件或对象的⼀ 个按需引⼊,Computed Value ,新加⼊了 TypeScript 以及 PWA 的⽀持等等… 这⾥着重说⼀下vue3的⼀个按需引⼊

Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实⽆论你⽤到还是没⽤到,都会跑⼀遍,这样不仅提⾼了性能消耗,
也⽆疑增加了⽤户加载时间。

⽽vue3.0中可以⽤ES module imports按需引⼊,如:keep-alive内置组件、v-model指令,等等,不仅我们开发起来更加的便捷,减少 了内存消耗,也同时减少了⽤户加载时间,优化⽤户体验。

核心代码

createApp(App).mount('#app') = createApp(根组件).mount('public/index.html中的div容器')

1.vue2.0中是直接创建了一个vue实例
2.vue3.0中按需导出了一个createApp (ceateApp做了什么)
3.vue3中的app单文件不再强制要求必须有根元素 也就是说 在vue2.0中必须要有一个根元素,在vue3中没这个要求

获取props

vue2:console.log(‘props’,this.xxx)
vue3:setup(props,context){ console.log(‘props’,props) }

给父组件传值emit

vue2:this.$emit()
vue3:setup(props,context){context.emit()}

 

posted on 2022-09-13 19:50  还是种田踏实  阅读(569)  评论(0编辑  收藏  举报