current position:Home>vue3. 0

vue3. 0

2022-04-29 09:44:57bidepanm

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
  1. 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
  1. 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
	})
}

  1. 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 ')
})

copyright notice
author[bidepanm],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290740067844.html

Random recommended