【vue源码02】深入学习vue源码实现——methods方法的底层实现

Vue 2 与 Vue 3 methods 的底层实现及设计模式详解

---

📁 Vue 2 中 methods 的底层实现（基于 v2.6.14）

文件路径：

src/core/instance/methods.js

---

✅ initMethods(vm, methods) 函数源码（完整带注释）

function initMethods (vm: Component, methods: Object) {
  // 获取组件实例上的 _data 属性，即 data() 返回的对象
  const props = vm._props

  // 遍历用户定义的 methods 对象
  for (const key in methods) {
    // 如果方法名为空函数或非函数类型，给出警告
    if (process.env.NODE_ENV !== 'production') {
      if (methods[key] == null) {
        warn(
          `Method "${key}" has an undefined value in the component definition. ` +
          `Did you reference the function without parentheses?`,
          vm
        )
      }
      // 检查是否和 props 冲突
      if (props && hasOwn(props, key)) {
        warn(
          `Method "${key}" has already been defined as a prop.`,
          vm
        )
      }
      // 检查是否和 Vue 内部属性冲突（如 $xxx）
      if ((key in vm) && isReserved(key)) {
        warn(
          `Method "${key}" conflicts with an existing Vue instance method. ` +
          `Avoid defining component methods that start with $ or _.`,
          vm
        )
      }
    }

    // 如果是函数，则绑定 this 到组件实例，确保在方法中可以使用 this 访问数据
    if (methods[key]) {
      // 将方法挂载到组件实例上，并绑定 this 上下文为 vm
      vm[key] = bind(methods[key], vm)
    } else {
      // 如果不是函数，赋值为空函数，避免报错
      vm[key] = noop
    }
  }
}

---

🧠 Vue 2 methods 实现原理分析

• 绑定上下文：每个方法都会通过 bind(this) 绑定组件实例作为 this，确保可以在方法中访问 data, props, computed 等。
• 命名冲突检查：
  • 不允许与 props 同名
  • 不允许与 Vue 内部属性（如 $on, _uid）同名
  • 不允许空值或非函数
• 挂载方式：将 methods 中的方法直接挂载到组件实例上，供模板调用。

---

📁 Vue 3 中 methods 的底层实现（基于 v3.4.15）

文件路径：

packages/runtime-core/src/componentOptions.ts

---

✅ setupComponent(instance, Component) 函数中处理 methods（完整带注释）

export function setupComponent(instance: ComponentInternalInstance, isSSR = false) {
  const { props, setup } = instance.type

  // 初始化 props
  initProps(instance, props)

  // 初始化 slots
  initSlots(instance, children)

  // 调用 setup()
  const setupResult = setup?.(props, setupContext)

  // 处理 setup 返回的结果
  if (isFunction(setupResult)) {
    instance.render = setupResult
  } else if (isObject(setupResult)) {
    // 如果 setup 返回对象，将其合并到组件实例上
    instance.setupState = proxyRefs(setupResult)
  }

  // 处理 options API 中的 methods
  if (Component.options.methods) {
    const methods = Component.options.methods
    for (const key in methods) {
      if (hasOwn(methods, key)) {
        // 使用 defineProperty 定义方法，绑定 this 上下文
        Object.defineProperty(instance.proxy!, key, {
          value: methods[key].bind(instance.proxy!),
          configurable: true,
          enumerable: true,
          writable: true
        })
      }
    }
  }

  // 初始化生命周期钩子等其他选项
  finishComponentSetup(instance, isSSR)
}

---

🧠 Vue 3 methods 实现原理分析

• 兼容性支持：Vue 3 依然保留了对 Options API 的支持，包括 methods。
• 绑定方式：通过 Object.defineProperty 动态定义方法，并绑定 this 为组件代理对象（proxy）。
• 执行环境：在 setupComponent() 阶段统一处理 methods，确保其可在模板中使用。
• 可枚举性：设置 enumerable: true，方便调试时查看方法列表。

---

🎯 methods 的设计模式分析

设计模式	在 Vue 中体现
策略模式（Strategy Pattern）	methods 是一组可扩展的行为集合，每个方法是一个独立策略。
命令模式（Command Pattern）	方法可以看作是对某些操作的封装，便于在模板中调用。
模块化设计（Modular Design）	将逻辑封装成方法，提高代码复用性和维护性。
观察者模式（Observer Pattern）	方法通常会触发响应式更新（如修改 data），从而通知视图更新。

---

🔄 Vue 2 vs Vue 3 的 methods 差异对比表

特性	Vue 2	Vue 3
源码位置	src/core/instance/methods.js	packages/runtime-core/src/componentOptions.ts
响应式基础	Object.defineProperty	Proxy + Reflect
方法绑定	使用 bind(this) 直接挂载到实例	使用 Object.defineProperty 定义到 proxy 上
可枚举性	默认可枚举	显式设置 enumerable: true
TypeScript 支持	⚠️ 有限支持	✅ 完全支持
性能优化	✅ 缓存函数引用	✅ 更好的内存管理和垃圾回收机制

---

✅ 总结

• Vue 2 的 methods：通过 bind() 绑定上下文并直接挂载到组件实例上，适合 Options API 场景。
• Vue 3 的 methods：兼容性保留，通过 defineProperty 挂载到 proxy 上，适用于混合编程风格。
• 设计模式：融合了策略、命令、模块化等思想，提高了开发效率和可维护性。

💡 建议：

• Vue 3 推荐使用 Composition API 和 setup() 替代 methods；
• 若仍需使用 methods，建议保持简洁，避免复杂逻辑嵌套；
• 所有方法都应在模板中显式调用，避免副作用污染。

Vue methods 实用案例与高频面试题详解

---

一、10 大 methods高频面试题（含详细解答）

❓ 1. methods 和 computed 的区别是什么？在什么场景下使用它们？

答：

• methods 是每次调用都会执行，不会缓存结果。
• computed 是基于依赖缓存的，只有当依赖发生变化时才会重新计算。

适用场景：

• methods：需要每次都执行的逻辑，如事件处理、异步请求等。
• computed：需要频繁读取且依赖少变的数据，如过滤、排序、计算总价等。

---

❓ 2. methods 中的 this 指向谁？为什么不能用箭头函数？

答：

• 在 methods中，this 指向组件实例。
• 使用箭头函数会丢失上下文绑定，导致 this 无法正确指向组件实例。

✅ 正确写法：

methods: {
  sayHello() {
    console.log(this.msg)
  }
}

❌ 错误写法：

methods: {
  sayHello: () => {
    console.log(this.msg) // this 可能是 undefined
  }
}

---

❓ 3. methods 能否在模板中传参？

答：

• ✅ 可以。例如：

<template>
  <button @click="sayHi('Vue')">Say Hi</button>
</template>

<script>
export default {
  methods: {
    sayHi(name) {
      alert(`Hi, ${name}!`)
    }
  }
}
</script>

---

❓ 4. methods 是否可以调用其他 methods？

答：

• ✅ 可以。例如：

methods: {
  methodA() {
    this.methodB()
  },
  methodB() {
    console.log('Method B called')
  }
}

---

❓ 5. methods 是否可以调用 computed 属性？

答：

• ✅ 可以。例如：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
},
methods: {
  logName() {
    console.log(this.fullName)
  }
}

---

❓ 6. methods 是否可以修改 props？

答：

• ⚠️ 不推荐。props 是只读的，直接修改会导致父子组件状态不一致。
• 推荐做法：通过 $emit 触发父组件修改。

---

❓ 7. methods 是否可以监听数据变化？

答：

• ❌ 不能直接监听数据变化。
• 应该使用 watch 或 computed 来响应数据变化。

---

❓ 8. methods 是否可以在组件销毁前做清理工作？

答：

• ✅ 可以，在 beforeDestroy 或 destroyed 生命周期钩子中调用 methods 做清理工作。

beforeDestroy() {
  this.cleanup()
}

---

❓ 9. methods 是否可以定义为 async 函数？

答：

• ✅ 可以。但需要注意在模板中调用时可能不会等待异步操作完成。

示例：

methods: {
  async fetchData() {
    const res = await axios.get('/api/data')
    this.data = res.data
  }
}

---

❓ 10. methods 是否支持命名空间或模块化管理？

答：

• ❌ 默认不支持，但可以通过 mixins 或自定义 hooks 实现模块化管理。

示例（使用 mixin）：

// mixins/utils.js
export default {
  methods: {
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD')
    }
  }
}

// 组件中使用
import utils from './mixins/utils'

export default {
  mixins: [utils],
  methods: {
    showTime() {
      console.log(this.formatTime(new Date()))
    }
  }
}

---

二、10 大 methods实用案例（附完整代码）

🎯 案例 1：按钮点击事件

<template>
  <button @click="onClick">点我</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      alert('按钮被点击了！')
    }
  }
}
</script>

---

🎯 案例 2：表单提交

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="username" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    onSubmit() {
      if (this.username.trim()) {
        alert(`欢迎，${this.username}`)
      } else {
        alert('请输入用户名')
      }
    }
  }
}
</script>

---

🎯 案例 3：列表增删改查

<template>
  <div>
    <input v-model="newItem" />
    <button @click="addItem">添加</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉'],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem)
        this.newItem = ''
      }
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

---

🎯 案例 4：图片预览上传

<template>
  <div>
    <input type="file" @change="previewImage" accept="image/*" />
    <img :src="imagePreview" alt="预览图" v-if="imagePreview" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imagePreview: null
    }
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        this.imagePreview = e.target?.result
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

---

🎯 案例 5：倒计时功能

<template>
  <div>剩余时间：{{ countdown }} 秒</div>
  <button @click="startCountdown">开始倒计时</button>
</template>

<script>
export default {
  data() {
    return {
      countdown: 0,
      timer: null
    }
  },
  methods: {
    startCountdown() {
      this.countdown = 10
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
        } else {
          clearInterval(this.timer)
        }
      }, 1000)
    }
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer)
  }
}
</script>

---

🎯 案例 6：搜索防抖

<template>
  <input v-model="searchQuery" placeholder="输入关键字搜索..." />
  <ul>
    <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      filteredList: [],
      allItems: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ],
      debounceTimer: null
    }
  },
  methods: {
    performSearch(query) {
      this.filteredList = this.allItems.filter(item =>
        item.name.toLowerCase().includes(query.toLowerCase())
      )
    }
  },
  watch: {
    searchQuery(newVal) {
      clearTimeout(this.debounceTimer)
      this.debounceTimer = setTimeout(() => {
        this.performSearch(newVal)
      }, 300)
    }
  }
}
</script>

---

🎯 案例 7：数据格式化方法

methods: {
  formatDate(date) {
    return new Date(date).toLocaleDateString()
  },
  formatCurrency(amount) {
    return amount.toLocaleString('zh-CN', { style: 'currency', currency: 'CNY' })
  }
}

---

🎯 案例 8：消息提示封装

methods: {
  showMessage(type, content) {
    this.$message[type](content)
  }
}

---

🎯 案例 9：权限判断方法

methods: {
  hasPermission(role) {
    return this.userRoles.includes(role)
  }
}

---

🎯 案例 10：页面跳转方法

methods: {
  goToPage(path) {
    this.$router.push(path)
  }
}

---

📚 总结建议：

• methods 是 Vue 开发中最常用的选项之一，适合封装可复用的行为逻辑。
• 合理使用 methods 可以提升代码可维护性和开发效率。
• 注意避免在 methods 中进行复杂计算，优先考虑 computed。
• 所有方法应保持单一职责原则，便于测试和维护。