如何开发一款基于 Vite+Vue3 的在线表格系统（上）
今天，葡萄带你了解如何基于 Vite+Vue3 实现一套纯前端在线表格系统。
在正式开始项目介绍之前，首先咱们首先来介绍一下 Vite 和 Vue3 。
### Vue3
Vue 是什么？大多前端开发者对这个词已毫不陌生了。三大框架孰优孰劣，众多开发者各抒己见，其中 Vue 以其“最简单、最易上手“的名号迅速积累了一大批粉丝，被广泛学习应用。
同 Angular 、React 框架一样，Vue 也是 MVVM 类型的框架，即数据驱动视图，在开发时我们只需要关注数据的变化即可。不同的是，Vue 是一个更轻量级的框架，被设计为自底向上逐层应用，其核心库只聚焦于视图层， 通过尽可能简单的 API 实现了响应式数据绑定以及组合的视图组件。
Vue 已经如此优秀，为什么还需要 Vue3 呢？
这就要提到它的不足之处了，在之前的 Vue2 中，使用的是选项型 API （ Options API ），将代码分割为不同的属性：data 、computed 、methods 等，这些方法属性各司其职。
选项型 API 固然好学易上手，与此同时也带来了一个关键问题：代码混乱，可读性差。
举个例子，现在我们想做一个列表视图功能，那么需要在 data 中写上相关的变量，在 methods 中将相关的逻辑判断和后端交互也加上。这个时候，新需求来了：添加上搜索和筛选功能。没有问题，继续将新的变量堆积在 data 中，将新的方法整理在 methods 中……写代码一时爽，后期维护的程序员傻眼了，这一堆堆的方法，到底在讲个啥。
既然 Vue2 这个弊端已经暴露出来了，自然要在它的升级版尝试解决了。所以 Vue3 推出了组合式 API （ Composition API ），正是为了解决原本 Vue2 项目中代码逻辑分散、不易理解和维护的问题。它使用方法（ function ）进行代码分割，使代码更为简洁易读。
既然做了，其他方面也不能落下啊！在性能上面，Vue3 也对 diff 算法进行了优化：
在 Vue2 中，每当数据发生变化，就会生成一个新的 DOM 树，并新 DOM 树与旧的 DOM 树进行对比，来判断节点异同，并进行更新。但完整遍历过程需要将两棵树所有节点进行比较，但实际情况中并不是所有节点内容都会变化，这就造成了性能的浪费。
Vue3 新增了静态标记，仅对标记了的节点进行对比并进一步更新，无需再遍历整个节点，实现了性能提升。
对比 Vue2 ，官方文档对 Vue 性能有具体的数据介绍：SSR 速度提高了 2~3 倍； Update 性能提高 1.3~2 倍。（程序员看到后更有信心学习了！）
除此之外，Vue 项目中也有众多 API 和模块，但在实际项目中我们并不会用到所有的内容，Vue3 对此推出按需打包模块，可以大幅压缩打包后的内容体积。
根据官网对比示例，Vue2 中如果仅写了 Hello Word ，未用到任何模块 API ，打包后大小约为 32KB ；而 Vue3 同理，打包后大小约为 13.5KB ，可以明显看出升级后的 Vue3 相较于 Vue2 打包体积大幅减小。
与 Vue2 相比，Vue3 中生命周期函数也发生了变更，总结如下：
有需要的同学可以截图保存，以备不时之需。
说完了 Vue3 ，接下来我们来看看 Vite 又有什么亮眼之处。
### Vite
在 Vue3 正式发布之前，尤雨溪就提到做了一个新的前端构建工具-Vite 。其本人更是对 Vite 青睐有加，引得 Webpack 开发者直喊大哥。
Vite 究竟有什么样的神奇作用呢？它做到了本地快速开发启动：
1. 不需要等待打包操作，快速冷启动
2. 即时的模块热更新
3. 无需等待整个项目编译完成，做到真正的按需编译
在使用 Webpack 时，会经历分析依赖 => 编译打包 => 交给开发服务器渲染 整个过程。也就是说，需要先打包，之后将打包结果提供给服务器进行加载。而随着模块的不断增多，打包的体积会越来越大，造成热更新速度明显拖慢。
而 Vite 直接略过了打包步骤，直接启动开发服务器，在请求具体的模块时再对该模块进行实时编译，大大提高了启动速度。
到这里我们已经详细为大家介绍了 Vue3 升级的亮眼功能和 Vite 的优势，在下部分中我们会以项目实例出发，为大家介绍如何如何开发一款基于 Vite+Vue3 的在线表格系统。
感兴趣的小伙伴们不要错过~
#Vue3 #Vite #打包 #API #139239 #Vue2 #Vue #模块 #视图 #https
今天，葡萄带你了解如何基于 Vite+Vue3 实现一套纯前端在线表格系统。
在正式开始项目介绍之前，首先咱们首先来介绍一下 Vite 和 Vue3 。
### Vue3
Vue 是什么？大多前端开发者对这个词已毫不陌生了。三大框架孰优孰劣，众多开发者各抒己见，其中 Vue 以其“最简单、最易上手“的名号迅速积累了一大批粉丝，被广泛学习应用。
同 Angular 、React 框架一样，Vue 也是 MVVM 类型的框架，即数据驱动视图，在开发时我们只需要关注数据的变化即可。不同的是，Vue 是一个更轻量级的框架，被设计为自底向上逐层应用，其核心库只聚焦于视图层， 通过尽可能简单的 API 实现了响应式数据绑定以及组合的视图组件。
Vue 已经如此优秀，为什么还需要 Vue3 呢？
这就要提到它的不足之处了，在之前的 Vue2 中，使用的是选项型 API （ Options API ），将代码分割为不同的属性：data 、computed 、methods 等，这些方法属性各司其职。
选项型 API 固然好学易上手，与此同时也带来了一个关键问题：代码混乱，可读性差。
举个例子，现在我们想做一个列表视图功能，那么需要在 data 中写上相关的变量，在 methods 中将相关的逻辑判断和后端交互也加上。这个时候，新需求来了：添加上搜索和筛选功能。没有问题，继续将新的变量堆积在 data 中，将新的方法整理在 methods 中……写代码一时爽，后期维护的程序员傻眼了，这一堆堆的方法，到底在讲个啥。
既然 Vue2 这个弊端已经暴露出来了，自然要在它的升级版尝试解决了。所以 Vue3 推出了组合式 API （ Composition API ），正是为了解决原本 Vue2 项目中代码逻辑分散、不易理解和维护的问题。它使用方法（ function ）进行代码分割，使代码更为简洁易读。
既然做了，其他方面也不能落下啊！在性能上面，Vue3 也对 diff 算法进行了优化：
在 Vue2 中，每当数据发生变化，就会生成一个新的 DOM 树，并新 DOM 树与旧的 DOM 树进行对比，来判断节点异同，并进行更新。但完整遍历过程需要将两棵树所有节点进行比较，但实际情况中并不是所有节点内容都会变化，这就造成了性能的浪费。
Vue3 新增了静态标记，仅对标记了的节点进行对比并进一步更新，无需再遍历整个节点，实现了性能提升。
对比 Vue2 ，官方文档对 Vue 性能有具体的数据介绍：SSR 速度提高了 2~3 倍； Update 性能提高 1.3~2 倍。（程序员看到后更有信心学习了！）
除此之外，Vue 项目中也有众多 API 和模块，但在实际项目中我们并不会用到所有的内容，Vue3 对此推出按需打包模块，可以大幅压缩打包后的内容体积。
根据官网对比示例，Vue2 中如果仅写了 Hello Word ，未用到任何模块 API ，打包后大小约为 32KB ；而 Vue3 同理，打包后大小约为 13.5KB ，可以明显看出升级后的 Vue3 相较于 Vue2 打包体积大幅减小。
与 Vue2 相比，Vue3 中生命周期函数也发生了变更，总结如下：
有需要的同学可以截图保存，以备不时之需。
说完了 Vue3 ，接下来我们来看看 Vite 又有什么亮眼之处。
### Vite
在 Vue3 正式发布之前，尤雨溪就提到做了一个新的前端构建工具-Vite 。其本人更是对 Vite 青睐有加，引得 Webpack 开发者直喊大哥。
Vite 究竟有什么样的神奇作用呢？它做到了本地快速开发启动：
1. 不需要等待打包操作，快速冷启动
2. 即时的模块热更新
3. 无需等待整个项目编译完成，做到真正的按需编译
在使用 Webpack 时，会经历分析依赖 => 编译打包 => 交给开发服务器渲染 整个过程。也就是说，需要先打包，之后将打包结果提供给服务器进行加载。而随着模块的不断增多，打包的体积会越来越大，造成热更新速度明显拖慢。
而 Vite 直接略过了打包步骤，直接启动开发服务器，在请求具体的模块时再对该模块进行实时编译，大大提高了启动速度。
到这里我们已经详细为大家介绍了 Vue3 升级的亮眼功能和 Vite 的优势，在下部分中我们会以项目实例出发，为大家介绍如何如何开发一款基于 Vite+Vue3 的在线表格系统。
感兴趣的小伙伴们不要错过~
#Vue3 #Vite #打包 #API #139239 #Vue2 #Vue #模块 #视图 #https
[求面经] 年底准备跳槽有没有前端大佬有无面试资料？
# 一、前言
目前坐标在厦门，年底准备跳槽深圳。
不知道深圳那边的要求和待遇怎么样？
如果有在深圳的同学希望可以在底下留言~
# 二、技术&经验
简单说说我的技术栈吧，可能框架经验不是很理想
但是 JavaScript 基础是杠杠的
- 熟悉 JavaScript 语言
- 熟悉 Vue2 、Vue3 ，有 Vue2 源码阅读经历
- 两年 Vue2 工作经验，半年 Vue3 工作经验
- 两年原生微信小程序开发经验
- 一年 uniapp 开发经验
- 一年 React 工作经验，有 React 源码阅读经历
- 熟悉 Node.js
#经验 #Vue2 #源码 #JavaScript #Vue3 #React #熟悉 #深圳 #程序开发 #工作
# 一、前言
目前坐标在厦门，年底准备跳槽深圳。
不知道深圳那边的要求和待遇怎么样？
如果有在深圳的同学希望可以在底下留言~
# 二、技术&经验
简单说说我的技术栈吧，可能框架经验不是很理想
但是 JavaScript 基础是杠杠的
- 熟悉 JavaScript 语言
- 熟悉 Vue2 、Vue3 ，有 Vue2 源码阅读经历
- 两年 Vue2 工作经验，半年 Vue3 工作经验
- 两年原生微信小程序开发经验
- 一年 uniapp 开发经验
- 一年 React 工作经验，有 React 源码阅读经历
- 熟悉 Node.js
#经验 #Vue2 #源码 #JavaScript #Vue3 #React #熟悉 #深圳 #程序开发 #工作
心碎前端求工作
### 引言
本人被某某 Dance 裁员了，我承认、是我没有自己的思考、是我搬砖没有形成底层逻辑、其实我对我自己是有点失望的。但是，我仍然可以画页面、对接同事、完成需求。也许我没那么聪慧，不过我依旧喜欢 coding ，自认为还是个合格的切图崽吧~~
### 求职
- 工作年限：2 年前端
- 技术栈：react + ts （之前也写过 vue2 ，jq ，现在只喜欢撸 react ）
- 意向行业：很希望去 web3 （被裁后自学了 solidity ，撸了一个简易的 dex ，期待后期变 dapp 全栈），web2 也不拒绝
- 工作地点：杭州、远程、再远点也不介意
- 薪资要求：没有要求，给钱就干！现在这个环境，我只求一日三餐能有一份 16 块钱的鸭腿饭饱腹...
#### #react #Dance #coding #切图 #ts #vue2 #jq #web3 #裁后
### 引言
本人被某某 Dance 裁员了，我承认、是我没有自己的思考、是我搬砖没有形成底层逻辑、其实我对我自己是有点失望的。但是，我仍然可以画页面、对接同事、完成需求。也许我没那么聪慧，不过我依旧喜欢 coding ，自认为还是个合格的切图崽吧~~
### 求职
- 工作年限：2 年前端
- 技术栈：react + ts （之前也写过 vue2 ，jq ，现在只喜欢撸 react ）
- 意向行业：很希望去 web3 （被裁后自学了 solidity ，撸了一个简易的 dex ，期待后期变 dapp 全栈），web2 也不拒绝
- 工作地点：杭州、远程、再远点也不介意
- 薪资要求：没有要求，给钱就干！现在这个环境，我只求一日三餐能有一份 16 块钱的鸭腿饭饱腹...
#### #react #Dance #coding #切图 #ts #vue2 #jq #web3 #裁后
寻找一位熟悉前端开发的小伙伴，付费请教或者说是帮忙修改一个开源项目
各位小伙伴好，我在二次开发一个开源项目，前后端是一起的，现在的需求是：通过点击名为“批量导出”的按钮，将数据复制到剪切板内。
希望在不改变当前架构的情况下完成这个需求，目前前端框架为 Vue2 ，使用 clipboard.js v2.0.0 组件作为剪切板的载体。
本人并不会前端，主业是嵌入式（ C/C++），在学习 golang ，所以找了一个开源项目自己边学习边开发，我本人并不会 Js 。在依样画葫芦写了一段后后调试下来仍旧失败，所以想找个熟悉的小伙伴帮忙看看（当然，不是免费的）。
除此之外也想交个前端的朋友（因为有可能会需要长期咨询，哈哈哈哈），平常爱看书，看听歌，也爱玩 Github ，95 后~
感兴趣的朋友请加微信：Y29kZXJmYW5CYWJ5R28=
#前端 #剪切板 #小伙伴 #开源 #本人 #二次开发 #复制到 #Vue2 #clipboard #js
各位小伙伴好，我在二次开发一个开源项目，前后端是一起的，现在的需求是：通过点击名为“批量导出”的按钮，将数据复制到剪切板内。
希望在不改变当前架构的情况下完成这个需求，目前前端框架为 Vue2 ，使用 clipboard.js v2.0.0 组件作为剪切板的载体。
本人并不会前端，主业是嵌入式（ C/C++），在学习 golang ，所以找了一个开源项目自己边学习边开发，我本人并不会 Js 。在依样画葫芦写了一段后后调试下来仍旧失败，所以想找个熟悉的小伙伴帮忙看看（当然，不是免费的）。
除此之外也想交个前端的朋友（因为有可能会需要长期咨询，哈哈哈哈），平常爱看书，看听歌，也爱玩 Github ，95 后~
感兴趣的朋友请加微信：Y29kZXJmYW5CYWJ5R28=
#前端 #剪切板 #小伙伴 #开源 #本人 #二次开发 #复制到 #Vue2 #clipboard #js
前端框架技术选型讨论
#### vue 对比 react：
> 对比 vue2 和 vue3 ，vue3 的组合式 API 无疑是更好的选择，以下优势针对于 vue3 版本而言； react 也仅指使用 create react app 方式构建的项目
- 优势
1. 使用 vite 搭建 vue3 项目框架，自带路由管理，sass ，less 支持的很好，yarn 装一下包即可使用，无需多余配置； react 需要手动配置各种 loader
2. 组合式 API ，逻辑抽离方便，不再受限于生命周期函数； react 也可以做到
3. vite 使用[Rollup]( https://rollupjs.org/)打包，速度大幅优于 webpack ，开发体验更好； react 大多使用 webpack ，打包速度一般
- 劣势
1. vue 不支持 IE11(reactive 使用的是 Proxy ，IE 全系不支持)，react 进行相关配置后支持 IE9-IE11
2. vue TS 支持不够好； react 天生支持
3. vue2 升级 vue3 有代价，社区相关轮子未必及时适配； react 社区活跃度高，大版本升级更早，适配大概更全
总的来说，react 就是 f(state) = UI ，仅仅是一个 UI 框架，其他的交给开发者自己配置；而 vite 生成的 vue 项目是一个功能更全的脚手架，帮开发者做了很多其他事（比如路由）。
#react #vue3 #vue #vite #支持 #使用 #适配 #vue2 #API #webpack
#### vue 对比 react：
> 对比 vue2 和 vue3 ，vue3 的组合式 API 无疑是更好的选择，以下优势针对于 vue3 版本而言； react 也仅指使用 create react app 方式构建的项目
- 优势
1. 使用 vite 搭建 vue3 项目框架，自带路由管理，sass ，less 支持的很好，yarn 装一下包即可使用，无需多余配置； react 需要手动配置各种 loader
2. 组合式 API ，逻辑抽离方便，不再受限于生命周期函数； react 也可以做到
3. vite 使用[Rollup]( https://rollupjs.org/)打包，速度大幅优于 webpack ，开发体验更好； react 大多使用 webpack ，打包速度一般
- 劣势
1. vue 不支持 IE11(reactive 使用的是 Proxy ，IE 全系不支持)，react 进行相关配置后支持 IE9-IE11
2. vue TS 支持不够好； react 天生支持
3. vue2 升级 vue3 有代价，社区相关轮子未必及时适配； react 社区活跃度高，大版本升级更早，适配大概更全
总的来说，react 就是 f(state) = UI ，仅仅是一个 UI 框架，其他的交给开发者自己配置；而 vite 生成的 vue 项目是一个功能更全的脚手架，帮开发者做了很多其他事（比如路由）。
#react #vue3 #vue #vite #支持 #使用 #适配 #vue2 #API #webpack
求职：高级前端[base 杭州 or 远程]
深入理解 js 特性及 es6 语法；
熟悉 vue2 、vue3 的使用，研究过 vue2 源码；
熟悉低代码的开发，前端 vue3+typescript ，后端 nestjs ，使用新的工具库如 pinia ，naiveui ，tailwindCSS 等，jsx 进行页面开发；
熟悉前端项目优化方式，sdk 监控；
熟悉 webpack 、rollup 及 vite 打包工具，git 版本管理；
熟悉 Nodejs 的使用，研究过 Koa 源码；
熟悉 jsplumb 流程图、echart ，实现流程可视化；
了解 React ，跟过相关项目；
会使用 docker 、Nginx 等部署工具。
有意愿的老板们请加 vx：2242255392 详细了解谢谢
#熟悉 #源码 #vue2 #vue3 #工具 #使用 #前端 #js #es6 #typescript
深入理解 js 特性及 es6 语法；
熟悉 vue2 、vue3 的使用，研究过 vue2 源码；
熟悉低代码的开发，前端 vue3+typescript ，后端 nestjs ，使用新的工具库如 pinia ，naiveui ，tailwindCSS 等，jsx 进行页面开发；
熟悉前端项目优化方式，sdk 监控；
熟悉 webpack 、rollup 及 vite 打包工具，git 版本管理；
熟悉 Nodejs 的使用，研究过 Koa 源码；
熟悉 jsplumb 流程图、echart ，实现流程可视化；
了解 React ，跟过相关项目；
会使用 docker 、Nginx 等部署工具。
有意愿的老板们请加 vx：2242255392 详细了解谢谢
#熟悉 #源码 #vue2 #vue3 #工具 #使用 #前端 #js #es6 #typescript