In the official documents, the two most important differences between calculated and method are emphasized

• computed is a property call and methods is a function call
• computed has a caching function, but methods is not

Calculated properties are cached based on their dependencies and will be re evaluated only when their related dependencies change.

let vm = new Vue({
    el: '#app',
    data: {
        message: 'I'm the news,'
    },
    methods: {
        methodTest() {
            return this.message + 'Now I use methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + 'Now I use computed'
        }
    }
})

This means that as long as the message has not changed, multiple accesses to the computedTest calculation property will immediately return the previous calculation result without executing the function again.

In contrast, whenever a re rendering occurs, the method call always executes the function.

<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p><!--This call method Inside methodTest The way is wrong-->
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>

In HTML interpolation

• The method defined by computed is called in the form of attribute access, {computedTest}}
• However, for the methods defined by methods, we must add () to call, such as {{methodTest()}}. Otherwise, test1 will appear in the view, as shown in the following figure

Cache function of computed

In the above example, the methods defined by methods are accessed in the form of function calls. Test2-1, test2-2 and test2-3 repeatedly run the methodTest method three times. If we encounter a scenario that requires 1000 return values of methodTest, there is no doubt that this will cause a lot of waste. What's more, if you change the value of message, Then each of the 1000 methodTest methods will recalculate....

That's why the official documentation repeatedly emphasizes that you should use computational properties for any complex logic

computed depends on the data in data. It will be re evaluated only when its dependent data changes

let vm = new Vue({
    el: '#app',
    data: {
        message: 'I'm the news,'
    },
    methods: {
        methodTest() {
            return this.message + 'Now I use methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + 'Now I use computed'
        }
    }
})

As in the above example, when Vue is instantiated, computeddefines that the computedTest method will perform a calculation and return a value. In subsequent code writing, the computedTest method will not recalculate as long as the message data relied on by the computedTest method does not change, that is, test3-1 and test3-2 directly get the return value, Not the result of recalculation by the computedTest method.

This benefit is also obvious. Similarly, if we encounter a scenario that requires 1000 return values of computedTest, there is no doubt that this will greatly save memory compared with methods. Even if you change the value of message, computedTest will only be calculated once

Other descriptions of computed

• computed can be accessed as either a property or a method
• An important reason for the origin of computed is to prevent excessive logic in text interpolation, which makes it difficult to maintain

computed and watch

vue provides a more general way to observe and respond to data changes on vue instances: the watch attribute. In routing scenarios, you can use: vue learning router

When you have some data that needs to change with other data changes, you can easily abuse the watch. The better idea is to use the calculated attribute instead of the command-based watch callback:

<div id="demo">{{ fullName }}</div>

var vm = new Vue({ 
 el: '#demo',  
data: {   
    firstName: 'Foo',
    lastName: 'Bar', 
    fullName: 'Foo Bar'
  }, 
 watch: {   
 firstName: function (val) { 
     this.fullName = val + ' ' + this.lastName  
  },   
 lastName: function (val) { 
    this.fullName = this.firstName + ' ' + val   
 }
  }
})

The above code is imperative and repetitive. Compare it with the version of the computed attribute:

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

When you need to perform asynchronous or expensive operations when data changes, watch is more appropriate.

In short: try to use the calculated calculation attribute to monitor the changes of data, because it has this feature. There is no "automatic" with watch. Manual setting makes the code complex.

At what stage in the life cycle is computed executed in Vue?

1. During new Vue(), the _init() in vue\src\core\instance\index.js initializes various functions

function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof Vue)
) {
  warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options) //Initialize each function
}

2. In_ There is such an execution order in init(): where initState() is between beforeCreate and created

  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm) //initialization
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created') 

3. Do these things in initState():

if (opts.props) initProps(vm, opts.props)//Initialize Props
if (opts.methods) initMethods(vm, opts.methods)//Initialize methods
if (opts.data) {
  initData(vm)
} else {
  observe(vm._data = {}, true /* asRootData */)
}//Initialize data
if (opts.computed) initComputed(vm, opts.computed)//Initialize computed

4. Therefore, the initialization of Props, methods,data and computed is completed between beforeCreated and created.