Vue]Vue 快速教程 - Vue 教程

参考：教程 | Vue.js (vuejs.org)

该教程需要前置知识：HTML, CSS, JavaScript

学习前置知识，你可以去 MDN

Vue framework 是一个 JavaScript framework，以下简称 Vue，下面是它的特点

• 声明式渲染（Declarative Rendering）：即声明 JavaScript 对象，改变对象状态来更改 HTML，这个过程由 Vue 完成
• 响应式（Reactivity）：JavaScript 的对象状态改变会马上反映到 DOM（不知道 DOM 的去查 MDN 文档）

Declarative Rendering and Reactivity

Vue 实现了：

JavaScript Obejct <-> Vue <-> DOM

但是 Vue 显然是利用 JavaScript 机制，那就是 Proxy，Proxy 可以实现

JavaScript Object <-> Proxy <-> DOM

所以 Vue 把 Proxy 改造后封装成了 reactive()，调用这个 API 会返回一个特殊的对象，称之为响应式对象（reactive object）。

• reactive()

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

但是 reactive() 参数只能是对象（还有数组和内置类型），Vue 又把 reactive() 改造封装成了 ref()，它也会返回一个响应式对象，并且带一个 .value property，只不过它的参数可以填写值。

• ref()

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

以上给 ref() 或 reactive() 填写参数得到响应式对象的过程，就被成为数据绑定（data binding）。