Vue中Computed属性、Methods和Watch之间的差异_编程技术_亿码酷站

Vue中Computed属性、Methods和Watch之间的差异_编程技术_亿码酷站

服务器 VIP24小时自助开通

编程技术Vue中Computed属性、Methods和Watch之间的差异_编程技术_亿码酷站插图

对于那些刚开始学习Vue的人来说,方法,计算属性和观察者之间的差异让人有些困惑。尽管经常可以使用它们中的每一个来完成或多或少相同的事情,但是知道它们在哪些方面优于其他的是很重要的。

在这个快速技巧中,我们将研究Vue应用程序的这三个重要方面及其用例。我们将使用这三种方法中的每一种构建相同的搜索组件。

方法

方法或多或少是你所期望的–一个函数,它是一个对象的属性。 你可以使用方法对DOM中发生的事件做出反应,也可以从组件中的其他位置(例如,在计算属性或观察程序中)调用它们。 方法用于对常用功能进行分组–例如,用于处理表单提交或构建可重用功能,例如发出Ajax请求。

你可以在methods对象内部的Vue实例中创建方法:

new Vue({
  el: "#app",
  methods: {
    handleSubmit() {}
  }
})

当想在模板中使用它时,您可以执行以下操作:

<div id="app">
  <button @click="handleSubmit">
    Submit
  </button>
</div>

我们使用v-on指令将事件处理程序附加到我们的DOM元素,该元素也可以缩写为@符号。

handleSubmit方法将在每次单击按钮时被调用。例如,当你想要传递方法体中需要的参数时,你可以执行以下操作:

<div id="app">
  <button @click="handleSubmit(event)">
    Submit
  </button>
</div>

在这里,我们传递了一个事件对象,例如,它可以防止我们在提交表单时阻止浏览器的默认操作。

但是,由于我们使用指令附加事件,因此可以利用修饰符更优雅地实现同一件事:@click.stop="handleSubmit"

现在,让我们看一个使用方法筛选数组中的数据列表的示例。

在演示中,我们要呈现数据列表和搜索框。每当用户在搜索框中输入值时,呈现的数据都会更改。模板将如下所示:

<div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      @keyup="handleSearch"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

正如您所看到的,我们引用一个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中必须这样做)。

计算属性

尽管以上示例中的搜索按预期工作,但更优雅的解决方案是使用计算属性。 计算属性对于从现有资源中组合新数据非常方便,并且与方法相比,它们的一大优点是可以缓存其输出。 这意味着,如果页面上与计算属性无关的某些内容发生更改,并且UI会重新呈现,则将返回缓存的结果,并且将不会重新计算计算属性,从而为我们节省了潜在的昂贵操作。

计算属性使我们能够使用可用的数据即时进行计算。 在这种情况下,我们有一系列需要排序的项目。 我们想要在用户在输入字段中输入值时进行排序。

我们的模板看起来与之前的迭代几乎相同,除了我们向v-for指令传递了一个计算属性(filteredList):

<div id="app">
  <h2>Language Search</h2>
  <div class="form-group">
    <input
      type="text"
      v-model="input"
      placeholder="Enter language"
      class="form-control"
    />
  </div>
  <ul v-for="(item, index) in filteredList" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

脚本部分略有不同。我们在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属性:

<div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

然后我们的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为您提供了构建出色应用程序所需的超能力。知道何时使用它们是建立用户喜爱的关键。方法计算属性观察者是您可以使用的超能力的一部分。展望未来,一定要好好利用它们!

更多编程相关知识,请访问:编程入门“>编程入门!!

Vue中Computed属性、Methods和Watch之间的差异
—–文章转载自PHP中文网如有侵权请联系admin#tyuanma.cn删除

php session不起作用怎么办

分享到 :
服务器 VIP24小时自助开通
相关推荐

详解vue中的数据初始化(initState)_亿码酷站_编程开发技术教程

详解vue中的数据初始化(initState)_亿码酷站_编程开发技术教程

vue输入框文本内容复制

vue输入框文本内容复制基于vue制作输入框输入文本内容点击按钮复制功能。虽然是使[...

vue宽屏导航下拉菜单

vue宽屏导航下拉菜单jQuery基于vue制作云服务器网站导航菜单,鼠标悬停导航[...

关于vue使用验证器: VeeValidate3_亿码酷站_亿码酷站

关于vue使用验证器: VeeValidate3_亿码酷站_亿码酷站