制造麻烦 or 解决问题?前端又出新框架啦!你还学得动吗?

Hello,大家好,我是 Sunday。

前端又上线了一个全新的框架,叫做 nue.js ,号称可以取代 Vue、React、Next、Vite,并且可以改变目前前端的开发方式:

这个框架是在 2023-09-13 日进行的第一次提交。我在 21 号看到它的时候,已经有了 2300 的 star。

最近又听到朋友提起了它,所以专门到 github 上看了一眼,发现已经有了 3700 的 star 了,这个速度可以说非常恐怖了。

再加上它这么高调的宣传文案, 所以咱们今天就来看看这个 nue.js 它到底为前端带来了什么样的全新体验。

什么是 nue.js?

NueJS 是一个非常小的(压缩后 2.3kb)JavaScript 库,用于构建 Web 界面。 它是即将推出的 Nue 生态系统的核心。

它就像 Vue.js、React.js 或 Svelte,但没有hooks, effects, props, portals, watchers, provides, injects, suspension 这些抽象概念。

了解 HTML、CSS 和 JavaScript 的基础知识,就可以开始了。

它带来了哪些改变?

nue.js 期望通过更少的代码来完成相同的功能。官方给出了对应的代码量对比。

在相同的功能下:

react 需要 2537 行代码:

Vue 需要 1913 行代码:

Svelte 需要 1286 行代码:

而 nue 只需要 208 行代码,比 react 少了 10 倍:

那么下面,咱们就通过一个 demo 来看看 nue.js 究竟是怎么使用的。

创建项目

我们可以通过一种简单的方式,来快速获取 nue.js 的基础项目:

bash 复制代码
# clone the repository
git clone https://github.com/nuejs/create-nue.git

# cd to your newly created app
cd create-nue

# install dependencies
npm install

# Build demo site and start a HTTP server
npm run start

# Open the demo on the browser
open "http://localhost:8080"

这样你可以看到一个基本的运行页面

代码结构

项目运行起来之后,接下来咱们来看下它的代码结构。

nue 的项目代码都被放到了 src 文件夹里面,并且以 .nue 结尾。

我们目前看到的页面效果就是 layout.nue 文件:

解决代码可读性问题

默认情况下,VSCode 是无法解析 .nue 文件的,所以会导致,我们看到的代码是这样的,没有任何的色彩:

想要解决这个问题,可以安装专门的插件 Nue Language Support,这样可以使 VSCode 具备解析的能力

阅读代码-组件定义

根据我们之前的开发经验,可以看出 layout.nue 中代码主要由两个组件组成:

  • 第一是:site-header
  • 第二是:item-list

这两个组件都被定义在 components.nue 文件中

那么接下来,我们来观察看 components.nue 文件的代码:

通过这个代码我们可以发现,在 nue 中,通过 @name="component-name" 的这种方式来定义组件。多个组件是可以直接被写入到一个 .nue 文件中的。

阅读代码-组件逻辑

item-list 组件中定义了 循环逻辑 咱们可以来看一下。

这个循环逻辑由两部分组成:

  • 第一是::for 这里咱们姑且把它叫做 指令
css 复制代码
<li :for="el in data">
  <h3>{ el.name }</h3>
  <p>{ el.desc }</p>
</li>
  • 第二是:script 代码内容,这里定义了 data 的数据来源
xml 复制代码
<script>
  constructor({ items }) {
    this.data = items.map(el => {
      const [name, desc] = Object.entries(el)[0]
      return { name, desc }
    })
  }
</script>

由此可见,data 的数据其实是由 items 生成的。那么这个 items 又是从何而来的呢?

阅读代码-数据定义

咱们返回 layout.nue 文件,查看 item-list 的使用,可以发现在 item-list 中有一个 props 的概念:

它指定 items 其实是 projects。而 projects 则是被定义在 content.data 文件中的。也就是说:.data 文件就是 nue 中定义状态(数据)的地方

代码逻辑总结

那么根据以上内容,咱们可以知道。在 nue 中:

  1. 多个组件可以定义在一个 .nue 文件中
  2. 组件通过 @name="component-name" 进行命名
  3. nue 中具备类似指令的概念 :for,同时类似 jsx(html+js混写)的概念 script 标签内代码
  4. 组件具备 prop 的概念,同时状态会被定义在单独的 .data 文件中

个人对 NueJS 的看法

截止到目前,咱们对 nue.js 的一些简单了解。其实可以看出 nue.js 中是借鉴了一些 vue 或者 react 语法风格的。

同时 nue.js 把数据和视图进行了更加深度的分离,只不过这样的一种分离可能会导致在实际的项目开发中出现:来回切换视图和数据文件的情况。

并且,根据 nue.js 提供的示例代码,并没有看出它比 vue 或者 react 简单的地方,当然这也有可能是因为我对 nue.js 理解的还比较浅的原因导致的。

对于目前的前端而言,各种框架一直都是层出不穷的:Vue、React、Svelte 等等。 NueJS 想要在国内占据一席之地,甚至是吃掉一部分 Vue 或者 React 的市场,估计还有很长的路要走~~~

相关推荐
YBN娜14 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=14 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck18 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!39 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。44 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
晴天飛 雪1 小时前
React 守卫路由
前端框架·reactjs