diff --git a/vue2-tutorials/import-script/8-计算属性.html b/vue2-tutorials/import-script/8-计算属性.html new file mode 100644 index 0000000..56970e3 --- /dev/null +++ b/vue2-tutorials/import-script/8-计算属性.html @@ -0,0 +1,41 @@ + + + + + + + + 计算属性 + + + +
+ 姓： + 名： + + 全名：{{fullName}} +
+ + + + + \ No newline at end of file diff --git a/vue2-tutorials/import-script/8-计算属性.md b/vue2-tutorials/import-script/8-计算属性.md new file mode 100644 index 0000000..a0e3489 --- /dev/null +++ b/vue2-tutorials/import-script/8-计算属性.md @@ -0,0 +1,165 @@ +# Vue2 计算属性详解文档 + +## 一、基本概念 + +计算属性（Computed Properties）是 Vue2 中用于声明式地定义派生数据的特性。它们基于响应式依赖进行缓存，只在相关依赖发生改变时才重新计算。 + +## 二、代码示例解析 + +```html +
+ 姓： + 名： + 全名：{{fullName}} +
+ + +``` + +## 三、核心特性 + +### 1. 计算属性 vs 方法 + +| 特性 | 计算属性 | 方法 | +| -------- | -------------------------- | --------------------------- | +| 缓存 | 有缓存，依赖不变不重新计算 | 每次调用都执行 | +| 调用方式 | 作为属性访问 | 需要调用执行 | +| 适用场景 | 派生数据 | 事件处理/需要重复执行的逻辑 | + +### 2. 完整语法结构 + +```javascript +computed: { + 属性名: { + get() { + // 计算逻辑 + return 派生值 + }, + set(value) { + // 可选的反向更新逻辑 + } + } +} +``` + +### 3. 简写形式（只读场景） + +```javascript +computed: { + fullName() { + return `${this.firstName}-${this.lastName}` + } +} +``` + +## 四、最佳实践 + +1. **命名规范**： + - 使用名词形式（如 `fullName`） + - 避免动词开头（这是方法的命名习惯） + +2. **纯计算逻辑**： + - 不要在getter中执行异步操作或副作用 + - 复杂计算考虑拆分为多个计算属性 + +3. **setter使用场景**： + - 当需要反向更新依赖数据时 + - 示例： + ```javascript + set(val) { + const parts = val.split('-'); + this.firstName = parts[0] || ''; + this.lastName = parts[1] || ''; + } + ``` + +## 五、高级用法 + +### 1. 依赖多个数据源 + +```javascript +computed: { + summary() { + return `总计：${this.items.length}件，${this.totalPrice}元` + } +} +``` + +### 2. 结合过滤器使用 + +```javascript +computed: { + formattedDate() { + return dayjs(this.rawDate).format('YYYY-MM-DD') + } +} +``` + +### 3. 计算属性嵌套 + +```javascript +computed: { + baseInfo() { + return { ...this.user, age: this.calcAge } + }, + calcAge() { + return new Date().getFullYear() - this.user.birthYear + } +} +``` + +## 六、性能优化 + +1. **减少大数组计算**： + ```javascript + computed: { + visibleItems() { + return this.items.filter(item => + item.name.includes(this.search) && + item.status === 'active' + ) + } + } + ``` + +2. **避免频繁计算**： + - 对于复杂计算考虑使用 `methods` + 防抖 + - 或使用 `watch` 手动控制计算时机 + +3. **缓存利用**： + - 相同依赖多次访问不会重复计算 + - 模板中可安全多次引用同一计算属性 + +## 七、常见问题 + +1. **为什么计算属性不更新？** + - 检查依赖数据是否是响应式的 + - 确保没有在getter中意外修改了依赖数据 + +2. **何时使用计算属性 vs watch？** + - 计算属性：基于多个数据的派生数据 + - watch：需要在数据变化时执行异步或开销较大的操作 + +3. **计算属性能接收参数吗？** + - 不能直接接收参数，如需参数化应使用方法 + - 替代方案：返回函数或使用闭包