vue3. 0

One 、setup

• understand ：vue3.0 A new configuration item in , Value is a function
• setup It's all Composition API（ Combine api）“ The stage of the performance ”
• Used in the component ： data 、 Methods, etc. , All shall be configured in setup in
• setup Two return values of function ：
  （1） If you return an object , Then the properties in the object 、 Method , Can be used directly in the template .
  （2） If you return a rendering function , You can customize the rendering content

import {h} from 'vue'
setup() {
	//  data 
	let name = 'xxx'
	let age = 18
	//  Method 
	function sayHello() {
		alert(`${name}${age} year `)
	}
	//  Return an object （ Commonly used ）
	 return {
		name,
		age,
		sayHello
	}
	//  Returns a rendering function 
	return () => {h('h1', 'xxxxxx')} 
}

• setup Timing of execution
  stay beforeCreate Execute one before vi,this yes undefined
• setup Parameters of
  （1）props： Value as object , Contains the attributes passed from outside the component and declared and received inside the component
  （2）context： Context object
  attrs： Value as object , The external supplement of the containing component is passed to , But not in peops Properties declared in the configuration , amount to this.$attrs
  slots： Received slot contents , amount to this.$slots
  emit： Functions that distribute custom events , amount to this.$emit

Two 、ref function

• effect ： Define a responsive data
• grammar ：const xxx = ref(initValue)
  （1） Create a reference object containing responsive data （reference object ）
  （2）js Operation data in ：xxx.value
  （3） Read data from the template ： Unwanted .value, direct <div>{ {xxx}}</div>
• other ：
  （1） The received data can be ： Basic type or object type
  （2） Basic types of data ： Responsiveness still depends on Object.defineProperty()
  Of get and set Accomplished
  （3） Object type data ： Inside “ For help ” 了 vue3.0 A new function in ——reactive function

import {ref} from 'vue'
setup() {
	//  data 
	let name = ref('xxx')
	let age = ref(18)
	let job = ref({
		type: 'xxxx',
		salary: 20
	})
	//  Method 
	function changeInfo() {
		name.value = 'yyy'
		name.age = 22
		job.value.type = 'yyyy'
		job.value.salary = 30
	}
	//  Return an object （ Commonly used ）
	 return {
		name,
		age,
		job,
		change Info
	}

3、 ... and 、reactive function

• effect ： Define a object type Response data for （ Basic type don't use it , Use ref function ）
• grammar ：const Proxy object = reactive( Source object ) Receive an object （ Or an array ）, Returns a proxy object （proxy Instance object of ）
• reactive The defined response takes the data deep
• Internally based on ES6 Of Proxy Realization , Operate the internal data of meta object through proxy object

import {reactive} from 'vue'
setup() {
	//  data 
	let job = reactive({
		type: 'xxxx',
		salary: 20
	})
	//  Method 
	function changeInfo() {
		job.type = 'yyyy'
		job.salary = 30
	}
	//  Return an object （ Commonly used ）
	 return {
	 	job,
		change Info
	}

Four 、reactive contrast ref

1. Compare... From the perspective of defining data ：

• ref Used to define ： Basic types of data
• reactive Used to define ： object （ Or an array ） Type data
• remarks ：ref It can also be used to define objects （ Or an array ） Type data , It will automatically pass through reactive Turn to proxy object

2. Compare... In principle ：

• ref adopt Object.defineProperty() Of get and set To achieve responsive （ The data was hijacked ）
• reactive By using Proxy To achieve responsive （ The data was hijacked ）, And pass Reflect operation Source object Internal data

3. Compare... From the perspective of use ：

• ref Defined data ： Operational data needs .value, When reading data, you do not need to read directly from the template .value
• reactive Defined data ： Both operation data and read data Unwanted .value

5、 ... and 、vue3.0 The principle of response in

vue2.x In response ：

• Realization principle ：
  （1） object type ： adopt Object.defineProperty() Reading properties 、 Modify to intercept （ The data was hijacked ）
  （2） An array type ： Intercept by rewriting a series of method classes that update the array
• Existing problems ：
  （1） New properties 、 Delete attribute , The interface doesn't update
  （2） Modify the array directly by subscript , The interface doesn't update automatically

vue3.0 In response ：

• Realization principle ：
  （1） adopt Proxy（ agent ）： Intercepts any attribute changes in the object , Including the reading and writing of attribute values 、 Attribute addition 、 Deletion of attributes, etc
  （2） adopt Reflect（ Reflection ）： Operate on the properties of the source object

new Proxy(data, {
	//  Intercept reading attribute values 
	get(target, prop) {
		return Reflect.get(target, prop);
	}
	//  Intercept setting property values or adding new properties 
	set(target, prop, value) {
		return Reflect.set(target, prop, value);
	}
	//  Intercept and delete properties 
	deleteProperty(target, prop) {
		return Reflect.deleteProperty(target, prop);
	}
})

6、 ... and 、 Calculate properties and monitor

1. computed function

import {computed} from 'vue'

setup() {
	let fullName = computed(() => {
		return person.firstName + '-' + person.LastName
	})
}

2. watch function

import {ref, reactive, watch} from 'vue'

setup() {
	let sum = ref(0)
	let msg = ref('xxx')
	let person = reactive({
		name: 'aaa',
		age: 18,
		job: {
			j1: {
				salary:  20
			}
		}
	})

	//  Situation 1 ： monitor ref A responsive data defined 
	watch(sum, (newValue, oldValue) = > {
		// xxxx
	}, {immediate: true})
	//  Situation two ： monitor ref Multiple responsive data defined 
	watch([sum, age], (newValue, oldValue) => {
		// xxxx
	})
	//  Situation three ： monitor reactive All attributes of a defined responsive data 
	//  Can't get correctly here oldValue; Forced on deep monitoring （deep Invalid configuration ）
	watch(person, (newValue, oldValue) => {
		// xxxx
	}, {deep: false}) // Times deep Invalid configuration 
	//  Situation four ： monitor reactive An attribute in a defined responsive data 
	watch(() => person.name, (newValue, oldValue) => {
		// xxxx
	})
	//  Situation five ： monitor reactive Some attributes in a defined responsive data 
	watch([() => person.name, () => person.age], (newValue, oldValue) => {
		// xxxx
	})
	//  A special case 
	watch(() => person.job, (newValue, oldValue) => {
		// xxxx
	}, {deep: true}) //  Here, because the monitoring is reactive A property in a defined object , therefore deep The configuration is valid 

	return {
		sum,
		msg,
		person
	}
}

7、 ... and 、watchEffect function

• watch The routine is ： It is necessary to specify the monitored properties , Also indicate the monitored callback
• watchEffect The routine is ： It is not necessary to specify which attribute to monitor , Which property is used in the monitored callback , Then monitor which attribute
• watchEffect It's kind of like computed：
  but computed Focus on the calculated value （ The return value of the callback function ）, So you have to write the return value
  and watchEffect It's more about the process （ The body of the callback function ）, So you don't have to write the return value

watchEffect(() => {
	const x1 = sum.value
	const x2 = person.age
	console.log('watchEffect The configured callback executes ')
})