十一、vue2+iview+webpack 和vue3+vben +vite的区别

        

 

前言

        前两天有同事问我，今年为什么前端要换技术和框架啊，我说换肯定有换他的好处，利大于弊我们才会考虑换掉它。      

         前两天招聘前端面试的时候，我们只要会vue3的，有vue3开发经验的前端，有很多人不理解为什么要学他，为什么我们要使用vue3,我给他们说vue3的流行是一种趋势，毕竟也是出来两年多的框架了，大家也都做出了自己判断，很多大厂也开始使用这个框架，我们也要跟上潮流。      

         虽然我也认为v2换v3是必须的，但是我还感觉不够系统的认识到换他的必要性，所以今天我就在这里说说我们今年为什么要换，换他的好处有哪些。

一、底层原理

  

        vue2的双向数据绑定是利用了es5 的一个API Object.defineproperty() 对数据进行劫持 结合发布订阅模式来实现的。defineProperty只能监听某个属性，不能对全对象进行监听,所以他不能对数组内部的数据进行监听。

        vue3中使用了es6的proxyAPI对数据进行处理，相比与vue2，使用proxy API 优势有：可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。 

根节点的不同 :

vue3在组件中支持多个根节点

vue2
<template>
  <div>
   <h1></h1>
  <div>
</template>

vue3

<template>
  <div>
   <h1></h1>
  <div>
  <div>
   <span></span>
  <div>
</template>

vue2使用了Options API (选择式api):

vue2（数据和方法分开）

<script>
 export default {
   // 数据
  data(){
   return{};
  },
  mounted(){},
  // 方法
  methods:{},
  computed:{}
}
</script>

动态地址：https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/085b2a6c8c2d478998ea8e6e3c9318f8~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp

缺点：

        在一个组件仅承担单一逻辑的时候，使用 Options API 来书写组件是很清晰的。 但是在我们实际的业务场景中，一个父组件总是要包含多个子组件，父组件需要给子组件传值、处理子组件事件、直接操作子组件以及处理各种各样的调接口的逻辑，这时候我们的父组件的逻辑就会变得复杂。 我们从代码维护者的角度出发，假设这个时候有 10 个函数方法，自然我们要把他们放入到methods中，而这个 10 个函数方法又分别操作 10 个数据，这个 10 个数据又分别需要进行Watch操作。 这时候，我们根据Vue2的Options API的写法，就写完了 10 个method、10 个data、10 个watch，我们就将本来 10 个的函数方法，分割在 30 个不同的地方。

vue3使用了Composition API (组合api)：

        

vue3（数据和方法都在setup里面）
<script>
 export default {
  setup(){
   // 数据和方法都写这里，更简洁
  }
}
</script>

 可能的缺点：

        Vue3: 让你自由过了火?

生命周期的不同：

        我们可以看到beforeCreate和created被setup替换了（但是 Vue3 中你仍然可以使用， 因为 Vue3 是向下兼容的， 也就是你实际使用的是 vue2 的）。 

二、打包速度

讲解之前咱们看看一个现象？

同样大小的两个项目，vue2的项目启动打包使用了20s,

直接启动成功，vue3的项目启动用了5s.直接快了四倍，为什么那么快呢。因为使用了vite，那么什么是vite呢。

Vite:

Vite是什么？

        Vite（法语意思是 “快”）是一种全新的前端构建工具。可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，类似webpack + webpack-dev-server，但是更轻更快。 Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。

Vite优点是什么?

        ?极速的服务启动，使用原生 ESM 文件，无需打包!

        ⚡ 轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）  

        ?丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用  

        ? 优化的构建，可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建  

        ? 通用的插件，在开发和构建之间共享 Rollup-superset 插件接口

        ? 完全类型化的API，灵活的 API 和完整 TypeScript 类型

Vite与Webpack对比:

 webpack：

打包流程：Webpack 会遍历你的应用程序中的所有文件，并启动一个开发服务器，然后将整个代码渲染到开发环境中。

核心理念：webpack从一个entry.js文件开始，将其依赖的所有js或者其他assets通过loader打包成一个文件， 随后这个打包后的文件将被从server传递到客户端浏览器运行。

核心思想：因为这样的处理规则，当保存文件时，整个 JavaScript 包将由 Webpack 重新构建，这就是为什么更改可能需要长达 10 秒才能反映在浏览器中，更新速度会随着应用体积增长而直线下降。

vite:

打包顺序：Vite 的工作方式不同，它不会遍历整个应用程序，Vite 只是转换当时正在使用的文件/模块。

核心理念：非捆绑开发构建。

核心思想：浏览器请求它时，使用 ES 模块转换并提供一段应用程序代码。

构建顺序：

        开始开发构建时，Vite首先将JavaScript 模块分为两类：依赖模块和源码模块。

        依赖项模块是第三方依赖的代码，从node_modules文件夹中导入的JavaScript 模块。这些模块将使用esbuild进行处理和捆绑，esbuild是一个用 Go 编写的 JavaScript 打包工具，执行速度比 Webpack 快 10-100 倍。

        它使用基于路由的代码拆分来了解代码的哪些部分实际需要加载，因此，它不必重新打包所有内容。

        它还使用现代浏览器中的原生 ES 模块支持来交付代码，这让浏览器可以在开发中承担打包工作。

        Webpack 这样的基于打包器的工作流必须在单个浏览器请求之前处理整个 JavaScript 模块，但 Vite 只在单个浏览器请求之前处理依赖模块。这就是为什么 Vite 能够比 Webpack 更快地处理开发构建。

三、打包速度

        vue2:

可以看出使用了324ms，其中Queueing（队列）排队了314.57ms。

vue3:

可以看到使用了44.8ms,最大的消耗是Waiting（等待打包）的时间41.95

 四、vben框架

        

关于 Vue vben admin：

        Vue Vben Admin 是一个基于 Vue3.0、Vite 、 Ant-Design-Vue 、TypeScript 构建的后台解决方案，为中大型项目开发提供开箱即用的UI框架，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。Vue Vben Admin 所使用的技术都是前端较新的技术栈，可以用来作为项目的启动模版，可以帮助快速搭建企业级中后台产品原型。也可以作为一个学习示例，用于上手学习 vue3，vite，ts 等等主流技术。该项目作者表示会一直持续跟进最新技术，将最新的东西应用与项目之中。

完整的预览：

https://vvbin.cn/next/#/login?redirect=/dashboard

 

完整的源码 

 https://github.com/vbenjs/vue-vben-admin

开发上手体验和使用建议：

        Vue Vben Admin 是一个优雅漂亮的 admin UI 框架，相比很多只关注功能的 admin 项目，颜值非常能打，毕竟对一个未来长期运作的互联网项目来说，选错 admin 在后期想要迭代时非常痛苦，如果时间允许，恨不得推倒重新撸一遍。

        Vue Vben Admin 适合使用 Vue 技术栈的开发者使用，需要注意的是需要熟悉 TS 。支持通过简单配置无需任何代码实现很多定制化的功能，比如修改主题颜色、动画效果，页面布局等，当然也支持我之前一直强调的多标签页面的功能，这对后台管理员的日常操作来说，效率提高非常明显。

        但 Vue Vben Admin 发布时间还很短，按项目开发的经验来说，需要经历一定的时间和使用投入才能趋于稳定，官网的文档量还不够，但好在有充足的例子，基本上后台管理能用到的页面和组件都具备了。而 Vue Vben Admin 还使用了 Vue3 / Vite 等前端领域较新的技术栈，建议优先以学习为主，如果要投入实际生产，建议再关注一下再说，当然，如果有能力和精力可以联系作者深入了解这个项目，对项目足够有信心和了解，也是可以投产使用的。

        Vue Vben Admin 的作者比较贴心地提供了完整版和精简版2个版本，完整版用于学习和查看实现的代码源码，精简版则用于构建新的项目，省的自己去删除大量无用的页面代码才能开始。

免费开源说明

        Vue Vben Admin 的作者是一位国内的开发者，他在业余的时间开源了这个 admin 框架，并以 MIT 开源协议托管在 Github 上，任何人都可以免费下载使用，不限制商用。

相关网址
        Vben Admin

五、那些不好的习惯

不要用2.x 的思维写3.x：

1.不要在 setup 定义一个 state：

      这里说的并不是不能定义一个 state 的变量，而是说不要定义一个用来存储所有数据的 state，3.x 不需要一个 存储所有数据的 data。为什么呢？      这个其实很简单，处理某项功能的逻辑应该写在一起。逻辑不会混在一起，变量也不应该混在一起。

<script>
import { reactive ,toRefs} from 'vue';
export default {
  name: 'test',
  setup() {
    const state = reactive({
      test1: '',
      test2: {},
      test3: [],
      //  ... 其他逻辑的处理变量
    });
    // a功能逻辑
    const testA = () => {
    }
    // ... 其他一些处理逻辑
    // b功能逻辑
    const testB = () => {
    }
    // ... 其他一些处理逻辑

    // c功能逻辑
    const testC = () => {
    }
    return {
      ...toRefs(state),
      testA,
      testB,
      testC,
    }
  }
};
</script>

2不要把 getCurrentInstance 当成2.x的 this 来用

虽然官网文档已经做出的警告说明，但是很多人依然这样使用。 但是是真的不必如此。

3      变量的定义尽量和操作他的方法、逻辑放在一起，便于查看和维护。

<script>
import { reactive, ref } from 'vue';
export default {
  name: 'test',
  setup() {
    const test1 = ref('');
    // a功能逻辑
    const testA = () => {
      test1.value = 'xxxx';
    };

      const test2 = reactive({ a: '1212' });
    // b功能逻辑
    const testB = () => {
      test2.a = 'xxxx';
    };

    const test3 = ref([]);
    // c功能逻辑
    const testC = () => {
      test3.value.push('121');
    };

    // 需要什么就导出什么
    // 使用 script setup 的话这里会更简单。
    return {
      test1,
      testA,
      testB,
      testC
    };
  }
};
</script>

4.用 TypeScript，但不完全用

这样的行为你是会被毒打的啊，屎山有您一份功劳。

const list: any = []
const obj: any = {}
const a: any = 1


export default defineComponent({
  props: {
    // 现在 data 是 any 类型的啦 
    data: {
      type: Number as PropType<any>,
    },
  },
  setup(_, { emit }) {
    // 现在 props 是 any 类型的啦
    const props: any = _
    ...
  }
})

onst obj: number[] = []
// ...
// 虽然 obj 是个 number[]，但为了实现业务，就得塞入一些不是 number 的类型，我也不想的啊是不是
// 至于编辑器会划红线报错？那是小问题，不用管它，别人一打开这个项目就是满屏的红线，想想就激动
obj.push('2')
obj.push([3])

5.命名不要那么自由

找个能够很好表达意思的名称，这样一来代码的可阅读性就高了，但是总有一些人想放纵自我。

const a1 = {}
const a2 = {}
const a3 = 2
const p = 1

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
<div>
<div class="box3"></div>


&-card {
  &-btn {
    &_link {
      &--right {
      }
    }
    &-nodata {
      &_link {
        &--replay {
          &--create {}
        }
      }
    }
  }
  &-desc {}
}

寄语

 没有是屎一样的代码，只有写屎一样代码的人，保持良好的代码风格，写好注释，同志们！！！

版权声明：本文为qq_43185384原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。