Javascript 了解Vuejs中属性的执行顺序

我正在创建一个简单的Vuejs div组件（用于显示特定的值），它需要接收：一个

列表

、一个

占位符

和一个

值

作为道具。我要做的是用数据库中的数据显示值，如果用户从

列表中选择一个新值，它应该获取该新值并显示它。但是，如果用户从未选择新值，并且数据库中的数据为空，则应显示
占位符

因此，我使用了
过滤器来实现这一点。但是，它输出了一个错误：
“无法读取未定义的”
的属性“列表”，该属性来自
过滤器
（我知道，因为如果我注释掉
过滤器，它不会输出错误）。当我将
过滤器更改为此时：

  filters: {
    placeholderFilter () {
      return this.placeholderText || this.placeholder
    }
  }

它表示：“
”无法读取未定义“
”的属性“占位符文本”。所以我想知道过滤器属性是否在
数据
和
道具
属性之前执行。他们的执行顺序是什么？我在下面附上了一些相关代码。无论如何，如果你能想出一个更好的方法来实现这一点。我会很感激的

以下是我的组件：

<template>
<div>{{ placeholderText | placeholderFilter }}</div>
<li @click="pickItem(index)" v-for="(list,index) in lists" :key="index">{{ list }}</li>
</template>

<script>

export default {
  props: {
    lists: {
      type: Array,
      required: true
    },
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      selected: -1,
      placeholderText: this.value || this.placeholder
    }
  },
  methods: {
    pickItem (index) {
      this.selected = index
    }
  },
  filters: {
    placeholderFilter () {
      return this.lists[this.selected] || this.placeholderText || this.placeholder
    }
  }
}
</script>


{{占位符文本|占位符过滤器}
{{list}
导出默认值{
道具：{
清单：{
类型：数组，
必填项：true
},
价值：{
类型：[字符串，数字]，
默认值：“”
},
占位符：{
类型：字符串，
默认值：“”
}
},
数据（）{
返回{
选定：-1，
占位符文本：this.value | | this.placeholder
}
},
方法：{
选取项目（索引）{
this.selected=索引
}
},
过滤器：{
占位符筛选器（）{
返回this.lists[this.selected]| | this.placeholder文本| | this.placeholder
}
}
}

这就是我使用它的地方：

<my-component 
    placeholder="Please type something" 
    value="Data from database" 
    lists="['option1','option2','option3']"
>
</my-component>

过滤器没有绑定到组件实例，因此它们无法通过
this
关键字访问组件实例。它们总是被传递一个参数，并返回该参数的转换版本。换句话说，它们只是方法。它们在Vue 3中被完全删除可能就是因为这个原因

是的，你在这里找的是一个计算机
 在这种情况下，我只使用计算属性。过滤器实际上是用来转换文本的。这个占位符文本对我来说是一个清晰的计算属性。请尝试使用计算属性而不是筛选器。谢谢。我已经考虑过了。我将试着回到计算机房地产。无论如何，我仍在试着理解Vuejs引擎盖下到底发生了什么。这对我来说没有意义，根据我的理解，应该首先执行
props
属性，在进入
过滤器之前，应该定义
列表
，如下所述，这只是一个简单的方法。记住过滤器是可重用的。如果它们绑定到实例数据，则它们是不可重用的。所以不能这样使用。