Talk about the differences and links of VUE Methods Watch and Compute

  • 的头像-Tumi
  • 37 day agopublish

From the mechanism and properties to see the relationship between Methods, Watch and Compute

Picture title [Original]: “Does he think of a scorpion relationship?

谈谈VUE种methods watch和compute的区别和联系
First, Methods, Watch and Compute are based on functions, but they are different from

. On the mechanism and nature, Methods and Watch / Compute are not the same, so I will have two comparisons:

1.Methods and (Watch / computed) comparison

2.Watch and computed comparison

1.Watch and computed are based on Vue’s dependent tracking mechanism, they all try to handle this One thing: When a certain data (called it dependent data), all “related” data “automatic” dependent “Auto” depending on this data is changed, which is the automatic call related function to achieve data change. 2. For Methods: Methods is used to define functions, it is obvious that it needs to be manually called to execute. Not like Watch and Compute, “Automatically Perform” pre-defined functions

[Summary]: The function defined in Methods is a function that needs to be called, and the Watch and Computed functions will be called automatically. Complete the role of our hopes

1.Methods defines a function, you obviously need to call like “fuc ()” It (hypothesis function is fuc) 2. Computed is calculated attribute, in fact and the data attributes in the DATA object (used),

, for example:

computed: {return this.firstname + lastname}}

  When you use this.fullname, you will use this.fullname. Worth with DATA (do not be used as a function call !!)  
3.WATCH: Similar to the listening mechanism + event mechanism:
, for example:

WATCH: {dimstname: function (val) {this.fullname = val + this.lastname}}

The change in firstname is this special “event” triggered Conditions, and the function corresponding to the firstname is equivalent to the method of monitoring the incident
   Watch and computed comparison 
So much,

First, they are all based on Vue’s dependency tracking mechanism, and their commonality is: all hoped when relying on data changes, Dependent data is based on pre-defined functions We can certainly write code to complete this, but it is likely to cause a chaos and code redundancy. Vue provides us with such a convenient interface, unified rules

, Watch and Compute have significant different places:

Watch and computed the different data relationship scenes 谈谈VUE种methods watch和compute的区别和联系

1.WATCH is good at processing scene: a data affects multiple data

2. Computed scene: A data is affected by multiple data

WATCH is good at processing scene: a data affects multiple data

(specifically, it is OK, here is not described herein)

For Watch, we first said from a scene

inside the One Piece, the name of the protagonist is called: “Straw Hat One Piece”

So we will call the crew as:

Straw Hat One Pirates Sauon, straw hat piolimon, so on. . .

谈谈VUE种methods watch和compute的区别和联系 We hope that when the name of the ship has changed, the name of all crew members on this ship will change! !

One day, the ship’s long road flew to strengthen team building, carry forward the pirate culture, and decided to change the “Raw Mission” (Lu Fei is rubber) Devil Fruit Ability)

Our code is as follows:

VAR VM = New Vue ({EL: ‘#App’, / * Data options Data: 1.haizeituan_name -> One Piece Name 2. The name of the crew = One Piece Name (straw hat pirate) + crew name (such as Solaron) This relationship: (multiple) crew name Data -> Depending on -> (1) One Pirate Name Data A Data Change —> Multiple Data All Change * / Data: {Haizeituan_Name: ‘Straw Hat One Pirate’, Suolong: ‘straw hat Regis Ssol ‘, Namei:’ straw hat pirates Naime, xiangjishi: ‘straw hat pirates in the Watch, in Watch, once haizeituan_name (One Pirate Name) Change the crew in the Data option The name will be automatically changed (Suolong, Namei, Xiangjishi) and print them out * / watch: {haiZeiTuan_Name: function (newName) {this.suoLong = newName + ‘Solon’ this.naMei = newName + ‘Nami’ this.xiangJiShi = newName + ‘Xiangjishi’ console.log (this.suoLong) console.log ( this.naMei) console.log (this.xiangJiShi)}}}) // change watch master monitoring options vm.haiZeiTuan_Name = ‘rubber pirates’

demo:

the crew then unified the title prefix are changed! (Originally “straw hat pirates”)

but our road is long and spacecraft whim: I so love to eat meat, altogether we call “fleshy pirates” Well now!
 We lowermost code to:   
// Change watch master monitoring options vm.haiZeiTuan_Name = ‘fleshy pirates ‘

谈谈VUE种methods watch和compute的区别和联系

demo:

computed scene good processing: a plurality of data by a data Effects
   
Let us talk about

Luffy’s full name is called from a scene: Monkey -D- Luffy, he wanted become One Piece, but Luffy’s grandfather Karp (naval hero) and therefore was very angry, so the “Luffy” changed called “Navy King”, expecting he will change ambition

code is as follows: 谈谈VUE种methods watch和compute的区别和联系

VAR VM = New Vue ({EL: ‘#App’] Data in / * DATA Options: FirstName, Secname, ThirdName Computed Data: Lufei_Name Both relationship: Lufei_Name = firstname + secname + thirdname So the right side Data change, you will directly modify Lufei_Name * / Data: {// Luffy’s full name: Montage D · Luffy Firstname: ‘Montage’, Secname: ‘D’, ThirdName: ‘Lufei’}, Computed: {Lufei_Name: function () {return this.firstname + this.secname + this.thirdname}}} // will change “Lu Fei” to “Naval King” vm.thirdname = ‘Naval King’ // Print Road Flying full-name console.log (vm.lufei_name)

谈谈VUE种methods watch和compute的区别和联系

However:

[ One day, Lu Fei’s teasing grandfather card, accidentally found that the family spectrum can be mistaken, in fact, they are not one of “D”, but “H” family, that is, “Mont -D-Lufei may be called “Munqi-H-Luffy”

change the last code to the following:

  // Change "D" to "H" vm.secname = 'h' // Print Lufei's full name.log (vm.lufei_name)  

Demo:

谈谈VUE种methods watch和compute的区别和联系

Methods does not handle data logic relationship, only provides callable functions

, only for Watch / Computed, Methods does not process data logic relationships, only provides callable functions

New Vue ({EL: ‘#App’, Template: ‘
 {{SAY ()}}  ', Methods: { Say: function () {Return 'I want to be a pirate king'}}} 

look at each other

谈谈VUE种methods watch和compute的区别和联系

In many cases, compute is used to handle you can do if you use Watch and Methods, or do not process it. Too appropriate case

Using computed to process the repetition calculation of Methods

  
1. The function in Methods is a group "直 BOY ", if there is other parent function calls it, it will execute and return the result every time, even if these results are likely to be the same, it is not required

2. Cubput is A "heart BOY", which will be based on the dependency tracking system provided by Vue. As long as the dependent data does not change, compute will not re-calculate
:

谈谈VUE种methods watch和compute的区别和联系 New Vue ({EL: ‘#App’, // Set two Button, click to call getMethodsDate, getComputedDate method template: ‘

Methods Computed

‘, methods: {getMethodsDate: function () {alert (new date ())}, // Returns the computational properties set in the computed option – -Computeddate getcomputeddate: function () {alert (this.computeddate)}}, computed: {computedate: function () {return new date ()}} 谈谈VUE种methods watch和compute的区别和联系

First Click Methods button: Second click Methods button:

谈谈VUE种methods watch和compute的区别和联系

Note Two click Methods The return time is different! !

 Second click COMPUTED button:  
1. Two click on Methods returned to different
2. Note that the time to click Compute is the same
[Note] Why is you clicked twice? What is the time that computed is the same? NEW date () is not dependent data (not instance data in objects such as Data), so Compute only provides the value of the cache, and no recalculation

is only complied with: 1. Relational data 2 The dependent data changes these two conditions, and compute will be recalculated. “

谈谈VUE种methods watch和compute的区别和联系 The data under Methods is the calculated

using the computed to process Watch’s code redundancy in a particular case, simplifying code

谈谈VUE种methods watch和compute的区别和联系

New Vue ({EL: ‘#App’, DATA: {Fullname: ‘Penghuwan’, firstname: ‘Peng’, Secname: The code in ‘Lake’, ThirdName: ‘Bay’}, // Watch is obviously the same type, repetitive, it is not simple, not elegant Watch: {dimue) {this.fullname = newValue + THIS .secName + this.thirdName console.log (this.fullName)}, secName: function (newValue) {this.fullName = this.firstName + newValue + this.thirdName console.log (this.fullName)}, thirdName: function ( NewValue) {this.ffullname = this.firstname + this.secname + newValue console.log (this.ffullname)}}}

谈谈VUE种methods watch和compute的区别和联系

The code in Watch is obviously the same Type, repetition, it is not simple, not elegant, so we can turn it into this

谈谈VUE种methods watch和compute的区别和联系

New Vue ({EL: ‘#App ‘, Data: {Fullname:’ Penghu Bay ‘, firstname:’ Peng ‘, Secname:’ Lake ‘, Thirdname:’ Bay ‘}, // Reconstructing the code in Watch, achieve the same effect compute: function () {this.ffullname = this.firstname + this.secname + this.thirdname console.log (this.ffullname)}}

The above is all the content of this article I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment