Vue의 계산된 속성, 메서드 및 Watch의 차이점

Vue를 이제 막 배우기 시작한 사람들에게는 메서드, 계산된 속성, 관찰자의 차이점이 다소 혼란스러울 수 있습니다. 각각을 사용하여 거의 동일한 작업을 수행할 수 있지만 어떤 면에서 다른 것보다 나은지 아는 것이 중요합니다.

이 빠른 팁에서는 Vue 애플리케이션의 세 가지 중요한 측면과 사용 사례를 살펴보겠습니다. 이 세 가지 방법을 각각 사용하여 동일한 검색 구성 요소를 구축하겠습니다.

메소드

메소드 는 여러분이 기대하는 것과 거의 비슷합니다. 객체의 속성인 함수입니다. 메서드를 사용하여 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>

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

但是，由于我们使用指令附加事件，因此可以利用修饰符更优雅地实现同一件事：@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

handleSubmit 메소드는 버튼을 클릭할 때마다 호출됩니다. 예를 들어 메소드 본문에 필수 매개변수를 전달하려는 경우 다음을 수행할 수 있습니다.

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

여기서 이벤트 개체

는 예를 들어 양식을 제출할 때 브라우저의 기본 작업을 차단하는 것을 방지합니다.

🎜그러나 지시문을 사용하여 이벤트를 첨부하므로 수정자 🎜를 활용하여 더 우아해지세요 동일한 결과를 얻으려면 @click.stop="handleSubmit"을 사용하세요. 🎜🎜이제 배열의 데이터 목록을 필터링하는 메서드를 사용하는 예를 살펴보겠습니다. 🎜🎜데모에서는 데이터 목록과 검색 상자를 렌더링하려고 합니다. 사용자가 검색 상자에 값을 입력할 때마다 렌더링된 데이터가 변경됩니다. 템플릿은 다음과 같습니다. 🎜

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

🎜보시다시피, 사용자가 검색 필드에 입력할 때마다 호출되는 handlerSearch 메소드를 참조합니다. 메소드와 데이터를 생성해야 합니다. 🎜

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

🎜handleSearch 메소드는 나열된 항목을 입력 필드의 값으로 업데이트합니다. 한 가지 주목할 점은 메소드 객체에서 this.handleSearch를 사용하여 메소드를 참조할 필요가 없다는 것입니다(대응 시 이 작업을 수행해야 함). 🎜🎜🎜🎜🎜계산된 속성🎜🎜🎜위 예의 검색은 예상대로 작동하지만 보다 우아한 해결책은 계산된 속성 🎜. 계산된 속성은 기존 리소스의 새 데이터를 결합하는 데 매우 편리하며 메서드에 비해 큰 장점 중 하나는 출력을 캐시할 수 있다는 것입니다. 즉, 계산된 속성과 관련되지 않은 페이지의 내용이 변경되고 UI가 다시 렌더링되면 캐시된 결과가 반환되고 계산된 속성은 다시 계산되지 않으므로 잠재적으로 비용이 많이 드는 작업이 절약됩니다. 🎜🎜계산된 속성을 사용하면 사용 가능한 데이터를 사용하여 즉시 계산을 수행할 수 있습니다. 이 경우 정렬해야 할 일련의 항목이 있습니다. 사용자가 입력 필드에 값을 입력하면 정렬을 원합니다. 🎜🎜우리 템플릿은 계산된 속성(filteredList)을 v-for 지시어에 전달한다는 점을 제외하면 이전 반복과 거의 동일해 보입니다. 🎜rrreee🎜스크립트 섹션 생략 차이점이 있습니다. 메소드를 계산된 속성으로 이동하는 대신 data 속성(이전에는 빈 배열)에서 언어를 선언합니다. 🎜rrreee🎜filteredList 계산된 속성은 다음을 포함합니다. 입력 필드 값을 포함하는 항목 배열입니다. 첫 번째 렌더링 시(입력 필드가 비어 있는 경우) 전체 배열이 렌더링됩니다. 사용자가 필드에 값을 입력하면 filteredList는 필드에 입력된 값이 포함된 배열을 반환합니다. 🎜🎜계산된 속성을 사용할 때 계산할 데이터를 사용할 수 있어야 합니다. 그렇지 않으면 응용 프로그램 오류가 발생합니다. 🎜🎜계산된 속성은 새로운 FilterList 속성을 생성하므로 템플릿에서 이를 참조할 수 있습니다. 종속성이 변경될 때마다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의 계산된 속성, 메서드 및 Watch의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!