Vue
前端框架Vue 是使用模板和响应式数据构建交互界面的 JavaScript 框架例如，修改 ref 中的 count 后，模板里 {{ count }}的文字会同步更新。先看哪个 ref 被改、模板哪里读取它；同一块界面不要混用 Vue 和 React 的写法。
先知道
也常被叫作Vue.js
开始前
知道页面里的数字可以变化。
看完后
能看懂 Vue 的 ref 和模板绑定如何让一个数值变化后同步到按钮文字。
改了 count，按钮文字怎么跟着变？
Counter.vue
1
const count = ref(0)2
<button @click="count++">3
已加入 {{ count }} 件4
</button>帆布包¥ 79
ref 里的 count.value 现在是 0
模板里的 {{ count }} 一直读着这个值；ref 变了，文字就同步变。
刚才发生了什么
- 1ref 放着当前值
ref 可以记住 count 现在是 0 还是 1。
- 2模板正在读取它
按钮里的 {{ count }} 表示：这里显示 count 当前的值。
- 3改值后同步
点击把 count 改掉后，Vue 找到模板里读 count 的位置，换成新的文字。
先盯住“哪个 ref 被改、模板哪儿在读它”；同一块界面别混用 Vue 和 React 的写法。
接下来学什么
延伸阅读 · 权威出处