0x3 Peruse Vue official documentation – Calculate properties and listeners

Close read Vue official documentation series 🎉

Calculate attribute

Replace complex template expressions

Move complex expression calculations in templates to calculated properties to make templates easier to maintain.

Calculate the cache

Computed properties are cached based on their reactive dependencies, and they are reevaluated only when the associated reactive dependencies change. In other words, if the value of the reactive type is not changed, the calculated property will directly return the result of the last calculation. If caching is not needed, methods can be used instead, because the method will always be re-executed every time it is called.

<div>
    <p>
      {{ getRandomChar(random) }}
    </p>
    <p>
        <! -- Timestamp will not change -->
       {{ timeStamp }}
    </p>
    <button @click="getRandom()">getRandomChar</button>
  </div>
</div>
Copy the code

{
  data() {
    return {
      random:0}; },created(){
    this.getRandom();
  },
  methods: {
    getRandom() {
      this.random = ~~(Math.random() * 255);
    },
    getRandomChar(value) {
      return String.fromCharCode(value); }},computed: {
    timeStamp() {
      return Date.now(); }},}Copy the code

Setter and getter

Computed properties only have getters by default, but we can also set setters for computed properties. The value of a calculated property depends on one or more reactive data, so when the calculated property changes, setters can be set to change the dependent one or more reactive data.

{
    data(){
        return {
            firstName:' '.lastName:' '}},computed: {fullName: {get:function(){
                return this.firstName + ' ' + this.lastName;
            },
            set:function(newValue){
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]}}}}Copy the code

The getter or setter method that evaluates a property has internal access to a VUE instance.

The listener

When asynchronous or expensive operations need to be performed when data changes. You can use either the watch property provided by optionsAPI or the vm.$watch() method in the component instance.

Evaluate the difference between properties and listeners

Calculate attribute

The purpose of calculating attributes is to evaluate the value, which is mainly used in the scenario where multiple responsive data are combined to produce one calculated attribute data, or the scenario where one (calculated attribute) data is affected by multiple (responsive) data.

A single data affected by multiple data can be used to optimize complex expressions in templates.

The listener

The main function of a listener is to listen for changes in data and perform operations or side effects. Listeners are primarily used in scenarios where changes to one data affect multiple data.

One data affects multiple data.

If you simply listen for data changes that affect multiple other data, you can do that using setter and getter calculation properties, but listeners are also designed to perform side effects.