[译] Vue.js 和 Alpine.js 比较

更新日期: 2021-03-03阅读: 2.6k标签: vue

(翻译自:https://medium.com/@wearethre...

vue.js 是当前世界上最流行的 JavaScript 框架之一,发布于 2014 年,第三个版本即将发布(译著:翻译时已经发布),不会有大的变化。

那么我们为什么需要另一个 JavaScript 框架呢?为什么是 Alpine?与大多数现代 JavaScript 框架不同,使用 Alpine,,只需要简单引用,不需要编译,即可执行,全部特性都可以使用。它超级轻量级,在本文编写时候,Alpine 只有 4.3kb(v.1.9.3)。但是,对我而言,Alpine.js 最吸引我的地方是它的语法,如果你已经熟知 Vue,那你基本上了解了 Alpine,这使其非常适合 Vue 开发人员转换过来,而无需学习头疼的语法和某些奇怪的知识。Alpine 的作者 Caleb Porzio(Laravel Livewire 的作者)使其大部分的语法与 Vue 保持一致,例如:v-for 变成了 x-for,v-show 变成了 x-show 等等等等,它也引进了一些缩写语法,如x-on,所以 x-on:click=""可以简写为 @click="",你可以在 https://github.com/alpinejs/a... 了解到全部13 个语法。

(你可能好奇为什么 Alpine 使用 x- 而不是 a-,其实这是因为 Alpine 的名字确定之前,Alpine 被称为 project-x,这是对他过去名称的致敬。)

我们接下来看一个简单的待办事项应用。”WWWWW HHHHHYYYYY?为什么还要再做一个TODO?”(我能听到你在问……)嗯,这个应用显示了很多基本概念,所以……


从 Vue 开始

有多种方式可以使用 Vue,最简单的方式使用,是直接从 CDN引入:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

当然,Vue 提供了 Vue CLI,要使用 Vue CLI,你需要安装 node,你可以在此找到相关信息:https://nodejs.org,然后在终端,通过命令行进行安装:

npm install -g @vue/cli

在你的 Vue CLI 命令行安装完毕后,你可以创建你的项目:

vue create my-project

接下来进入你的项目目录:

cd my-project
npm run serve


开始使用 Alpine

Alpine 当前没有命令行工具,使用 CDN 进行引入即可:新建一个 html 文件,将下面的标签贴进去即可。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.3/dist/alpine.js" defer></script>

创建我们的模板

我们打算创建一个 todo 应用,所以我们需要实现一些关键特性:

  1. Todo 列表
  2. 复选框,用于标记 Todo 任务已经完成
  3. 删除按钮,删除任意 Todo
  4. 表单,用于提交新的 Todo

创建 Vue 版

<template>
    <div id="app">
       <form @submit.prevent="addNewTask()">
           <input type="text" v-model="task" />
           <button type="submit">Add new task</button>
       </form>
       <ul>
           <li v-for="todo in todos" :key="todo.id" :class="{ 'is-complete': todo.isComplete === true }">
               <span v-text="todo.task"></span>
               <input type="checkbox" v-model="todo.isComplete" />
               <button @click="removeTask(todo.id)">Delete</button>
           </li>
       </ul>
    </div>
</template>

创建 Alpine 版

<div id="app" x-data="todos()">
    <form @submit.prevent="addNewTask()">
        <input type="text" x-model="task" />
        <button type="submit">Add new task</button>
    </form>
    <ul>
        <template x-for="todo in todos" :key="todo.id">
            <li :class="{ 'is-complete': todo.isComplete === true }">
                <span x-text="todo.task"></span>
                <input type="checkbox" x-model="todo.isComplete" />
                <button @click="removeTask(todo.id)">Delete</button>
            </li>
        </template>
    </ul>
</div>

如上所示,除了一些微小的区别,Vue 版和 Alpine.js 版的实现代码十分相似。让我们来看看这些区别:

  • 最明显的变化是对于 <template> 标签的使用,template 标签是 HTML 5 中引入的一个元素,编写在其中的代码不会被显示。在 Vue 中,我们的代码包围在 <template> 标签,而在 Alpine.js 中,我们不需要这么做,它可以使用纯 HTML 标签。最后,由于 Alpine.js 中没有虚拟 dom,例如 for 循环和 if 语句,这种智能功能的实现,我们只能通过包裹在 template 中来实现。
  • 与 Vue 不同,在 Alpine 中,我们需要自己指定数据和元素的关系,我们可以看到使用 x-data 指令的 #app 父元素。在我们的例子中,我们绑定了 todos() 函数,在此函数中,保存我们所有的数据和方法。
  • 其他的区别就是 v-* 和 x-* 写法的区别了。

我们的 Vue 数据:

export default {
    data() {
        return {
            increment: 3,
            task: '',
            todos: [
                {
                   id: 1,
                   task: 'Open VS code',
                   isComplete: true
                },
                {
                    id: 2,
                    task: 'Write a todo app in vuejs',
                    isComplete: false
                }
            ]
        }
    },
    /**/
}

我们的 Alpine 数据:

function todos() {
    return {
        //data
        increment: 3,
        task: '',
        todos: [
           {
               id: 1,
               task: 'Open VS code',
               isComplete: true
           },
           {
               id: 2,
               task: 'Write a todo app in alpinejs',
               isComplete: false
           }
       ],
    /**/
    }
}

像对于 template 的使用一样,Vue 和 Alpine 的数据定义,两者有区别,但区别很小。/**/ 标记所在的位置,表示插入上面模板的代码。两个例子均使用函数返回的 object 作为数据,在 Vue 中,我们使用:

data() {/**/}

在 Alpine 中,我们使用 todos() 函数,配合 x-data 指令,定义在模板中:

todos() {/**/}

还有两个小地方不一样:

  • 在 Vue 中,我们写在 <script> 标签中的数据方法,需要导出,而在 Alpine 中,我们可以直接将包含数据的函数写在 <script> 中。
  • 在 Vue 中,我们的 /**/部分 ,在我们的 data() 方法之外,而在 Alpine.js 中,我们的/**/部分,则在我们的 todos() (组件对象)方法中。这是因为在 Vue 中,所有的方法都应放置在 methods 对象内。

我们 Vue 中的响应方法:

export default {
    /**/
    methods: {
        addNewTask() {
            //Return if empty
            if (this.task.trim() === '') return;
            //Add new todo and clear task
            this.todos.push({
               id: this.increment++,
               task: this.task,
               isComplete: false
            });
            this.task = '';
        },
        removeTask(todoToRemove) {
            this.todos = this.todos.filter(todo => todo.id != todoToRemove);
        }
    }
}

我们 Alpine 中的响应方法:

function todos() {
    return {
        /**/
        addNewTask() {
            //Return if empty
            if (this.task.trim() === '') return;
            //Add new todo and clear task
            this.todos.push({
                id: this.increment++,
                task: this.task,
                isComplete: false
            });
            this.task = '';
        },
        removeTask(todoToRemove) {
            this.todos = this.todos.filter(todo => todo.id != todoToRemove);
        }
}

在这里,方法本身完全没有变化,只是他们在代码中的位置做了调整。在 Vue 中,响应方法位于 methods 对象中,而在 Alpine,则直接写在 todos() 方法中。


结论:

如果你是一名 Vue 开发者,但在无法使用 Vue 的情况下,或者你想快速的做一些功能演示,而无需编译,此时 Alpine 是你理想的选择。如上面的例子所示,对于 Vue 开发者而言,使用 Alpine 的基本没有学习成本。如果你不是 Vue 开发人员,但是想摆脱 jquery 或者 原生 JS 以获取简单的功能,我认为 Alpine 值得一试,它无需构建,可以快速的运行。

在多数情况下,Vue 仍然是我的选择,它有适合它使用的场景。然而个人而言,我相信 Alpine 在前端开发领域,将会是一个受欢迎的补充选择。

翻译来自:https://segmentfault.com/a/1190000039301602

链接: https://fly63.com/article/detial/10173

VueJS 实际开发中会遇到的问题

VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

Vue响应式开发,深入理解Vue.js响应式原理

深入理解Vue.js响应式原理。Vue教程有关的视频都讲到,我习惯响应式开发,在更早的Angular1时代,我们叫它:数据绑定(Data Binding)。你只需要在Vue实例的 data() 块中定义一些数据,并绑定到HTML

vue中慎用style的scoped属性

在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为scoped往往会造成我们在修改公共组件(三方库或者项目定制的组件)的样式困难,需要增加额外的工作量

基于vue移动端UI框架有哪些?vue移动端UI框架总汇

vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI等

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离

Vue2.0用户权限控制解决方案

Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

组件化的概念/特性/优点,Vue组件的使用

Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。

Vue2实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!