The difference between vue2 and vue3

1. The principles of vue2 and vue3 responsiveness have changed

vue2The responsive principle is to use an es5 API.()Hijacking of data is achieved in combination with the publish subscription model.

vue3Using es6proxy The API uses the reactive() function to enclose a layer of Proxy to each object, and uses Proxy to monitor the changes in attributes to realize data monitoring.

Compared with the vue2 version, the advantages of using proxy are as follows

Only listen for a certain attribute, not all objects

2. You can save for in, closures and other content to improve efficiency (just bind the entire object directly)

3. You can listen to the array without having to do specific operations on the array alone. Proxy can directly intercept all object-type data operations, perfectly supporting monitoring of arrays. (Can detect changes in the data inside the array)

2. Vue3 supports fragments (Fragments)

That is to say, there can be multiple root nodes in the component.

vue2：

<template>
  <div>
    <h2> xxx </h2>
    <text> xxx <text>
  </div>
</template>

 vue3：

<template>
  <div> XXX </div>
  <h2> xxx </h2>
  <text> xxx <text>
</template>

3. Definition of data and methods

Vue2 uses the option API (Options API), Vue3 uses the Composition API (Composition API)

The old option API splits different properties in the code: data, computed properties, methods, etc. The new combination API allows us to use methods (functions) to segment, compared to the old APIs using attributes to group.This makes the code easier and cleaner。

setupThe function can be said to beVue3attributes and method entry. existVue2In, thedata、methods、computed. existVue3We put both properties and methods insetupin the function.setupThere are several features in the function:

 (props,context): Receive two parameters

(1) props: receive parameters transmitted from the parent component

(2) context: context, mainly contains 3 usage parameters: attrs, emits, slots, equivalent to this attrs, emits, slots in Vue2

2. There are return values, and the return values ​​can be two types:

(1) Return object, the attribute method in the returned object can be used directly in the template;

(2) Return to the rendering function, which can customize the rendered content;

3. There is no inside the functionthis； 

 4. When there are asynchronous functions inside, you need to useawaitWhen you are, you can use it directly, without needingsetupAdded in frontasync

4. Life cycle hook

vue2	vue3	illustrate
beforeCreate	setup()	Before component creation
created	setup()	Component creation is complete
beforeMount	onBeforeMount	Before component mount
mounted	onMounted	Component mount is completed
beforeUpdate	onBeforeUpdate	Data update, before virtual DOM patching
updated	onUpdated	Data update, virtual DOM rendering is completed
beforeDestroy	onBeforeUnmount	Before component destruction
destroyed	onUnmounted	After the component is destroyed
activated	onActivated
deactivated	onDeactivated

• If the component is<keep-alive>If included, the following two hook functions will be added.

1. onActivated(): The component contained in it will have two additional life cycle hook functions. Executes when activated.
2. onDeactivated(): For example, switch from component A to component B, and executes when component A disappears.

5. Father-son communication

(1) Father passes on to son

vue2：(‘props’,)
vue3：setup(props,context){ (‘props’,props) }

1. Parent component provides data

2. Parent component passes data to child component

3. Subcomponents are received through defineProps

4. The child component renders the data passed by the parent component

// Parent component
 <script setup>
 import { ref } from "vue"

 const money = ref(100)

 </script>

 <template>
   <son :sonMoney="money"></son>
 </template>


 <Son :money="money" :car="car" @changeMoney="changeMoney"></Son>


 // Subcomponents
 <script setup>
 // If you use defineProps to receive data, this data can only be rendered in the template.
 // If you want to operate the props attribute in script, you should receive the return value.

 const props = defineProps({
   sonMoney: {
     type: Number,
     default: 1
   }
 })

 ('setup', )
 </script>

 <template>
   son
   {{sonMoney}}
</template>

(2) The son passes on to the father

vue2：this.$emit()
vue3：setup(props,context){()}

1. Get emit, defineEmits() in child component

2. Use emit to send events in subcomponents

3. Parent component listens to events of child component

4. Parent component provides event handling functions

// Parent component

 <script setup>
 import { ref } from "vue"

 const money = ref(100)

 const haddMoney = (value) => {
   ('haddMoney', value)
    = value
 }

 </script>

 <template>
   <son :sonMoney="money" @addMoney='haddMoney'></son>
 </template>


 // Subcomponents
 <script setup>
 // If you use defineProps to receive data, this data can only be rendered in the template.
 // If you want to operate the props attribute in script, you should receive the return value.
 const props = defineProps({
   sonMoney: {
     type: Number,
     default: 1
   }
 })

 ('setup', )

 const emit = defineEmits(['addMoney'])
 const addMoney = () => {
   emit('addMoney', 1000)
 }

 </script>

 <template>
   son
   {{sonMoney}}
  <button @click="addMoney"></button>
</template>