Computed properties and listener use cases for VUE-JS Tutorial-php.cn

This time I will bring you the use cases of VUE's computed properties and listeners. What are the precautions for using VUE's computed properties and listeners? The following is a practical case, let's take a look.

Written at the front

The use of vue in the previous article talked about vue

life cycle, vue instances, and template syntax. This time we talk about vue’s calculated properties and listeners

Computed properties

Expressionsin the template in vue are very convenient, but the original intention of designing them is Used for simple operations. Putting too much logic into a template can make it overweight and difficult to maintain. For example:

<div id="example">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

Copy after login

Here, the template is no longer simple declarative logic. You have to look at it for a while to realize what this string of code is doing, and it becomes even more difficult to handle when you want to reference it multiple times in the template.

So, for any complex logic, you should use computed properties.

For example

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: &#39;#example&#39;,
  data: {
    message: &#39;Hello&#39;
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})
Original message: "Hello"
Computed reversed message: "olleH"

Copy after login

A calculated property reversedMessage is declared here. The function provided by vue will be used as the getter function of the property vm.reversedMessage:

console.log(vm.reversedMessage) // => 'olleH'vm.message = 'Goodbye'console.log(vm. reversedMessage) // => 'eybdooG'

You can bind computed properties in templates just like normal properties. Vue knows that vm.reversedMessage depends on vm.message, so when vm.message changes, all bindings that depend on vm.reversedMessage are also updated. And the best part is that Vue has created this dependency in a declarative way: the getter function of the calculated property has no side effects, which makes it easier to test and understand.

Computed property cache vs method

You may have noticed that vue can achieve the same effect by calling a method in an expression:

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}

Copy after login

vue can define the same function As a method rather than a computed property. The end result is indeed exactly the same both ways. However, the difference is that computed properties are cached based on their dependencies. A computed property is only re-evaluated when its associated dependencies change. This means that as long as the message has not changed, multiple accesses to the reversedMessage calculated property will immediately return the previous calculated result without having to execute the function again.

This also means that the following computed properties will no longer be updated, because Date.now() is not a reactive dependency:

computed: {
  now: function () {    return Date.now()
  }
}

Copy after login

In contrast, whenever a re-render is triggered, the calling method will The function will always be executed again.

Why do we need caching? Suppose we have a computationally expensive property A, which requires traversing a huge array and doing a lot of calculations. Then we might have other computed properties that depend on A . Without caching, we would inevitably execute A's getter multiple times! If you don't want caching, use methods instead.

Computed properties vs listening properties

Vue provides a more general way to observe and respond to data changes on Vue instances: listening properties. When you have some data that needs to change when other data changes, it's easy to abuse watches - especially if you've used

AngularJS before. However, it is often better to use computed properties rather than imperative watch callbacks. Consider this example:

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: &#39;#demo&#39;,
  data: {
    firstName: &#39;Foo&#39;,
    lastName: &#39;Bar&#39;,
    fullName: &#39;Foo Bar&#39;
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + &#39; &#39; + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + &#39; &#39; + val
    }
  }
})

Copy after login

The above code is imperative and repetitive. Compare this to the computed property version:

var vm = new Vue({
  el: &#39;#demo&#39;,
  data: {
    firstName: &#39;Foo&#39;,
    lastName: &#39;Bar&#39;
  },
  computed: {
    fullName: function () {      return this.firstName + &#39; &#39; + this.lastName
    }
  }
})

Copy after login

Computed property setters

Computed properties have only getters by default, but you can also provide a setter if needed:

// ...
computed: {
  fullName: {
    // getter
    get: function () {      return this.firstName + &#39; &#39; + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(&#39; &#39;)
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

Copy after login

Now when running vm.fullName = 'John Doe', the setter will be called, and vm.firstName and vm.lastName will be updated accordingly.

Listener

While computed properties are more appropriate in most cases, sometimes a custom listener is needed. This is why Vue provides a more general way to respond to changes in data through the watch option. This approach is most useful when you need to perform asynchronous or expensive operations when data changes.

Example:

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: &#39;#watch-example&#39;,
  data: {
    question: &#39;&#39;,
    answer: &#39;I cannot give you an answer until you ask a question!&#39;
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = &#39;Waiting for you to stop typing...&#39;
      this.getAnswer()
    }
  },
  methods: {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {        if (this.question.indexOf(&#39;?&#39;) === -1) {
          this.answer = &#39;Questions usually contain a question mark. ;-)&#39;
          return
        }
        this.answer = &#39;Thinking...&#39;
        var vm = this
        axios.get(&#39;https://yesno.wtf/api&#39;)
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = &#39;Error! Could not reach the API. &#39; + error
          })
      },
      // 这是我们为判定用户停止输入等待的毫秒数      500
    )
  }
})
</script>

Copy after login

Result:

In this example, using the watch option allows us to perform an asynchronous operation (access an API), limit how often we perform the operation, and when we Set up intermediate states before getting to the final result. These are things that computed properties cannot do.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!