vue源码学习总结 prop data method computed 的命名冲突处理策略

最新推荐文章于 2024-01-27 08:30:00 发布

原创最新推荐文章于 2024-01-27 08:30:00 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

web前端同时被 3 个专栏收录

22 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

9 篇文章

订阅专栏

本文详细解析了Vue中prop、data、method、computed属性命名冲突时的处理策略及优先级，介绍了源码中相关初始化逻辑，帮助开发者理解并解决实际开发中可能遇到的属性覆盖问题。

vue 组件属性命名冲突处理策略

当 prop data method computed 的key值冲突, 获取值优先级策略如下：
computed>data>method computed>method>prop prop>data
在源码src/instance/state.js 的 initState中，方法的执行顺序为 initProps>initMethods>initData>initComputed , 后面初始化的属性声明会覆盖前面的，所以理论上取值优先级为 computed>data>method>prop 。但是initData中有逻辑：如果prop中没有该属性名data才会声明。所以结论如1中所述。源码如下：

export function initState (vm: Component) {
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}