在前端开发的江湖里Vue.js 一直以其优雅和易用性著称。hen多刚入行的朋友，或者是从 jQuery 转过来的老手，刚开始接触 Vue 时往往会被它那套“响应式”的魔法迷得眼花缭乱。其实剥去层层外衣，Vue 的核心无非就是如何geng高效地操作数据，以及如何让数据的变化自动反映到视图上。今天我们就来聊聊 Vue 的基石——基础语法，以及两个让无数开发者爱不释手的神器：计算属性和侦听属性。

一、 起手式：构建一个 Vue 应用

在深入语法细节之前，我们得先有个“家”。在 Vue 3 中，我们不再像 Vue 2 那样直接 `new Vue`，而是使用geng加模块化的 `createApp` 方法。这就像是盖房子，先得打好地基。

通常我们会通过解构赋值把 `createApp` 拿出来然后定义一个根组件对象。这个对象本质上就是一个普通的 JavaScript 对象，里面包含了 Vue 运行所需的各种选项，比如 `data`、`methods` 等等。Zui后别忘了用 `mount` 方法把它挂载到页面的某个 DOM 节点上，比如一个 `id` 为 `app` 的 `div`。

// 引入 Vue
const { createApp } = Vue;
// 定义根组件
const root = {
    data {
        return {
            message: 'Hello, Vue World!'
        }
    },
    template: `
{{ message }}
`
}
// 创建并挂载
createApp.mount;

这里有个小细节，Ru果你在 VS Code 里写 `template` 模板字符串，强烈建议去装一个 `es6-string-html` 插件，并在模板上方加上 `/*html*/` 注释，这样代码高亮会舒服hen多，不然写 HTML 就像在写天书一样。

二、 基础语法：模板与指令的艺术

Vue 的模板语法非常直观，Zui经典的就是“大胡子”语法——{{ }}。这叫文本插值，它会把里面的变量或者表达式替换成真正的数据。比如 {{ 1 + 1 }}，页面上就会显示 2。

1. 内容渲染与那些“不老实”的指令

除了简单的文本，我们经常需要插入 HTML 标签。这时候 v-html 就派上用场了它相当于 innerHTML，Neng解析标签。而 v-text 则比较老实它和 {{ }} 差不多，但不会解析标签，相当于 innerText。

有时候，我们可Neng不想让 Vue 编译某个标签里的内容，比如想展示 {{ message }} 这段原始字符，这时候就要用到 v-pre，它会跳过这个元素及其子元素的编译过程。

2. 属性绑定：让元素动起来

HTML 标签的属性，比如 srchrefclass，Ru果写死就太没意思了。Vue 提供了 v-bind 指令来动态绑定属性。

比如绑定一个图片地址：。在绑定样式时:class 特别强大，它支持字符串、对象甚至数组。对象语法 { 'active': isActive } 尤其常用，当 isActive 为 true 时类名就会生效。

3. 事件处理：响应用户的每一次点击

有数据展示，就得有用户交互。Vue 使用 v-on来监听事件。比如 @click="doSomething"。这里的 doSomething 定义在 methods 选项里。

在 methods 中定义的方法，要注意 this 的指向，它默认指向 Vue 实例本身。千万别用箭头函数定义 methods，否则 this 就会乱套，找不到数据了。

4. 表单双向绑定：v-model 的魔法

这绝对是 Vue Zui方便的功Neng之一。v-model 本质上是语法糖，它结合了属性绑定和事件监听。对于输入框，它相当于 :value="msg" @input="msg = $event.target.value"。你不需要手动去获取输入框的值，数据会自动同步。

当然v-model 还有hen多修饰符，Neng让表单处理geng细腻：

.lazy懒加载，把 input 事件变成 change 事件，不再是输入时触发，而是失去焦点或回车时才触发。

.number自动把用户的输入转成数字类型，避免处理字符串拼接的尴尬。

.trim自动过滤掉首尾的空格，这对于用户名输入框来说简直是救星。

5. 条件与列表渲染

v-if 和 v-show douNeng控制元素的显示隐藏，但原理不同。v-if 是真正的“销毁”和“重建”，条件不满足时 DOM 里压根没这元素；而 v-show 只是简单粗暴地切换 CSS 的 display 属性。所以频繁切换的场景用 v-show 性Nenggeng好。

列表渲染离不开 v-for。使用时一定要记得绑定 key，这是为了让 Vue 的虚拟 DOM 算法Neng高效地复用节点。这里有个大坑：千万不要把 v-if 和 v-for 用在同一个元素上。因为 v-for 的优先级比 v-if 高，这会导致每次渲染dou先循环再判断，性Neng极差。解决办法是用一个 template 标签包裹，或者在外层套一层逻辑。

三、 计算属性：缓存带来的性Neng飞跃

在模板里写太多的逻辑表达式，比如 {{ message.split.reverse.join }}，会让模板变得臃肿且难以维护。这时候，计算属性 computed 就登场了。

计算属性定义的时候是一个函数，但在使用的时候它是一个属性。它Zui大的特点是缓存。只要它依赖的数据没有发生变化，多次访问计算属性会直接返回缓存的结果，而不会重新执行函数。

举个例子，比如我们要计算购物车里所有商品的总价：

computed: {
    totalPrice {
        // 使用 reduce 方法累加价格
        let sum = this.list.reduce => prev + curr.price, 0);
        return sum.toFixed;
    }
}

相比之下Ru果在 methods 里定义一个方法，每次页面重新渲染，这个方法dou会被重新调用一遍，哪怕数据根本没变。这就是为什么在处理复杂逻辑时我们geng倾向于使用计算属性。

虽然计算属性默认是只读的，但Ru果你非要给它赋值，也是Ke以的，只不过需要把它定义成一个对象，包含 get 和 set 方法。不过实际开发中，直接修改计算属性的情况比较少见，通常还是通过修改依赖的数据来间接改变它。

四、 侦听属性：观察者的敏锐直觉

Ru果说计算属性是为了“派生数据”，那么侦听属性 watch 就是为了“响应变化”。它允许我们执行异步操作，或者开销比较大的逻辑。

当需要在数据变化时Zuo点什么watch 是Zui佳选择。默认情况下组件初始化时不会执行 watch，只有数据变化了才会触发。但Ru果你希望它一上来就执行一次Ke以配置 immediate: true。

侦听器还Neng获取到数据变化前后的值，这在处理一些需要对比状态的逻辑时非常有用。

五、 指令修饰符：细节决定成败

Vue 的指令系统之所以强大，hen大程度上归功于各种修饰符。它们就像给指令加上了各种“Buff”。

1. 事件修饰符

处理 DOM 事件时我们经常需要调用 event.preventDefault 或 event.stopPropagation。Vue 提供了geng优雅的方式：

.prevent阻止默认事件，比如点击链接不跳转，表单提交不刷新页面。

.stop阻止事件冒泡，点击子元素不会触发父元素的事件。

.capture添加事件监听器时使用事件捕获模式。

.self只有当事件发生在元素本身时才触发，而不是在子元素上冒泡上来时触发。

.once事件只触发一次比如支付按钮点完就失效。

.passive告诉浏览器你不想阻止事件的默认行为，主要用于提升滚动性Neng。注意它不Neng和 .prevent 一起用。

2. 按键修饰符

在监听键盘事件时我们经常需要判断具体的按键。Vue 允许在 v-on 或 @ 后面接按键名，比如 @keyup.enter="submit"，这样用户按下回车键时才会触发提交。常用的还有 .tab.delete.esc.space 以及方向键等。

Vue 的基础语法、计算属性和侦听属性，构成了现代 Vue 开发的“三板斧”。掌握好这些，你就Neng应对绝大多数业务场景的开发需求。虽然这些概念kan起来零碎，但它们dou围绕着“数据驱动视图”这一核心思想。多写代码，多尝试不同的组合，你会发现 Vue 的设计之美，那种行云流水般的开发体验，一旦习惯了就真的回不去了。希望这篇文章Neng帮你理清思路，在 Vue 的进阶之路上走得geng稳！

---