前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >2024重大更新!Blog.Admin更新Vue3.0

2024重大更新!Blog.Admin更新Vue3.0

作者头像
老张的哲学
发布于 2024-02-22 07:46:49
发布于 2024-02-22 07:46:49
36800
代码可运行
举报
文章被收录于专栏:NetCore 从壹开始NetCore 从壹开始
运行总次数:0
代码可运行

BCVP社区自从成立以来,一直致力于在国内推广以ASP.NETCore+VUE为核心的前后端分离架构的技术传播,从几年前我自己开发代码,到现在成立了BCVP开发组的五名成员,以“学以致用,学以分享”为目的,对开源的项目也一直从未收费,也一直从未断更,其实我们每个人都是开源社区的既得利益者,只是总需要一批人去把更多的内容继续进行分享升华,BCVP开发者社区成员就是这样一批人。

这几年主要是BlogCore项目上做更新,从3.0一直到了现在的8.0,前端一直改动不多,但是最近几个月,开发组内有两位小伙伴在学习VUE3.0,那就以他们两个为核心(@繁星、@闲月疏云)推动Blog.Admin项目,升级到vue3.0版本。我目前也在跟着学习中,就是一个打酱油的。

项目地址: https://github.com/BlogCore-Any-Vue-Pro-Team/Blog.Admin.Vue3.Beta

当然目前还是免费,不过如果您愿意打赏,我们也很开心和增加更大的动力。社区的发展离不了大家的鼓励和支持。目前3.0的版本BCVP开发组还在开发中,相信在不久的将来,会越来越完善!当然大家也可以选择其他的前端框架,只要能保证和后端BlogCore相互匹配即可,之所以要把BlogAdmin进行升级,就是想着带着大家学一学新知识。

代码如图:目前还是以JS为主,慢慢向TS转移,先把功能实现了。

启动截图(速度是毫秒级别的):

界面截图(和之前风格类似):

在说代码之前,我们先简单学习一下,大家一直说的很多的——VUE3.0,作者尤大本人在直播中也提到新的Vue会比老的Vue有1.3到2倍的提升,来看看有哪些变化。

1

第一节:Vue2升级Vue3的优势

优势一、更容易维护

1.采用组合式API

2.更好的TypeScript支持

那什么是组合式API?

组合式API是一系列API的集合,使我们可以使用函数而不是声明选项的方式书写Vue组件。它是一个概括性的术语,涵盖了以下方面的API:· 1、响应性 APl:例如ref()和reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。 2、生命周期钩子:例如onMounted()和onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。 3、依赖注入:例如 provide() 和 inject(),使我们可以在使用响应性 APl 时,利用Vue 的依赖注入系统。

举个例子:

Vue2采用的是选项式API,而Vue3是组合式API,来看一下二者的区别

Vue2的写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
export default{
    data(){
        return{
            count: 0
        }
    }
    methods:{
        addCount(){
            this.count++
        }
    },
}
</script>

Vue3的写法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
import { ref } from 'vue'
const count = ref(0)
const addCount = () => count.value++
</script>

为什么要使用组合式API:

1.代码量减少,更好的逻辑复用

2.分散式维护转为集中式维护,更易封装复用,更灵活的代码组织

搭配<script setup>使用组合式 API 比等价情况下的选项式 API 更高效,对代码压缩也更友好。

这是由于<script setup>形式书写的组件模板被编译为了一个内连函数,和<script setup>中的代码位于同一作用域。不像选项式 API 需要依赖 this 上下文对象访问属性,被编译的模板可以直接访问<script setup> 中定义的变量,无需一个代码实例从中代理。这对代码压缩更友好,因为变量的名字可以变得更短,但对象的属性名则不能。

优势二、更快的速度

1.重写diff算法

2.模版编译优化

3.更高效的组件初始化

说明:

使用了高效的模板编译器,这将模板的编译过程从运行时移到了构建时。这减少了 DOM 操作、组件实例化和响应式对象的重复计算。

使用了静态提升技术,改进了编译器,这使得在渲染过程中,只有动态内容需要再次计算。这显著减少了不必要的重新计算,并减少了 DOM 操作和虚拟 DOM 对象的生成。

对于非常深套的嵌套组件结构,Vue 3.0 改进了它的 diff 算法,这可以在处理虚拟 DOM 树时显著提高性能。Vue 3.0 的 diff 算法使用更高效的机制来跳过不需要更新的子树。

优势三、更小的体积

1.良好的TreeShaking

2.按需引入

说明:

Vue 3.0引入了Tree-shaking特性,目的是优化构建过程,以及减小最终生成的代码大小。Tree-shaking是一种在构建时移除未使用代码的技术,通过分析模块的依赖关系,将没有被引用的部分从最终的打包文件中排除掉。这可以大大减少应用的体积,提高性能。

比如:你在开发vue的时候,有没有考虑过一个问题,使用各种工具和库来帮助我们构建功能,但是其中我们只用到了一个小功能,而大部分功能其实是用不到的。Tree-shaking 就可以帮助我们只留下我们需要的东西,把其他不需要的东西都自动丢掉,从而减小体积。

优势四、更优的数据响应式

Vue3 使用 Proxy 替代了 Object.defineProperty 来做响应式. 因为 Object.defineProperty 的功能有限 (无法监听删除、数组下标、in事件、apply等), 所以 Vue2 做了很多功能补齐, 甚至有的就不支持. 而到了 Vue3 使用 Proxy 带来了全新的响应式解决方案

2

第二节:如何创建项目

create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供急速响应

1.前提环境条件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Node.js大于等于16.0
node -v

注意:安装的时候,可能会有一些node版本提示,比如要16.4,或者≥18.0

这里推荐使用nvm-desktop来进行安装,可以同时安装多个版本,而且版本切换也很直观和方便。

如图:

2.创建一个Vue应用

注意以下内容仅仅是为了BlogAdmin而做的选择,自己可以先练习一下,根据自己公司具体的情况来定是否勾选:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm init vue@latest
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
√ 请输入项目名称:... vue-project
√ 是否使用 TypeScript 语法?... 否
√ 是否启用 JSX 支持?... 否
√ 是否引入 Vue Router 进行单页面应用开发?... 是
√ 是否引入 Pinia 用于状态管理?... 是
√ 是否引入 Vitest 用于单元测试?... 否
√ 是否要引入一款端到端(End to End)测试工具?» 不需要
√ 是否引入 ESLint 用于代码质量检测?... 是
√ 是否引入 Prettier 用于代码格式化?...

正在构建项目 C:\Users\laozh\Desktop\3333\vue-project...

安装截图:

3.主要核心文件解析:

1.vite.configjs-项目的配置文件:基于vite的配置,类似之前的vue.config.js,相关功能比如路由前缀,又比如反向代理配置 2.package.json-项目包文件:核心依赖项中,Vue变成3.x版本和增加了vite 3.main.js-主程序入口文件:注意app创建的方式发生了重大变化,createApp函数创建应用实例 4.app.vue-项目根组件:SFC单文件组件(script - template - style) 变化一:脚本script和模板template顺序调整 变化二: 模板template不再要求唯一根元素 变化三:脚本script添加setup标识支持组合式API 5.index.html-前端单页面入口:提供id为app的挂载点

4.主要代码说明

vscode打开项目

可以尝试安装插件Vue Language Features (Volar)

作用:默认的vue文件在vs code里全部是一样的文字,且不能点击。该插件让vue文件的内容有了颜色区分,同时支持点击相对路径文件的跳转,class名的样式定位(前提是这个class名和样式必须在同一个文件里)

App.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 加上setup标识允许在script中直接编写组合式api -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>


<template>
    <!-- 不再要求template中只能有一个根元素了 -->
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />


    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>


  <main>
    <TheWelcome />
  </main>
</template>


<style scoped>
</style>

main.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
//mount设置我们的挂载点 #app(id为app的盒子)
createApp(App).mount设置我们的挂载点('#app')

index.html

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-02-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 NetCore 从壹开始 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue3知识点:自定义hook函数
答案:请看官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html
刘大猫
2024/10/31
1400
再遇vue之vue3新特性
首先说明一下,vue2和vue3是Vue.js的两个主要版本。目前vue3已经更新到3.3.4的版本了
用户6297767
2023/11/21
5500
再遇vue之vue3新特性
Vue3学习Day1 有哪些新特性?解决了Vue2的那些问题?
Vue 3 就是继承了 Vue 2 具有的响应式、虚拟 DOM,组件化等优点的同时,解决了历史包袱。从以下7个方面来看下Vue3的新特性。
用户1072003
2023/02/23
5720
Vue3学习Day1  有哪些新特性?解决了Vue2的那些问题?
Vue3.0 beta版学习笔记
https://github.com/vuejs/vue-next
用户7572539
2020/08/26
7230
Vue3 对比Vue2,你找到哪些变化?
希望本篇文章能帮你加深对 Vue 的理解,能信誓旦旦地说自己熟练Vue2/3。除此之外,也希望路过的朋友可以帮助我查漏补缺🤞。 内容混杂用法 + 原理 + 使用小心得,建议收藏,慢慢看。 区别 生命周期的变化 整体来看,变化不大,只是名字大部分需要 + on,功能上类似。使用上 Vue3 组合式 API 需要先引入;Vue2 选项 API 则可直接调用,如下所示。 // vue3 <script setup> import { onMounted } from 'vue' onMounted(
@超人
2022/04/14
1.2K0
推荐:非常详细的vue3.0开发笔记(7k字)
当将当前的技术栈从Vue 2.0升级到Vue 3.0时,有许多值得考虑的理由。以下是10个升级到Vue 3.0的理由:
微芒不朽
2023/08/21
5370
推荐:非常详细的vue3.0开发笔记(7k字)
面试官:你了解过Vue3吗?(Vue3知识点汇总)
vue3已成今年趋势,据我了解很多公司在今年都有计划将技术栈从vue2升级至vue3。所以在今年的金三银四过程中vue3也一定会是面试的大热门。在这里我汇总整理一些vue3必会知识点,持续更新,感谢关注!
inline705
2022/03/01
4.3K0
面试官:你了解过Vue3吗?(Vue3知识点汇总)
Vue2和Vue3的底层原理详解
Vue.js是一个流行的JavaScript框架,用于构建用户界面。Vue.js通过MVVM架构模式和响应式数据绑定来实现数据和UI的分离。Vue.js的底层原理在Vue2和Vue3中略有不同。
世间万物皆对象
2024/03/20
8340
Vue3学习笔记(一)——MVC与vue3概要、模板、数据绑定与综合示例
框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。Vue是框架而jQuery则是库。
张果
2022/10/28
4.1K0
Vue 3.0响应式API案例
proxy翻译过来的意思就是”代理“,ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层”拦截“,返回一个新的代理对象,之后所有在Proxy中被拦截的属性,都可以定制化一些新的流程在上面,先看一个最简单的例子。
张哥编程
2024/12/17
1030
Vue 3.0响应式API案例
Vue3学习笔记
①性能的提升 打包大小减少41%、初次渲染快55%,更新渲染快133%,内存减少54%…… ②源码的升级
玖柒的小窝
2021/09/29
8760
Vue3学习笔记
Vue篇(011)-vue3带来的新特性/亮点
2. Tree shaking support: 按需编译,体积比vue2.x更小;
齐丶先丶森
2022/05/12
1.2K0
Vue篇(011)-vue3带来的新特性/亮点
Vue3.0 新特性以及使用变更总结(实际工作用到的)
Vue3.0 在去年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0。去年年底我们新项目使用Vue3.0来开发,这篇文章就是在使用后的一个总结, 包含Vue3新特性的使用以及一些用法上的变更。
@超人
2021/03/23
2.6K0
Vue3.0 新特性以及使用变更总结(实际工作用到的)
面试官:vue2和vue3的区别有哪些?
对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上 + “on”,功能上是类似的。不过有一点需要注意,Vue3 在组合式API(Composition API,下面展开)中使用生命周期钩子时需要先引入,而 Vue2 在选项API(Options API)中可以直接调用生命周期钩子,如下所示。
bb_xiaxia1998
2022/10/03
1.2K0
vue 随记(3):“新时代”的姿势
•性能上:最多比vue2 快2倍•静态标记提升•proxy取代defineProperty•tree shaking:按需编译打包代码•composition api :类似hook的编码风格•支持typescript:面向未来目前的代码 98% 以上使用 TypeScript 编写。如果你还没有学习 TypeScript,请尽快学习,否则可能看不懂源码。另外有件事情说出来可能会让你非常惊讶,Vue 3 的源代码完全没有使用 class 关键字!(只在测试代码和示例代码里用到了 class 关键字)•custom renderer api:自定义渲染
一粒小麦
2020/07/21
6860
学习Vue3.0,先从搭建环境开始
这是小编关于Vue3.0系列文章的第二篇,本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境,通过本文的学习,你将学习到以下内容:
前端老王
2020/09/28
1.2K0
学习Vue3.0,先从搭建环境开始
vue3简易入门剖析
,发音同 “veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
张哥编程
2024/12/13
4250
Vue3 中有哪些值得深究的知识点?
众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!
玖柒的小窝
2021/12/07
1.1K0
Vue3 中有哪些值得深究的知识点?
Vue3 快速入门及巩固基础
Vue 是一款用于构建用户界面的 JavaScript 框架,它基于 HTML,CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效的开发用户界面
很酷的站长
2022/12/04
3.9K0
Vue3 快速入门及巩固基础
Vue.js的发展史(一)
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。 来源官方解释-----简介 | Vue.js (vuejs.org)
Insecure Fluoxetine
2024/05/24
2900
Vue.js的发展史(一)
相关推荐
vue3知识点:自定义hook函数
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验