乐趣区

关于翻译:译-Vuejs-和-Alpinejs-比较

jiezi

（翻译自：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 在前端开发畛域，将会是一个受欢迎的补充抉择。

退出移动版