vue2与vue3的区别

1. vue2和vue3响应式原理发生了改变

vue2 的响应式原理是利⽤es5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。

vue3 中使⽤了 es6 的 proxy API 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。

这⾥是引相⽐于vue2版本，使⽤proxy的优势如下

1.defineProperty只能监听某个属性，不能对全对象监听

2.可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

3.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。 （vue3.x可以检测到数组内部数据的变化）

2. Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。 

vue2：

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

 vue3：

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

3.数据和方法的定义

Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是组合式API（Composition API）

旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的组合式API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

setup函数可以说是Vue3的属性和方法入口。在Vue2中，使用的是data、methods、computed。在Vue3中我们把属性和方法都放在setup函数中。setup函数中有以下几个特点：

 1.setup(props,context):接收两个参数

(1) props ：接收来自父组件传来的参数

(2) context ：上下文，主要包含3个使用参数：attrs,emits,slots，相当于Vue2中this的 attrs,emits,slots

2.有返回值，返回值可以是两种：

 (1) 返回 对象 ，返回的对象中的属性方法，可在模板中直接使用；

 (2) 返回 渲染函数 ，可以自定义渲染的内容；

3.函数内部没有this； 

 4.当内部有异步函数，需要使用到await的时候，可以直接使用，不需要在setup前面加async

4.生命周期钩子  

vue2	vue3	说明
beforeCreate	setup()	组件创建之前
created	setup()	组件创建完成
beforeMount	onBeforeMount	组件挂载之前
mounted	onMounted	组件挂载完成
beforeUpdate	onBeforeUpdate	数据更新，虚拟DOM打补丁之前
updated	onUpdated	数据更新，虚拟DOM渲染完成
beforeDestroy	onBeforeUnmount	组件销毁之前
destroyed	onUnmounted	组件销毁后
activated	onActivated
deactivated	onDeactivated

• 若组件被<keep-alive>包含，则多出下面两个钩子函数。

1. onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
2. onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。

5.父子通信 

（1）父传子

vue2：console.log(‘props’,this.xxx)
vue3：setup(props,context){ console.log(‘props’,props) }

1. 父组件提供数据

2. 父组件将数据传递给子组件

3. 子组件通过defineProps进行接收

4. 子组件渲染父组件传递的数据

// 父组件
<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>


// 子组件
<script setup>
// 如果使用defineProps接收数据，这个数据只能在模板中渲染，
// 如果想要在script中也操作props属性，应该接收返回值。

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

console.log('setup', props.sonMoney)
</script>

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

（2）子传父

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

1. 在子组件中获取emit , defineEmits()

2. 子组件中用emit发送事件

3. 父组件要监听子组件的事件

4. 父组件提供事件的处理函数

// 父组件

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

const money = ref(100)

const haddMoney = (value) => {
  console.log('haddMoney', value)
  money.value = value
}

</script>

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


// 子组件
<script setup>
// 如果使用defineProps接收数据，这个数据只能在模板中渲染，
// 如果想要在script中也操作props属性，应该接收返回值。
const props = defineProps({
  sonMoney: {
    type: Number,
    default: 1
  }
})

console.log('setup', props.sonMoney)

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

</script>

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