Vue の計算プロパティ、メソッド、ウォッチの違い

Vue を学び始めたばかりの人にとって、メソッド、計算プロパティ、オブザーバーの違いは少し混乱するかもしれません。多くの場合、それぞれを使用して多かれ少なかれ同じことを達成できますが、どの点で他のものより優れているかを知ることが重要です。

この簡単なヒントでは、Vue アプリケーションのこれら 3 つの重要な側面とその使用例について説明します。これら 3 つの方法をそれぞれ使用して、同じ検索コンポーネントを構築します。

Method

Method は、ほぼ予想どおりのもので、オブジェクトのプロパティである関数です。メソッドを使用して、DOM 内で発生するイベントに反応したり、コンポーネント内の他の場所 (たとえば、計算プロパティやオブザーバー) からメソッドを呼び出すことができます。メソッドは、よく使用される機能をグループ化するために使用されます。たとえば、フォーム送信の処理や、Ajax リクエストの作成などの再利用可能な機能の構築に使用されます。

メソッド オブジェクト内の 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>

ここでは、Event オブジェクト を渡します。これにより、ブラウザーのフォーム送信時のデフォルトのアクション。

ただし、ディレクティブを使用してイベントを添付しているため、modifiers: @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 メソッドは、リストされた項目を入力フィールドの値で更新します。注意すべき点の 1 つは、メソッド オブジェクトでは this.handleSearch を使用してメソッドを参照する必要がないことです (これは反応で行う必要があります)。

計算されたプロパティ

上記の例の検索は期待どおりに機能しますが、より洗練された解決策は次のとおりです。 計算されたプロパティ。計算プロパティは、既存のリソースから新しいデータを結合するのに非常に便利で、メソッドに対する大きな利点の 1 つは、出力をキャッシュできることです。これは、計算されたプロパティに関連しないページ上の何かが変更されて UI が再レンダリングされた場合、キャッシュされた結果が返され、計算されたプロパティが再計算されないため、コストがかかる可能性のある操作が節約されることを意味します。

計算されたプロパティを使用すると、利用可能なデータを使用してオンザフライで計算を実行できます。この場合、並べ替える必要がある一連の項目があります。ユーザーが入力フィールドに値を入力したときに並べ替えたいと考えています。

私たちのテンプレートは、計算されたプロパティ (filteredList) を v-for ディレクティブに渡したことを除いて、前の反復とほぼ同じに見えます:

<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 computed プロパティには、入力フィールドの値を含む項目の配列が含まれます。最初のレンダリング時 (入力フィールドが空の場合)、配列全体がレンダリングされます。ユーザーがフィールドに値を入力すると、filteredList はフィールドに入力された値を含む配列を返します。

計算されたプロパティを使用する場合、計算されるデータが使用可能である必要があります。使用できない場合、アプリケーション エラーが発生します。

計算されたプロパティは新しい filteredList プロパティを作成するため、テンプレート内でそれを参照できます。依存関係が変更されるたびに、filteredList の値が変更されます。ここで簡単に変更できる依存関係は、入力の値です。

最后，请注意，计算属性使我们可以创建一个变量，以在由一个或多个数据属性构建的模板中使用。一个常见的示例是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为您提供了构建出色应用程序所需的超能力。知道何时使用它们是建立用户喜爱的关键。方法、计算属性和观察者是您可以使用的超能力的一部分。展望未来，一定要好好利用它们!

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上がVue の計算プロパティ、メソッド、ウォッチの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。