Introduction: I have used Vue technology to develop the project for a period of time, and there is no problem to complete the project independently. However, problems encountered in the development process are often solved by scattered search or official documents, such a phenomenon shows that I do not have a set of system knowledge framework after I understand Vue. In order to establish this complete Vue knowledge framework, I began to write a series of articles called “Vue in my Eyes”. This series is a set of personal data formed based on Vue official documents, other materials and textbooks, plus the summary of practical experience. The point of view in the article is for reference only, if can have trifling help or inspiration to you, the author is very gratified. Click here to access the githubDemo address

The article directories

Basic usage:

Calculate the getter function of the property. 2. Calculate the setter function of the property. Compute attributes cache cache attributesCopy the code

FAQ:

1. Scenarios in which the computed property getter is not executed 2. Computed properties are used in V-for to act as "filters" 3Copy the code

Computed properties

Definition: a calculated property is recalculated when the value of its dependent property changes. Otherwise, attribute values in the cache are used.

A complete computed attribute is as follows:

computed: {
 example: {
   get () {
     return 'example'
   },
   set (newValue) {
     console.log(newValue)
   }
 }
Copy the code

Basic usage

1. Calculate the getter function for the property

The value of the calculated property is automatically updated when the value of the dependent property changes. Mostly used for attributes of “data, computed”.

< the template > < div > < h4 > test < / h4 > < div > < input type = "text" v - model = "message" / > < div > {{changeMessage}} < / div > < / div > < / div > </template> <script> export default { data () { return { message: 'hello' } }, computed: { changeMessage: {// Calculate attributes: depend on message changes, change dependencies do not change the rendering; get () { return this.message + 'world' }, set () { } } } } </script>Copy the code

2. Evaluate setter functions for properties

Setter functions are called when a value is assigned to a calculated property. This is used when the value of the calculated property itself needs to be modified in the template component.

< the template > < div > < h4 > test < / h4 > < div > {{didi}} {{family}} < / div > < div > {{didiFamily}} < / div > < / div > < / template > < script > export default { data () { return { didi: 'didi', family: 'family' } }, computed: { didiFamily:{ //getter get:function(){ return this.didi + ' ' + this.family }, // setSet :function(newValue){ Console. log(newValue) this.didi = 123 this.family = 456}}}, mounted () {// set console.log(newValue) this.didi = 123 this.family = 456}}, Call setter function this.didiFamily = 'John Doe'}} </script>Copy the code

3. Calculate the cache of attributes

Getters are re-executed when observed Data properties in Vue instances change, but we sometimes calculate properties that rely on real-time non-observed Data properties, such as data.now in the following example

< the template > < div > < h4 > test < / h4 > < div > < input type = "text" v - model = "message" / > < div > {{now}} < / div > < / div > < / div > < / template > <script> export default { data () { return { message: 'hello' } }, computed: { now:{ cache: Return date.now () + this.message}}, mounted (){setInterval(() => {return date.now () + this.message}}, mounted (){setInterval(() => { Console. log(this.now)}, 500)}} </script>Copy the code

Q&A

1. Calculate the scenario in which the getter of the property is not executed

When the node containing the computed property is removed and the property is no longer referenced elsewhere in the template, the corresponding getter function method for the computed property is not executed

Here is an example of the code

<template> <div> <h4> Test </h4> <div> <button @click="toggleShow">Toggle Show Total Price</button> <p v-if="showTotal">Total Price = {{totalPrice}}</p> </div> </div> </template> <script> export default { data () { return {  showTotal: true, basePrice: 100 } }, computed: { totalPrice () { return this.basePrice + 1 } }, methods: { toggleShow () { this.showTotal = ! this.showTotal } } } </script>Copy the code

2. Use calculated properties in V-for to act as a “filter”

< the template > < div > < h4 > test < / h4 > < div > < ul > < li v - for = "n in evenNumbers" > {{n}} < / li > < / ul > < / div > < / div > < / template > < script >  export default { data () { return { numbers: [ 1, 2, 3, 4, 5 ] } }, computed: { evenNumbers () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } } } </script>Copy the code

3. Comparison between WATCH and computed SET function

For computed tomography received by VUEX, no change can be detected by SET, and only watch can take effect. (Principle: does not change the computd value, only changes the return value of get => access outside the component)

For the computed changes of v-Model, no change can be detected with watch, but only by using the set function method in computed object (Principle: it is equivalent to changing the value of computed itself every time => access within the component)

conclusion

That’s all, that’s all I know about computed data in the Vue series so far. Feel helpful to your development can like collection a wave, if I write wrong, I hope to point out. If you have better ideas or suggestions, feel free to share them with me in the comments section below. We progress together and grow together. Thanks [bow].

The resources

  • My gitHubDemo
  • Vue authoritative guide tutorial
  • Vue official document