时间戳

首页 > 解决方案 > Vuejs 组件缺少计算属性

vue.js - Vuejs 组件缺少计算属性

问题描述

我们的团队创建了一个插件，添加了一个 beforeCreate mixin。这个 mixin 为组件实例添加了一个计算属性。它在一个项目中完美运行，但在另一个项目this.$options.computed中未定义。两者都运行 2.6.11，该组件实际上是另一个 tempate 插件，因此它是完全相同的组件代码。我不知道为什么computed会在一个项目中定义，而不是在另一个项目或任何 vue 组件实例中定义。

function plugin (Vue, options = {}) {
  Vue.mixin({
    beforeCreate () {
    ...
    this.$options.computed[computedName] = computedFns(name)
    // above line throws cannot set value to undefined
    ...
}

function computedFns (name) {
  return {
    get () {
      return this[name] === undefined ? this.$data[DATA_PREFIX + name] : this[name]
    },
    set (value) {
      if (this[name] === undefined) {
        this.$data[DATA_PREFIX + name] = value
      }
      this.$emit(`update:${name}`, value)
    }
  }
}

对于踢腿和咯咯笑，我列出了this.$optionsmixin 中引用的所有属性，果然，在第二个项目中使用时，computed 丢失了：

::::: parent
::::: _parentVnode
::::: propsData
::::: _parentListeners
::::: _renderChildren
::::: _componentTag
::::: components
::::: directives
::::: filters
::::: _base
::::: beforeCreate
::::: destroyed
::::: props
::::: data
::::: watch
::::: mounted
::::: methods
::::: render
::::: staticRenderFns
::::: _compiled
::::: _scopeId
::::: _ssrRegister
::::: __file
::::: name
::::: _Ctor

但它存在于第一个项目中：

::::: parent
::::: _parentVnode
::::: propsData
::::: _parentListeners
::::: _renderChildren
::::: _componentTag
::::: components
::::: directives
::::: filters
::::: _base
::::: beforeCreate
::::: destroyed
::::: data
::::: computed
::::: created
::::: props
::::: watch
::::: mounted
::::: methods
::::: render
::::: staticRenderFns
::::: _compiled
::::: _scopeId
::::: _ssrRegister
::::: __file
::::: name
::::: _Ctor

标签： vue.jsinstancecomputed-properties

解决方案

推荐阅读