Vue.js 基础概念与核心机制详解

Vue.js 概述与设计哲学

介绍

Vue.js 是一个用于构建 Web 应用接口的库。

从技术层面看，Vue.js 的核心聚焦于 MVVM 架构中的 ViewModel 层。它通过两种方式连接视图与数据模型：一是实际的 DOM 操作，二是输出格式的抽象化处理，这分别由指令（Directives）和过滤器（Filters）实现。

在设计哲学上，Vue.js 力求使 MVVM 数据绑定 API 尽可能简洁。模块化和可组合性也是其重要的设计考量。Vue 并非一个全功能的框架，而是被设计为简单且灵活的工具。开发者可以使用它快速进行原型开发，也可以将其与其他库混合搭配，以定义前端技术栈。

Vue.js 的 API 设计参考了 AngularJS、KnockoutJS、Ractive.js 和 Rivets.js。尽管存在相似之处，但 Vue.js 提供了独特的价值，允许开发者从现有框架中取其精华。

即使您已熟悉部分术语，仍建议阅读以下概念概述，因为在 Vue.js 的语境下，这些术语的含义可能与您的既有认知有所不同。

概念概述

MVVM 核心概念解析

ViewModel

ViewModel 是一个同步模型与视图的对象。在 Vue.js 中，ViewModel 是通过实例化 Vue 构造函数或其子类创建的。

var vm = new Vue({ /* options */ })

这是开发者在使用 Vue.js 时交互的主要对象。更多细节请参阅 Class: Vue。

View

View 指用户实际看到的 HTML 或 DOM 结构。

vm.$el // The View

在使用 Vue.js 时，除非使用自定义指令，否则您几乎无需手动操作 DOM。当数据更新后，视图的更新会自动触发。视图更新可以精确到每个 textNode 节点，并且支持批处理和异步执行，从而提供更好的性能。

Model

Model 是一个经过轻微修改的 JavaScript 对象。

vm.$data // The Model

在 Vue.js 中，模型仅仅是普通的 JavaScript 对象或数据对象。您可以直接操作其属性，并通过 ViewModel 观察它们以获取变更通知。Vue.js 利用 ES5 的 getter/setter 对 data 对象中的属性进行转换，这使得直接操作成为可能，而无需使用脏检查（dirty checking）。

data 对象在适当的时候会产生突变，因此直接修改它与通过引用修改 vm.$data 效果相同。这也方便了多个 ViewModel 实例观察同一块数据。

技术细节请参阅 Instantiation Options: data。

指令与数据绑定机制

Directives

指令是私有的 HTML 属性，用于告知 Vue.js 执行特定的 DOM 处理操作。

<div v-text="message"></div>

例如，div 元素上有一个 v-text 指令，其值为 message。这表示告诉 Vue.js 保持该 div 节点的内容与 ViewModel 中的 message 属性同步。

指令可以封装任意 DOM 操作。例如，v-attr 用于操作属性元素，v-repeat 基于数组克隆元素，v-on 用于附加事件监听器（稍后讨论）。

Mustache Bindings

您还可以使用 Mustache 风格的绑定，应用于文本和属性。它们会被翻译成 v-text 和 v-attr 指令。例如：

<div id="person-{{id}}">Hello {{name}}!</div>

虽然这种绑定方式很方便，但需要注意以下几点：

如果在设置 image 的 src 属性时，会发送 HTTP 请求。因此，当模板首次解析时可能出现 404 错误，此时使用 v-attr 更为合适。

在解析 HTML 时，Internet Explorer 会删除无效的内部 style 属性。因此，为了支持 IE 并绑定内联 CSS，建议始终使用 v-style。

在 v-html 内部，您可以使用三个大括号（{{{ ... }}}）处理非转义的 HTML。但这存在潜在的 XSS 攻击风险，可能打开 Windows 等漏洞。因此，建议仅在数据绝对安全时使用，或通过自定义管道过滤器清理不可信的 HTML。

过滤器与组件化开发

Filters

在更新视图之前，可以使用函数处理原始数据。它们通过“管道”指令或绑定使用：

<div>{{message | capitalize}}</div>

现在，在 div 的文本内容更新之前，message 的值将通过 capitalize 函数进行处理。详情请参阅 Filters in Depth。

Components

在 Vue.js 中，组件是一个简单的视图模型构造函数，通过 Vue.component(ID, constructor) 注册。通过关联的 ID，可以使用 v-component 指令嵌套其他视图模型的模板。这种简单的机制使得声明视图模型的重用和组合方式类似于 Web 组件，无需最新的浏览器支持或重型 polyfills。通过将应用程序分解为更小的组件，最终得到一个高度解耦且易于维护的代码库。更多细节请参阅 Composing ViewModels。

A Quick Example

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done ? 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>

 
var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn vue.js'
      }
    ]
  }
})

粗略翻译，有错误请指出