“This is the fifth day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Parameters in setup(props,context)

  • Setup execution timing, before beforeCreate() life cycle function, and this===undefined
  • If the parent component props receives data and the child component does not define props to receive data, the child component returns a warning. If the child component defines data and the parent component does not define props to receive data, the child component is undefined. The values received by the child components are processed into proxy objects, which are reactive data.
  • Attrs: when the parent passes data, it stores variables not declared to be received in props, which is equivalent to attrs in Vue2. Emit: event pass, equivalent to attrs in Vue2. X; \ emit: Event pass, equivalent to attrs in Vue2. X; emits:[‘ event name ‘] emits:[‘ event name ‘] emits:[‘ event name ‘] emits:[‘ event name ‘] -Leonard: No, it’s a slot, with some minor differences:
</span> </span> </span> </span> </Demo> </span> </span> </Demo> </Demo> </span> </span> </Demo> </Demo> </span> </Demo>Copy the code

Context. Slot is the default slot. You can’t see the header in the slot.

<Demo> <template v-slot:header> <span> Parent content </span> </template> </Demo>Copy the code

If the format is V-slot :header, it is normal. This format is recommended.

Computed attribute computed

  • Writing in the Vue2. X
computed: {
    demo(){
        return this.xxx*100
    }
}
Copy the code
  • Moving to Vue3. X can also be used, but this combination is not recommended

    In Vue3. X, passimport {reactive,computed} from 'vue', next:
Setup (){let p = reactive({XXX: 10}) // computed by default (()=>{return p.xx *100}) return {p}}Copy the code
  • Extending computed here (full version) is the same as Vue2
P.demo = computed({get(){return p.xx *100}, when computed composite values are modified, modify the source data set(value){// value receives the modified values through proxy objects, P.xx = value/100}})Copy the code

Watch Listener: watch(listener object or function,fn,option)

  • Vue3. X’s listener properties are used differently and must be introduced before being usedimport { watch,ref,reactive } from 'vue'
Setup (){let sum = ref(100) // Basic watch(sum,(newVal,oldVal)=>{console.log(newVal,oldVal))},{ // immediate: true, // deep: true // If the configuration item is not immediately enabled, it is false.}) return {sum}}Copy the code
  • You can write multiple watches (sum1,()=>{}), but vue3.x provides array writing
Watch ([sum,sum1],(newVal,oldVal)=>{//newVal,oldVal is an array})Copy the code

Let p = ref({}); let p = ref({}); Watch (p.value,(n,o)=>{}), also cannot be fixed. It is necessary to know that the object passed in ref() is reactive. Note: 1, if you need the old and new data of count, you can separate it as a basic type definition. Watch (()=>p.count,()=>{})

setup(){ let sum = reactive({ count: 100}) // Watch (sum,(newVal,oldVal)=>{console.log(newVal,oldVal)) // Count in newVal,oldVal is equal, Return {sum}}Copy the code

The following is a formal entry into some implementations of listening

  • Listen for a property of the object as follows:
Let p = reactive ({count: 200}) watch (() = > p.c mount, (nVal, oVal) = > {/ / do what})Copy the code
  • Listen to multiple attributes, can be as follows:
Let p = reactive ({count: 200, total: 5000}) watch ([() = > p.c mount, () = > p.t otal], (nVal, oVal) = > {/ / do what})Copy the code
  • Deep :true listens for objects in the corresponding data object, and can be as follows:
Let p = reactive ({count: 200, type: {name: 'Joe'}}) watch (() = > p.t ype, (nVal, oVal) = > {/ / do some what}, {deep: true})Copy the code
  • Defining a reference type by ref is a problem

    Use ref to define the reference type. Note that it is compatible with the container that needs to store the responsive object datap.valueOr throughdeep:trueEnable deep listening.
Let p = ref({name: 1,age: 18,job:{//... }}) console.log(p) watch(p.vaule,(nVal,oVal)=>{}) watch(p,()=>{},{deep: true})Copy the code



Watch should be sorted out basically.