看完后完全了解 Vue 2.0 和 Vue 3.0 的区别

简介: 看完后完全了解 Vue 2.0 和 Vue 3.0 的区别

1.数据的双向绑定

Vue2.0使用Object.defineProperty

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

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
 6     <title>vue2.x数据双向绑定</title>
 7 </head>
 8 <body>
 9     <div>
10         <input type="text" id="input">
11         <span id="text"></span>
12     </div>
13 </body>
14 </html>
15 <script>
16     var obj = {};
17     Object.defineProperty(obj, 'prop', {
18         get: function () {
19             return val;
20         },
21         set: function (newVal) {
22             val = newVal;
23             document.getElementById('text').innerHTML = val;
24         }
25     });
26     document.addEventListener('keyup', function (e) {
27         obj.prop = e.target.value;
28     });
29 </script>


Vue 3.0使用ES6的新特性porxy

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

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
 6     <title>vue3.0数据双向绑定</title>
 7 </head>
 8 <body>
 9     <div>
10         <input type="text" id="input">
11         <span id="text"></span>
12     </div>
13 </body>
14 </html>
15 <script>
16     var obj = {};
17     var obj1 = new Proxy(obj, {
18         // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
19         get: function (target, key, receive) {
20             // 返回该属性值
21             return target[key];
22         },
23         set: function (target, key, newVal, receive) {
24             // 执行赋值操作
25             target[key] = newVal;
26             document.getElementById('text').innerHTML = target[key];
27         }
28     })
29     document.addEventListener('keyup', function (e) {
30         obj1[0] = e.target.value;
31     });
32 </script>


总结:

Vue2.x版本中的双向绑定不能检测到下标的变化

proxy可以劫持整个对象,并返回一个新对象


2. vue3的亮点

性能比2.x快1.2~2倍

diff算法的优化

在vue2中,虚拟dom是全量比较的。

在vue3中,增加了静态标记PatchFlag。在创建vnode的时候,会根据vnode的内容是否可以变化,为其添加静态标记PatchFlag。diff的时候,只会比较有PatchFlag的节点。PatchFlag是有类型的,比如一个可变化文本节点,会将其添加PatchFlag枚举值为TEXT的静态标记。这样在diff的时候,只需比对文本内容。需要比对的内容更少了。PatchFlag还有动态class、动态style、动态属性、动态key属性等枚举值。

render阶段的静态提升(render阶段指生成虚拟dom树的阶段)

在vue2中,一旦检查到数据变化,就会re-render组件,所有的vnode都会重新创建一遍,形成新的vdom树。

在vue3中,对于不参与更新的vnode,会做静态提升,只会被创建一次,在re-render时直接复用。

静态提升可以理解为第一次render不参与更新的vnode节点的时候,保存它们的引用。re-render新vdom树时,直接拿它们的引用过来即可,无需重新创建。

事件侦听缓存

在vue2中,我们写的@click="onClick"也是被当作动态属性,diff的时候也要对比。但我们知道它不会变化,比如变成@click=“onClick2”,绑定别的值。

在vue3中,如果事件是不会变化的,会将onClick缓存起来(跟静态提升达到的效果类似),该节点也不会被标记上PatchFlag(也就是无需更新的节点)。这样在render和diff两个阶段,事件侦听属性都节约了不必要的性能消耗。

我曾经维护过一个拥有很庞大dom树的页面。由于节点非常多,无需参与更新的节点也很多,使用vue2的情况下,在render和diff两个阶段,消费了很多性能,如果当时有vue3的话,我想性能会被优化很多。

减少创建组件实例的开销

vue2.x每创建一个实例,在this上要暴露data、props、computed这些,都是靠Object.defineProperty去定义的。这部分操作还是挺费时的。

vue3.0中基于Proxy,减少了创建组件实例的性能开销。

按需编译,体积比Vue2.x更小(Tree shaking)

在vue3中,可以如下面这样引用vue的功能函数,如果你的项目没有用到watch,那编译时就会把tree shaking掉。

import { computed, watch, nextTick } from "vue";

利用的就是 ES6 模块系统import/export。


Compostion API: 组合API/注入API

这里要说到代码的组织方式,传统的网页是html/css/javascript(结构/样式/逻辑)分离。vue/react通过组件化的方式,将联系紧密的结构/样式/逻辑放在一起,有利于代码的维护。

compostion api更进一步,着力于JavaScript(逻辑)部分,将逻辑相关的代码放在一起,近而有利于代码的维护。

在vue2的组件内,使用的是Option API风格(data/methods/mounted)来组织的代码,这样会让逻辑分散,举个例子就是我们完成一个计数器功能,要在data里声明变量,在methods定义响应函数,在mounted里初始化变量,如果在一个功能比较多、代码量比较大的组件里,你要维护这样一个功能,就需要在data/methods/mounted反复的切换到对应位置,然后进行代码的更改。

在vue3中,使用setup函数。如下所示跟count相关的逻辑,都放到counter.js文件里,跟todo相关的逻辑放到todos.js里。

import useCounter from './counter'
import useTodo from './todos'
setup(){
  let { val, todos, addTodo } = useTodo()
  let {count,add} = useCounter() 
  return {
    val, todos, addTodo,
    count,add,
  }
}

在我看来这就是Compostion API最大的特点,以功能为单位的代码组织方式。同时它可以让代码更易重用。

说到重用,Compostion API的方式也比mixin的方式好很多,你可以清楚的看到组件使用的数据和方法来自哪个模块,而mixin进组件的功能,常常会让我们困惑此功能来自哪个mixin。


更好的TS支持

vue2不适合使用ts,原因在于vue2的Option API风格。options是个简单对象,而ts是一种类型系统、面向对象的语法。两者有点不匹配。

在vue2结合ts的具体实践中,要用 vue-class-component 强化 vue 组件,让 Script 支持 TypeScript 装饰器,用 vue-property-decorator 来增加更多结合 Vue 特性的装饰器,最终搞的ts的组件写法和js的组件写法差别挺大。

在vue3中,量身打造了defineComponent函数,使组件在ts下,更好的利用参数类型推断 。Composition API 代码风格中,比较有代表性的api就是 ref 和 reactive,也很好的支持了类型声明。

import { defineComponent, ref } from 'vue'
const Component = defineComponent({
    props: {
        success: { type: String },
        student: {
          type: Object as PropType<Student>,
          required: true
       }
    },
    setup() {
      const year = ref(2020)
      const month = ref<string | number>('9')
      month.value = 9 // OK
     const result = year.value.split('') // => Property 'split' does not exist on type 'number'
 }


自定义渲染API(Custom Renderer API)

vue2.x架构问题

vue2.x最开始支持运行在浏览器中,渲染到浏览器的dom上,随着vue的流行,出现了weex和myvue。

  • weex:移动端跨平台方案,需要渲染到移动设备。weex被写在vue原项目里,缺点是这使vue原项目更大了,也不是通用解决方案。
  • myvue:小程序上使用,需要渲染到小程序框架上。myvue是单独fork一份源代码进行更改,缺点也非常明显,myvue中vue的版本跟官方版本从fork的那一刻开始,就要开始不一致了。

vue2.x项目架构对于这种渲染到不同平台不太友好,vue3.0推出了自定义渲染API解决了该问题。

下面我们先看vue2和vue3的入口写法有所不同:

// vue2
import Vue from 'vue'
import App from './App.vue'
new Vue({ => h(App)}).$mount('#app')
// vue3
const { createApp }  from 'vue'
import App from "./src/App"
createApp(App).mount(('#app')

vue官方实现的 createApp 会给我们的 template 映射生成 html 代码,但是要是你不想渲染生成到 html ,而是要渲染生成到 canvas 之类的不是html的代码的时候,那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了。

// 你自己实现一个createApp,比如是渲染到canvas的。
import { createApp } from "./runtime-render";
import App from "./src/App"; // 根组件
createApp(App).mount('#app');

有了Custom Renderer API,如weex和myvue这类方案的问题就得到了完美解决。只需重写createApp即可。

更先进的组件

Fragment组件

// vue2是不允许这样写的,组件必须有一个跟节点,现在可以这样写,vue将为我们创建一个虚拟的Fragment节点。

<template>
  <div>Hello</div>
  <div>World</div>
</template>

这样写有何好处呢?一是如果根节点不是必要的,无需创建了,减少了节点数。二是Fragment节点是虚拟的,不会DOM树中呈现。

Suspense组件

<Suspense>
  <template >
    <Suspended-component />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

在Suspended-component完全渲染之前,备用内容会被显示出来。如果是异步组件,Suspense可以等待组件被下载,或者在设置函数中执行一些异步操作。


更快的开发体验(vite开发构建工具)

在使用webpack作为开发构建工具时,npm run dev都要等一会,项目越大等的时间越长。热重载页有几秒的延迟,但是如果用vite来做vue3的开发构建工具,npm run dev 秒开,热重载也很快。这种开发体验真是很爽,拒绝等待。

vite的原理还是用了浏览器支持import关键字了,启动项目不用webpack构建工具先构建了,浏览器直接请求路由对应的代码文件,代理服务器针对单个文件进行编译并返回。如果请求的文件里还import了其他文件,同理浏览器继续发请求,代理服务器返回。就这样实现了npm run dev时无需编译,实时请求实时编译。

其他的,数据监听方式变成了Proxy,消除了Object.defineProperty现有的限制(例如无法检测新的属性添加),并提供更好的性能。

vue3解决了vue2的一些问题,大型应用的性能问题、ts支持不友好问题,自定义渲染API解决体系架构存在的问题,如果在vue3的基础上实现weex框架会好很多。也做出了很多优化,Compostion API让代码的组织形式更好。vite开发构建工具让开发体验更好,Tree shaking让包更小、性能更优。

总的来说vue3还是非常棒的,带来了很多非常好的新特性。


相关文章
|
7天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
22 1
|
7天前
|
JavaScript 前端开发 数据安全/隐私保护
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`&lt;script&gt;`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
31 1
|
7天前
|
JavaScript API
vue3+element实现一个公告面板
vue3+element实现一个公告面板
35 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
1天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
6 2
|
1天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
7 3
|
1天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
11 2
|
1天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
8 2
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
8 2