1, Calculated attribute - calculated

1. Definition: the attribute to be used does not exist and must be calculated from the existing attribute. Computed: {}, define the calculated attribute in the computed object.
2. Call: use {{method name}} in the page to display the result of the calculation.
3. Principle: the bottom layer uses getter s and setter s provided by Objcet.defineproperty method.
4. When does the get function execute?

• (1) It is executed once on the first reading.
• (2) When the dependent data changes, it will be called again.

5. Advantages: compared with the methods implementation, there is an internal caching mechanism (reuse), which is more efficient and convenient for debugging.
6. Note:

• (1) The calculated attributes will eventually appear on the vm and can be read and used directly.
• (2) If the calculation attribute is to be modified, the set function must be written to respond to the modification, and the data in the set will change.

Code demonstration:
(1) Prepare a container to calculate the attribute implementation - Name Case:

	<div id="app">
		Last name:<input type="text" v-model="firstName">
		<br/><br/>
		Name:<input type="text" v-model="lastName">
		<br/><br/>
		Test:<input type="text" v-model="x">
		<br/><br/>
		Full name:<span>{{ fullName }}</span>
	</div>

(2) computed complete:

<script type="text/javascript">
	Vue.config.productionTip = false //Prevent vue from generating production prompts at startup.
	const vm = new Vue({
		el:'#app',
		data:{
			firstName:'Small',
			lastName:'love',
			x:'Hello'
		},
		computed:{
			fullName:{
			// What does get do? When someone reads fullName, get will be called, and the return value will be the value of fullName
			// When is get called? 1. When reading fullName for the first time. 2. When the dependent data changes.
				get(){
					console.log('get Called')
					// console.log(this) / / this here is vm
					return this.firstName + '-' + this.lastName
				},
				// When is set called? When fullName is modified.
				set(value){
					console.log('set',value)
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			}
		}
	})
</script>

(3) Abbreviation of computed:

<script type="text/javascript">
	Vue.config.productionTip = false //Prevent vue from generating production prompts at startup.
	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'Zhang',
			lastName:'three',
			x:'Hello'
		},
		computed:{
			fullName:{
				// Abbreviation
				fullName(){
				console.log('get Called')
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>

2, Monitoring properties - watch

1. Monitor the specified properties through the $watch() or watch configuration of the vm object. When the monitored attribute changes, the callback function will be called automatically to calculate and perform relevant operations within the function
2. The monitored attribute must exist before it can be monitored!!
3. There are two ways to write monitoring:

• (1) Pass in the watch configuration when new Vue
• (2) Monitoring via vm.$watch

4. Deep monitoring:

• (1) By default, the watch in Vue does not monitor the change of the internal value of the object (one layer).
• (2) Configure deep:true to monitor changes in internal values of objects (multiple layers).

5. Note:

• (1) Vue can monitor the changes of internal values of objects, but the watch provided by Vue cannot by default!
• (2) When using watch, decide whether to use deep monitoring according to the specific structure of the data.

Code demonstration:
(1) Prepare a container to monitor the property implementation – name case:

	<div id="app">
		Last name:<input type="text" v-model="firstName">
		<br/><br/>
		Name:<input type="text" v-model="lastName">
		<br/><br/>
		Full name:<span>{{ fullName }}</span>
	</div>

(2) watch writing method:

<script type="text/javascript">
	Vue.config.productionTip = false //Prevent vue from generating production prompts at startup.

	const vm = new Vue({
		el:'#app',
			data:{
				firstName:'Small',
				lastName:'love',
				fullName:'Small-love'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						// console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
			}
		}
	})
</script>

3, The difference between computed and watch

1. The functions that can be completed by computed and watch can be completed.
2. The functions that can be completed by watch may not be completed by computed. For example, watch can perform asynchronous operations.

4, Two important small principles:

1. The functions managed by Vue should be written as ordinary functions, so that the point of this is the vm or component instance object (vc).
2. All functions not managed by Vue (timer callback function, ajax callback function, Promise callback function, etc.) should be written as arrow function, so that the point of this is vm or component instance object (vc).