Vue 实例选项详解
一份为编程初学者准备的通俗易懂指南，通过简单类比和实际示例解析Vue核心选项
data – 数据仓库
想象成组件的记忆存储中心，所有需要记住的数据都放在这里。
关键点：
✅ 必须是函数形式返回对象（避免多个实例共享数据）
✅ 数据变化会自动更新视图（响应式系统核心）
✅ 只有初始化时存在的属性才是响应式的
data() {
return {
message: “你好Vue!”,
count: 0,
user: { name: “小明”, age: 25 }
}
}
return {
message: “你好Vue!”,
count: 0,
user: { name: “小明”, age: 25 }
}
}
💡 提示：Vue通过Object.defineProperty将data属性转为getter/setter，实现响应式
methods – 方法集
存放组件所有功能函数的地方，如事件处理、业务逻辑等。
关键点：
✅ 模板中通过 @click=”methodName” 调用
✅ 可以使用this访问data和props
✅ 每次渲染都会重新执行（区别于computed）
methods: {
greet() {
alert(“你好, ” + this.user.name);
},
increment() {
this.count++;
}
}
greet() {
alert(“你好, ” + this.user.name);
},
increment() {
this.count++;
}
}
💡 提示：方法适合处理用户交互事件和需要主动触发的功能
computed – 计算属性
基于现有数据自动计算的属性，像Excel公式一样自动更新。
关键点：
✅ 必须有返回值
✅ 计算结果会被缓存，依赖不变不会重新计算
✅ 适合复杂逻辑和性能敏感的场景
computed: {
fullName() {
return this.firstName + ‘ ‘ + this.lastName;
},
discountedPrice() {
return this.price * (1 – this.discount);
}
}
fullName() {
return this.firstName + ‘ ‘ + this.lastName;
},
discountedPrice() {
return this.price * (1 – this.discount);
}
}
💡 提示：当需要根据其他值动态计算一个值时，优先使用computed而非methods
watch – 侦听器
数据的监控摄像头，当特定数据变化时执行自定义操作。
关键点：
✅ 适合执行异步操作或复杂逻辑
✅ 可以深度监听对象内部变化
✅ 立即执行选项 immediate: true
watch: {
count(newVal, oldVal) {
console.log(`计数从${oldVal}变为${newVal}`);
},
user: {
handler(newUser) {
// 用户信息变更时保存到服务器
},
deep: true // 深度监听对象内部变化
}
}
count(newVal, oldVal) {
console.log(`计数从${oldVal}变为${newVal}`);
},
user: {
handler(newUser) {
// 用户信息变更时保存到服务器
},
deep: true // 深度监听对象内部变化
}
}
💡 提示：监听数组或对象内部变化需要使用deep选项
props – 组件参数
组件接收外部传入的自定义配置，类似函数参数。
关键点：
✅ 父组件通过属性传递：<Component title=”标题” />
✅ 可以定义类型和默认值
✅ 单向数据流（子组件不能直接修改）
props: {
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
}
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
}
💡 提示：props是组件间通信的主要方式，保持单向数据流使应用更可预测
生命周期钩子
Vue实例从诞生到消亡过程中的关键节点回调函数。
主要钩子：
beforeCreate
实例刚初始化
created
实例创建完成
beforeMount
挂载前
mounted
挂载完成
beforeUpdate
更新前
updated
更新完成
beforeDestroy
销毁前
destroyed
销毁完成
💡 提示：created常用于API请求，mounted用于DOM操作，beforeDestroy用于清理定时器
Vue 选项综合演示
data & methods演示
计数器值: {{ count }}
computed演示
输入文本：
反转文本：{{ reversedText }}
watch演示
计数变化日志：
- {{ log }}
生命周期追踪
当前阶段: {{ lifecycle }}
created
mounted
updated
props演示
接收的标题: {{ title }}
接收的用户信息: {{ user.name }} ({{ user.age }}岁)