Own understanding:
- computed for monitoring their own definition of the variable, the data variable which is not declared, defined directly computed inside, then we can show the results of two-way data binding, or other processing used on the page;
- After the computed return is more suitable for a number of variables or objects for processing a result value, a value that is a multiple of the number of variables has changed is that we monitor this value will change, for example: inside the shopping cart of goods the relationship between the list and the total amount, as long as the quantity of goods inside the list changes, or decrease or increase or remove items, the total amount should be changed. The total amount here is calculated using computed properties is the best choice
And watch the difference between:
It started innocently tell in the end always use the watch at what time, when to use computed. Here roughly talk about their own understanding:
- watch mainly for monitoring changes vue instance, it must of course be monitoring variables can, it can monitor a variable in the data inside the statement, it can also be a target, but we can not monitor like this, for example:
Watch: {
goodsList.price (newVal, oldVal) {
// the list of goods is monitored commodity price
}
}
Such error. Whole object or only monitor a single variable, as follows:
Data () {
return {
example0: "",
example1: "",
example2: {
inner0:. 1,
innner1: 2
}
}
},
Watch: {
example0 (newVal, oldVal) {// monitor a single variable
......
},
example2 (newVal, oldVal) {// monitored object
......
},
}
- watch for monitoring routing general, input value of the special input box or the like, it is more appropriate scene data is a plurality of data Influence
The following is an excerpt from https://www.w3cplus.com/vue/vue-computed-intro.html © w3cplus.com:
Calculating attribute can be used to quickly calculate the view ( View attributes shown) in the. These calculations will be cached, and only updated when necessary.
There are a variety of methods in a view Vue settings:
- Use instructions directly bind the data value to the view
- Using simple expressions for content simple conversion
- The content using a filter simple conversion
In addition, we can also show calculated value based on the data model or a set of values calculated using the attribute.
Computed Property
Calculate property allows us to calculate the specified view, complex values. These values will be bound to a dependency value, only updated when necessary.
For example, we can have a data model results array:
Suppose we want to see the total number of topics. We can not use filters or expressions to accomplish this task.
- Filters : for simple data format, in a plurality of positions that require the application
- Expressions : stream operation or other complex logic is not allowed. They should keep it simple
This time, calculate properties can come in handy. We can add value to a calculation model, as follows:
Results are as follows:
Calculation method attribute vs
We can use the Vue in the method to calculate the total score disciplines, the resulting total number of results are the same.
On the basis of the above example, we have computed block of totalMarks overall function moved to the methods in. Meanwhile in the template {{totalMarks}} Replace {{totalMarks ()}} . You see the final result is the same, as follows:
Although the results of these two methods is the same output, but the performance will suffer a devastating blow. Using this method totalMarks () method when each page rendering are performed once (e.g., using every Change ).
如果我们有一个计算属性，那么Vue会记住计算的属性所依赖的值（在我们这个示例中，那就是results）。通过这样做，Vue只有在依赖变化时才可以计算值。否则，将返回以前缓存的值。这也意味着只要results还没有发生改变，多次访问totalMark计算属性会立即返回之前的计算结果，而不必再次执行函数。
上面两个示例也说明，在Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。
这也同样意味着下面的计算属性将不再更新，因为Date.now()不是响应式依赖：
相比之下，每当触发重新渲染时，方法的调用方式将总是再次执行函数。因此，函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。
那么我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性A，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
计算属性的setter
计算属性默认只有getter，不过在需要时你也可以提供一个setter
效果如下：
You enter in the input box a fullName , then click set button, you can see the corresponding results. You run app.fullName = "Airen liao" when calculating the property setter is called, app.firstName and app.lastName also will be updated accordingly. As shown below:
Observer:
Although the calculation of property more appropriate in most cases, but sometimes you need a definition of self- Watcher . This is why the Vue by watch provides a more general method options, in response to data changes. When you want to change in response to the data, perform asynchronous operations or overhead larger operation, which is very useful.
Vue does provide a more versatile way to observe changes and the response data on the Vue instance: Watch properties . When you have some data with other data needs to change and change, you can easily abused Watch . Often, however, a better idea is to use the calculation attribute rather than a command-style watch callback. Such as the following example:
The above type of code is the command and the repetition. It was compared with the calculated properties version:
