我们打开文件 src/core/instance/state.js
,找到定义initMethods
函数的代码:
function initMethods (vm: Component, methods: Object) {
const props = vm.$options.props
for (const key in methods) {
if (process.env.NODE_ENV !== 'production') {
if (typeof methods[key] !== 'function') {
warn(
`Method "${key}" has type "${typeof methods[key]}" in the component definition. ` +
`Did you reference the function correctly?`,
vm
)
}
if (props && hasOwn(props, key)) {
warn(
`Method "${key}" has already been defined as a prop.`,
vm
)
}
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[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)
}
}
首先获取了const props = vm.$options.props
实例的props
属性。
紧接着对 methods
定义的方法进行遍历,对每个方法进行了3层判断。
1、必须的函数。
2、不能和 props
重名。
3、不能用下划线_
和美元符号$
开头。
vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)
最后在 vm
对象上面定义了这些方法。
网友评论