What changes does Vue 3 make compared to Vue 2?

  1. Vue 3 removes the original life cycle function, data, Watch, computed, Method, filter, etc.

  2. Vue 3 incorporates better TypeScript support to prevent low-level errors.

  3. Vue 3 is fully compatible with Vue 2 and can be written using vue2 in Vue 3 during coding.

  4. An error is thrown if the method defined in the setup return value has the same name as the method defined in methods.

    If the defined data conflicts with vue2, data overwrites the previous field

  5. Vue3 adopts proxy to implement data proxy, which can only represent the first-layer data, avoiding the deep recursion of data in VUE2 and improving component rendering performance

1. Setup function in Vue 3

  1. Vue3 integrates all apis with a setup function. The setup function is executed only once, before the lifecycle function, so the current instance this is not available in the setup function, and the method defined in vue2 writing cannot be called with this.

  2. Since data is removed from VUe3, the template is bound using the return value from Setup.

  3. Vue3 replaces this.$emit with the context.emit method when the parent component passes data

export default {
  // props is the data passed by the received parent component
  // context is a context
  setup(props,context){
    return{...// The data returned by setup}}}Copy the code

2. Lifecycle functions in Vue 3

The lifecycle function becomes a callback function with respect to VUE 2

Vue3 can write multiple lifecycle functions. Execute from top to bottom

setup() {
    onMounted(() = > {
      console.log('Component mount 1');
    });
    
    onMounted(() = > {
      console.log('Component mount 2');
    });

    onUnmounted(() = > {
      console.log('Component unload');
    });

    onUpdated(() = > {
      console.log('Component Update');
    });

    onBeforeUpdate(() = > {
      console.log('Component to be updated');
    });

    onActivated(() = > {
      console.log('keepAlive component activated ');
    });

    onDeactivated(() = > {
      console.log('keepAlive component inactive ');
    });

    return {};
  },

Copy the code

3. Ref Simple responsive data (basic type)

Ref can wrap a common value as responsive data, only simple values. Internally, the value wrapped by ref is wrapped as an object, and then processed by defineProperty. The value must be set by value

<template>
  <div class="mine">
    <input v-model="input" />
    <button @click="add">add</button>
    <ul>
      <li v-for="(item, i) in todoList" :key="i">
        {{ item }}
      </li>
    </ul>
  </div>
	<-- vue 3 template supports multiple child tags --><div></div>
</template>


setup() {
    const input = ref(' ');
    const todoList = ref<string[]>([]);

    function add() {
      todoList.value.push(input.value);
      input.value = ' ';
    }

    return {
      add,
      input,
      todoList,
    };
  },

Copy the code

Reactive data binding (reference type)

Reactive is used for reactive processing of complex data, and its return value is a proxy object.

Vue3 template: A template can have multiple horizontal tags (only one child tag can be written on the template in vue2)

<template>
  <div class="mine">
    <input v-model="input" />
    <button @click="add">increase</button>
    <ul>
      <li v-for="(item, i) in todoList" :key="i">
        {{ item }}
      </li>
    </ul>
  </div>
 
	<-- vue 3 template supports multiple child tags --><div></div>
</template>

setup() {
    const data = reactive({
      input: ' '.todoList: [],});function add() {
      data.todoList.push(data.input);
      data.input = ' ';
    }

    return {
      ...toRefs(data),
      add,
    };
  },



Copy the code

5. Computed in Vue 3

In the case of a change in dependent values, computed values are recalculated. Value is used instead of. Value in template.

async setup() {
    const data = reactive({
      a: 10.b: 20});let sum = computed(() = > data.a + data.b);

    return { sum };
  },

Copy the code

Watch in Vue 3

Watch becomes a function, otherwise the same as in VUe2

const state = reactive({ count: 0 })
watch(
 () = > state.count,
 (count, prevCount) = > {
   / /...})Copy the code

7. Vue-router in Vue 3

To use vue-router, use useRoute and useRouter

import {useRoute, useRouter} from 'vue-router'

const route = useRoute(); // equivalent to this.$route in vue2
const router = useRouter(); // equivalent to this.$router in vue2

Copy the code

Vuex in Vue 3

When using useStore to get store objects from vuex, be aware that you have to wrap them using computed so that state changes in VUex can be responded to in the page

import {useStore} from 'vuex'

setup(){
    const store = useStore(); // equivalent to this.$store in vue2
    store.dispatch(); // Dispatch asynchronous tasks through the store object
    store.commit(); // commit Modifies store data
    
    let category = computed(() = > store.state.home.currentCagegory
    return { category }
}
Copy the code

9. Vue 3 You can use JSX to define Vue components

export const AppMenus = defineComponent({
  setup() {
    return () = > {
      return (
        <div class="app-menus">
          <h1>This is a VUE component</h1>
        </div>); }; }});Copy the code