1-1 第一个 Vue 应用 + 响应式原理

配套 Demo

在线运行：1-1-counter

终于进入 Vue 了。本章你会建立 Vue 最核心的直觉:改数据,界面自动变。这一点理解了,Vue 就懂了一半。

配套 demo:demo/1-1-counter.html,双击运行。

---

1. 回顾痛点

还记得 0-1 那个计数器吗?我们要:

1. document.getElementById 拿到元素
2. 点击时手动 msg.textContent = ... 改它

元素一多,这种「手动同步界面」会变成噩梦。Vue 的解决思路:

你只管维护数据,界面长什么样由数据决定。数据一变,Vue 自动帮你更新界面。

这叫响应式(Reactivity)。后端类比:有点像「数据库字段一改,绑定的视图自动刷新」,只不过发生在浏览器里、毫秒级。

---

2. 引入 Vue(CDN 方式)

最简单的方式:在 HTML 里引一个 <script>,全局就有了 Vue。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

这就是「CDN 方式」,零安装。第 2 部分会换成 Vite 工程化方式。需要联网加载这个脚本。

---

3. 一个最小 Vue 应用

<div id="app">
  <h1>{{ message }}</h1>           <!-- {{ }} 是插值:把数据显示出来 -->
  <p>计数:{{ count }}</p>
  <button @click="count++">加一</button>  <!-- @click 绑定点击事件 -->
</div>

<script>
  const { createApp, ref } = Vue;

  createApp({
    setup() {
      // 定义响应式数据
      const message = ref('我的第一个 Vue 应用');
      const count = ref(0);

      // setup 里 return 出去的东西,模板里才能用
      return { message, count };
    }
  }).mount('#app');  // 把这个应用「挂载」到 id=app 的元素上
</script>

运行后点按钮,count 变,界面自动跟着变——你没有写任何「改界面」的代码。这就是响应式的威力。

---

4. 拆解关键概念

(1)createApp({...}).mount('#app')

创建一个 Vue 应用,挂到页面上 id="app" 的元素里。这个 <div id="app"> 就是 Vue 的「地盘」,里面的内容由 Vue 接管。

(2)setup()

组件的「入口函数」,在这里定义数据和逻辑。必须 return 一个对象,里面的东西模板才能访问。

后端类比:setup() 像一个组件的「构造 + 初始化」,return 的对象像「暴露给视图层的字段和方法」。

(3)ref(初始值)——定义响应式数据

ref 把一个普通值包装成「响应式」的。被它包装的值变了,界面就会更新。

const count = ref(0);

⚠️ 重要坑:在 JS 里访问/修改 ref 的值,要用 .value:

count.value++;          // ✅ JS 里改值,要加 .value
console.log(count.value); // ✅ 读值也加 .value
// count++;             // ❌ 错!这是给 ref 对象本身加一,无意义

但在模板 里不用写 .value,Vue 自动帮你解开:

<p>{{ count }}</p>   <!-- 模板里直接写 count,不写 count.value -->

记住口诀:「JS 里带 .value,模板里不带」。这是初学最常踩的坑。

(4) 插值

把数据「投影」到界面上。 会显示 count 的当前值,值变了显示也变。

(5)@click

给元素绑定点击事件。@click="count++" 表示点一下就把 count 加一。@ 是 v-on: 的简写(下一章详细讲指令)。

---

5. 加个方法(逻辑复杂时)

简单逻辑可以直接写 @click="count++",复杂逻辑应抽成函数:

<button @click="increment">加一</button>

setup() {
  const count = ref(0);

  // 定义一个方法
  function increment() {
    count.value++;          // 注意 .value
  }

  return { count, increment }; // 方法也要 return 出去
}

后端类比:increment 就像一个事件处理器 / Controller 方法,用户触发它,它改状态。

---

6. Vue 2 对照(了解即可)

Vue 2 用 new Vue({ data() { return { count: 0 } } }),数据放在 data 里,模板和方法里直接 this.count 访问,没有 .value。 Vue 3 也保留了这种「Options API」写法,但新项目主流是上面的「Composition API + setup」写法,本教程主讲后者。

---

动手练习(用 demo/1-1-counter.html)

1. 运行 demo,点 + / − 按钮,观察数字变化。
2. 把 ref(0) 改成 ref(100),刷新看初始值变了。
3. 加一个「重置」按钮:<button @click="reset">重置</button>,并在 setup 里写 function reset() { count.value = 0 },记得 return。
4. 故意把方法里的 count.value++ 写成 count++,刷新点按钮——会发现没反应(体会 .value 的必要性)。

---

小结

• Vue 核心 = 响应式:改数据,界面自动更新,不用手动操作 DOM。
• createApp({ setup() {...} }).mount('#app') 是骨架。
• ref(值) 定义响应式数据;JS 里用 .value,模板里不用。
• 显示数据,@click 绑定事件。
• setup 里 return 的东西,模板才能用。

➡️ 下一章:1-2 模板语法与指令