Watch Reconnaissance attribute

  • Used to listen for changes in data
    • Suitable for historical tracking and revocation
  • Watch is asynchronous, which means that the code in watch will not be executed until all the current code has been executed
  • Watch does not initialize the page automatically, but after the data has been modified
    • But the advanced features areimmediate:trueLet the property support be executed automatically once the page is initializedOnline sample
  • Another advanced feature of the Watch isdeepProperty, which allows you to tell Vue whether the data has changed
    • Complex objects change only when the reference address is changed, whereas simple types of data change only when the data is changed
    • obj={a:1}.obj.aThe change theoretically does not triggerobjChange, whiledeepProperties can monitor this!
    • That even ifobj.aChange,objThe whole is a changeOnline sample

This.$nextTick fixes watch asynchro

Let’s start with an example

This example shows a solution to the watch asynchrony problem

  • When Vue solves the asynchronous problem, it uses nextTick encapsulated by itself, because nextTick is used in the source code, and only asynchronous functions of the same level as it can arrange the task after the occurrence of watch, not setTimeout can solve the problem
  • This example can actually be observed in debugger mode

Several ways to write property listening in Watch

watch:{
	o1:function(newValue,oldValue){},
    o2(){},
    o3:[f1,f2],
    o4:'methodName'.o5: {handler:fn,deep:true.immediate:true},
    'object.a':function(){}}Copy the code

Methods can be defined as time-passing or time-passing

Computed properties

Online Example 1 Online Example 2

  • Just use it as a normal property,computedIt’s going to run the first time
  • The commonly usedgetterBut it also hassetter

Differences between computed and Methods:

  • Any change to any data that is posted to the page will refresh the page and method will be re-executed
  • The caching mechanism ensures that computed properties will not run twice after they are mounted on a page, even if the page is refreshed
  • But if you’re using{{ xxx() }}This way, every page refresh must be repeated

To expand into a setter

computed:{
	xxx(){   // This is the default getter
		return}}computed: {xxx: {// expand
		get(){}
		set(){}}}Copy the code

Computed can be used for:classor:style

Return an online example of an object