脚本部分略有不同。我们在data属性中声明语言（以前这是一个空数组），而不是将方法转移到计算属性中的方法：

new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: [
        "JavaScript",
        "Ruby",
        "Scala",
        "Python",
        "Java",
        "Kotlin",
        "Elixir"
      ]
    }
  },
  computed: {
    filteredList() {
      return this.languages.filter((item) => {
        return item.toLowerCase().includes(this.input.toLowerCase())
      })
    }
  }
})

filteredList 计算的属性将包含一个包含输入字段值的项目数组。 在第一次渲染时（当输入字段为空时），将渲染整个数组。 当用户在字段中输入值时，filteredList将返回一个数组，其中包含在字段中输入的值。

当使用计算属性时，要计算的数据必须可用，否则将导致应用程序错误。

计算属性创建了一个新的filteredList属性，这就是为什么我们可以在模板中引用它的原因。每次依赖项发生变化时，filteredList的值就会发生变化。这里容易改变的依赖关系是input的值。

最后，请注意，计算属性使我们可以创建一个变量，以在由一个或多个数据属性构建的模板中使用。一个常见的示例是fullName从用户的名字和姓氏创建一个，如下所示：

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

在模板中，您可以执行{{fullName}}。每当第一个或最后一个名称的值发生变化时，fullName的值就会发生变化。

观察者

当您希望对发生的更改(例如，对一个道具或数据属性)执行一个操作时，观察者非常有用。正如Vue文档所述，当您希望执行异步或昂贵的操作来响应数据更改时，这是最有用的。

在我们的搜索示例中，我们可以返回到方法示例，并为input data属性设置一个监视程序。然后，我们可以对input值的任何变化做出反应。

首先，让我们还原模板以利用languages data属性：

  
Language Search

  
    
  

  
    {{ item }}
  

然后我们的Vue实例将如下所示：

new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: []
    }
  },
  watch: {
    input: {
      handler() {
        this.languages = [
          'JavaScript',
          'Ruby',
          'Scala',
          'Python',
          'Java',
          'Kotlin',
          'Elixir'
        ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
      },
      immediate: true
    }
  }})

在这里，我已经将观察者作为对象（而不是函数）。这样，我可以指定一个immediate属性，该属性将导致观察者在安装组件后立即触发。这具有填充列表的效果。然后，运行的函数在该handler属性中。

结论

感谢你能够认真阅读完这篇文章，希望小编分享的“Vue中Computed属性、Methods和Watch之间有什么区别”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流