Reference article: mp.weixin.qq.com/s/B7n_dLC9r…

1. Custom instructions

Vue2 usage

The following hooks are used in VUe2:

  • Occurs after the bind-instruction is bound to an element. It only happens once.
  • Inserted – Occurs after the element is inserted into the parent DOM.
  • Update – This hook is called when the element is updated, but the child elements have not been updated.
  • ComponentUpdated – This hook is called as soon as components and children are updated.
  • Unbind – This hook is called once the instruction is removed. It’s only called once.
<p v-highlight="'yellow'"</p> vue.directive ('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value
  }
})
Copy the code

Vue3 usage

The following hooks are used in VUe3:

  • created– new! Called before an element’s attribute or event listener is applied.
  • The bind – beforeMount
  • He inserted – mounted
  • beforeUpdate: new! This is called before the element itself is updated, much like a component lifecycle hook.
  • Update → Remove! There are too many similarities to update, so this is redundant, please use updated instead.
  • ComponentUpdated –updated
  • beforeUnmount: new! Similar to a component lifecycle hook, it is called before an element is unloaded.
  • unbind -> unmounted
<p v-highlight="'yellow'"> Highlight this text in bright yellow </p>const app = Vue.createApp({})
app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  }
})
Copy the code

2. Filter

Vue2 usage

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountBalance | currencyUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number.required: true}},filters: {
      currencyUSD(value) {
        return '$' + value
      }
    }
  }
</script>
Copy the code

Vue3 usage

Filters are deprecated in VUe3, and use method calls or computed properties computed is recommended

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountInUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number.required: true}},computed: {
      accountInUSD() {
        return '$' + this.accountBalance
      }
    }
  }
</script>
Copy the code

Global property definition

// main.js
const app = createApp(App)
/ / define
app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

/ / use
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>
Copy the code

Note: This approach can only be used in methods, not computed properties, because the latter makes sense only if defined in the context of a single component.

3, fragment

Vue2 usage

Vue2 does not support multi-node components

<template>
  <div>
    <header>.</header>
    <main>.</main>
    <footer>.</footer>
  </div>
</template>
Copy the code

Vue3 usage

Vue3 supports multiple node components:

<template>
  <header>.</header>
  <main v-bind="$attrs">.</main>
  <footer>.</footer>
</template>
Copy the code

4. Priority of V-IF and V-for

In the vue2

When both V-if and V-for are used on an element, v-for takes precedence

In the vue3

V-if always takes precedence over V-FOR

5, slot

Child components

<slot name="content" :data="data"></slot>
export default {
    data(){
        return{
            data: ["Passing by, passing by."."You have to appreciate it if you don't like it."."Company is the longest confession of love."]}}}Copy the code

In the vue2

<! -- used in parent component --><template slot="content" slot-scope="scoped">
   <div v-for="item in scoped.data">{{item}}</div>
</template>
Copy the code

In the vue3

<! -- used in parent component --><template v-slot:content="scoped">
   <div v-for="item in scoped.data">{{item}}</div>
</template><! --><template #content="{data}">
    <div v-for="item in data">{{item}}</div>
</template>
Copy the code

6, v – model

In the vue2

Using the V-Model on the component is essentially passing the value property and firing the input event

<search-input v-model="searchValue"><search-input> <! < searchValue :value="searchValue" @input="searchValue=$event">Copy the code

In the vue3

Using v-Model on a component is essentially passing a modelValue property and firing an Update :modelValue event, and the same component canUse more than onev-model

<modal v-model:visible="isVisible" v-model:content="content"></modal> <! -- Equivalent to --><modal :visible="isVisible" :content="content" @update:visible="isVisible" @update:content="content"/>
Copy the code

7, watch

In the vue2

watch:{
    person: {
      handler(newVal,oldVal) {
      // ...
      },
      deep: true.immediate: true}}Copy the code

In the vue3

Watch (source, callback, [options])

Parameter Description:

  • Source: can support string, Object, Function, Array; Used to specify the reactive variable to listen for
  • Callback: Callback function to execute
  • Options: Supports deep, immediate, and Flush options.
watch(
  () = > state.person,
  (newVal, oldVal) = > {
    console.log("The new value.", newVal, "The old values.", oldVal);
  },
  { deep: true});Copy the code

8. Life cycle

9. Establish data

In the vue2

export default {
  props: {
    strProp: String
  },
  data () {
    return {
      value1: ' '.value2: ' '}}}Copy the code

In the vue3

import { reactive } from 'vue'

export default {
  props: {
    strProp: String
  },
  setup (props,{emit,attrs,slot}) {
    const state = reactive({
      value1: ' '.value2: ' '
    })

    return { state }
  }
}
Copy the code

When you use setup, it takes two arguments:

Props: Properties passed by the component

Context: Contains three attributes, attrs, slot, and emit

The props received in setup are reactive and are updated as new props are passed in. Because it is reactive, it cannot be deconstructed using ES6; the solution is toRefs. ToRefs is used to convert a Reactive object to a normal object whose attributes are all ref objects (Reactive handles bidirectional binding of objects, and REF can handle both objects and basic types of bidirectional binding). The most commonly used this object in Vue2 is not accessible from setup, and deconstruction removes its responsiveness, so context provides the three most commonly used this attributes: attrs, slot, and emit.

Ref, toRef, toRefs

So refs are simply reactive variables and toRefs is a way of converting non-reactive objects into reactive objects and toRefs are a way of breaking reactive objects up into an infinite number of reactive Refs

 setup() {
    const obj = ref({count:1.name:"Zhang"});//ref handles objects
    setTimeout(() = >{
        obj.value.count = obj.value.count + 1;
        obj.value.name = "Bill";
    }, 1000)
    return{obj}
 }
 
 setup() {
    const year = ref(0);//ref handles base types
    const user = reactive({ nickname: "xiaofan".age: 26.gender: "Female" });//reactive processes objects
    return {year,user};
  },
  
 / / use toRefs
 setup() {
    const year = ref(0);
    const user = reactive({ nickname: "xiaofan".age: 26.gender: "Female" });
    return{year,... toRefs(user)};// Use toRefs to handle reactive objects as ref objects
  },
Copy the code