首页 > 编程学习 > 路由模式和vue23的区别

路由模式和vue23的区别

发布时间:2023/1/25 12:44:32

1.vue3和vue2的区别

1.vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x,使用proxy的优势如下

  1. defineProperty只能监听某个属性,不能对全对象监听
  2. 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
  3. 可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2. 默认进行懒观察(lazy observation)。

在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。

3. 更精准的变更通知。

比例来说:2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。

4. 3.0 新加入了 TypeScript 以及 PWA 的支持

查看更多

2.ue-router路由模式有几种?

vue-router有3种路由模式:hash,history,adstract.
hash:使用URL hash值来做路由。支持所有浏览器,包括不支持HTML5 History Api 的浏览器。

hash实现原理:
早期的前端路由的实现就是基于location.hash来实现的,location.hash的值就是URL中的#后面的内容,
特性:
URL中的hash值只是客户端的一种状态,
hash值的改变,都会在浏览器的访问历史中增加一个记录,
可以通过a标签,并设置href属性,
我们可以使用hashchange事件来监听hash值的变化,从而对页面进行跳转(渲染)

history:依赖HTML5 History API和服务器配置,具体查看HTML5 History模式。
abstract:支持所有JavaScript运行环境,如Node.js服务器端,如果发现没有浏览器的API,路由会自动强制进入这个模式。
history实现原理:
HTML5提供了History API来实现URL的变化

3.


本文链接:
https://www.ngui.cc/el/2883554.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000