写点什么

前端:Vue2.0 和 Vue3.0 的一些入门对比

作者:秃头小帅oi
  • 2024-02-28
    福建
  • 本文字数:1764 字

    阅读完需:约 6 分钟

前端:Vue2.0和Vue3.0的一些入门对比

1.在 Vue2 中我们通过通过用 Vue 函数创建一个新的 Vue 实例,例如:

var vm = new Vue({  // 选项})
注意:一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成
复制代码

1.1 在 Vue2 中我们挂载实例:

<div id="app"></div>new Vue({  el: '#app'})
复制代码

1.2 在 Vue2 中生命周期钩子:

beforeCreate    组件实例被创建之初created    组件实例已经完全创建beforeMount    组件挂载之前mounted    组件挂载到实例上去之后beforeUpdate    组件数据发生变化,更新之前updated    组件数据更新之后beforeDestroy    组件实例销毁之前destroyed    组件实例销毁之后activated    keep-alive 缓存的组件激活时deactivated    keep-alive 缓存的组件停用时调用errorCaptured    捕获一个来自子孙组件的错误时被调用
复制代码

1.3 在 Vue2 中注册组件:

Vue.component('my-component-name', {  // ... 选项 ...})
复制代码

2.在 Vue3 中通过 createApp 函数创建一个新的 应用实例,例如:

import { createApp } from 'vue'
const app = createApp({ /* 根组件选项 */})
复制代码

2.1 在 Vue3 中挂在实例:

<div id="app"></div>app.mount('#app')应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数,可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串  
复制代码

2.2 在 Vue3 中生命周期钩子:

onBeforeMount – 在挂载开始之前被调用:相关的 render 函数首次被调用。onMounted – 组件挂载时调用onBeforeUpdate – 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的。onUnmounted – 卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。onActivated – 被 keep-alive 缓存的组件激活时调用。onDeactivated – 被 keep-alive 缓存的组件停用时调用。onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
复制代码

2.3 在 Vue3 中注册组件:

import { createApp } from 'vue'
const app = createApp({})
app.component( // 注册的名字 'MyComponent', // 组件的实现 { /* ... */ })
复制代码

在项目实战开发中,尤其是大平台系统的搭建,针对不同业务场景,需要为用户多次编写用于录入、修改、展示操作的相应表单页面。一旦表单需求过多,对于开发人员来说,算是一种重复开发,甚至是繁杂的工作。随之而来,诞生了低代码的思路。

低代码,简单理解就是通过可视化拖拽的方式即可生成页面,同时能够保持页面的统一风格,快速搭建页面,生成前后端代码。

与其他框架相比,Vue 区别于市场上的繁杂,它注重易用性和迅速上手的优势,给开发者提供了更大的自由度。无论是用于构建简单的个人项目,还是复杂的企业级应用,Vue 都能胜任。

Vue3.0 作为最新版本的 Vue.js 框架,拥有更强大的性能和更丰富的功能,为使用它的低代码开发平台注入了全新的活力。而 JNPF 快速开发平台作为其应用的典范之一,利用 Vue3.0 的优势,在低代码开发领域斩获巨大成功。

从官方材料上可以看到,JNPF 快速开发平台的 Vue3.0 版本是基于 Vue3.x、Vue-router4.x、Vite4.x、Ant-Design-Vue3.x、TypeScript、Pinia、Less 的后台解决方案,采用 Pnpm 包管理工具,旨在为中大型项目做开发,提供开箱即用的解决方案。

体验平台:JNPF 快速开发平台(Vue3)

演示地址:https://www.jnpfsoft.com/?csdn

基于 SpringBoot+Vue3 的全栈开发平台,JNPF 满足微服务、前后端分离架构,通过可视化流程建模、表单建模、报表建模工具,快速构建业务应用,平台即可本地化部署,也支持 K8S 部署。 


除了上述功能,还配置了图表引擎、接口引擎、门户引擎、组织用户引擎等可视化功能引擎,基本实现页面 UI 的可视化搭建。内置有百种功能控件及使用模板,使得在拖拉拽的简单操作下,也能大限度满足用户个性化需求。由于 JNPF 平台的功能比较完善,本文选择这项工具进行展开,使你更加直观看到低代码的优势。

用户头像

摸个鱼,顺便发点有用的东西 2023-06-19 加入

互联网某厂人(重生版)

评论

发布
暂无评论
前端:Vue2.0和Vue3.0的一些入门对比_前端_秃头小帅oi_InfoQ写作社区