Vue中computed、methods、watch三者的区别是什么

如您所见，我们引用的是handlesearch方法，每次用户在搜索字段中键入内容时都会调用该方法。我们需要创建方法和数据：

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

handlesearch方法使用输入字段的值更新列出的项。需要注意的一点是，在methods对象中，不需要使用this.handlesearch引用该方法（正如在react中必须做的那样）

Computed Properties

虽然上面示例中的搜索可以按预期工作，但更优雅的解决方案是使用计算属性。计算属性对于从现有源组合新数据非常方便，与方法相比，它们的一大优点是缓存了输出。这意味着，如果独立于计算属性的某些内容在页面上发生更改，并且重新呈现UI，则会返回缓存的结果，并且不会重新计算计算计算属性，从而避免了可能代价高昂的操作。

计算属性使我们能够使用我们可用的数据进行即时计算。在本例中，我们有一个需要排序的项目数组。我们希望在用户在输入字段中输入值时进行排序。

我们的模板看起来几乎与前面的迭代相同，除了我们正在传递v-for指令一个计算属性（filteredlist）：

 
Language Search

 
 
 

 
 {{ item }}
 

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

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将返回一个数组，其中包含输入到字段中的值。

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

computed属性创建了一个新的filteredlist属性，这就是为什么我们可以在模板中引用它。每次依赖项执行此操作时，filteredlist的值都会更改。这里容易改变的依赖项是输入值。

最后，请注意，计算属性允许我们在模板中创建一个变量，该变量是由一个或多个数据属性构建的。一个常见的例子是从这样一个用户的名字和姓氏创建一个全名：

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

在模板中，您可以执行全名。每当名字或姓氏的值更改时，全名的值将更改。

Watchers

Watchers对于希望响应已发生的更改（例如，属性或数据属性）执行操作的情况非常有用。正如Vue文档所提到的，当您想要执行异步或昂贵的操作以响应不断变化的数据时，这是最有用的。

在搜索示例中，我们可以返回到方法示例，并为输入数据属性设置一个观察程序。然后我们可以对输入值的任何变化作出反应。

首先，让我们恢复模板以使用语言数据属性：

 
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
 }
 }
})

这里，我将观察者设置为一个对象（而不是一个函数）。这是为了我可以指定一个即时属性，它将导致观察程序在组件被装载后立即触发。这会产生填充列表的效果。然后运行的函数在handler属性中。

上述内容就是Vue中computed、methods、watch三者的区别是什么，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

• 建站热线：13518219792
• 
  微信扫一扫在线咨询
• QQ客服：
• 案 例
• 价 格