剖析Vue中的一个参数“错误”及其原理

2023-12-15 06:47:55

起因

事情的开始，源于同事的一行代码，代码如下：

export default {
  data() {
    return {
      message: 'Hello, world!',
    }
  },
  methods: {
    showMessage() {
      // 错误代码
      this.$message(this.message)
    }
  }
}

按照官方文档，this.$message方法的参数应该是一个字符串，而同事却传入了this.message，这是一个对象。我看到同事的代码后，觉得这种写法肯定不对，但奇怪的是，这种错误写法竟然没有报错，而且执行似乎成功了。带着这样的疑问，我开始了溯源分析。

溯源

我首先查看了Vue的源代码，在src/core/instance/index.js文件中找到了$message方法的定义，如下：

export function initMessage(vm: Component) {
  // inject instance methods
  vm._vm = vm
  const exposedMethods = ['error', 'warn', 'info', 'log', 'debug', 'trace']
  exposedMethods.forEach((method) => {
    vm[method] = (...args) => log(method, args)
  })

  // expose message option
  vm.$message = log('message')
}

可以看出，$message方法实际上是一个简化的log方法，它会将传入的参数记录到控制台。

既然$message方法的参数应该是一个字符串，那么为什么它能够接受一个对象呢？这就要从Vue的类型推断机制说起了。

Vue的类型推断机制是基于Flow的，它会根据变量的赋值和使用情况来推断变量的类型。在同事的代码中，this.message变量是一个字符串，因此Vue会推断出this.$message方法的参数也应该是一个字符串。但是，由于$message方法实际上是一个简化的log方法，因此它可以接受任何类型的参数。