1.组件根节点标签

vue2 根标签只支持一个 vue3 根标签可支持多个

2.生命周期

beforeCreate  -> setup()	开始创建组件之前，创建的是data和method
created       -> setup()
beforeMount   -> onBeforeMount	组件挂载到节点上之前执行的函数。
mounted       -> onMounted	组件挂载完成后执行的函数
beforeUpdate  -> onBeforeUpdate	组件更新之前执行的函数。
updated       -> onUpdated	组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount	组件挂载到节点上之前执行的函数。
destroyed     -> onUnmounted	组件卸载之前执行的函数。
activated     -> onActivated	组件卸载完成后执行的函数
deactivated   -> onDeactivated  在组件切换中老组件消失的时候执行

3.Composition API(v3) / Options API(v2)

<script>
 export default {
   // 数据
  data(){
   return{};
  },
  mounted(){},
  // 方法
  methods:{},
  computed:{}
}
</script>

vue3 :setup语法糖

<script setup>
// 写入数据和方法
</script>

4.组件传值

props获取

vue2 直接通过props获取

vue3的两种写法：写法1:

defineProps({
    msg: String,
    count: Number
})

写法二：

setup(props,context){ console.log(‘props’,props) }

子传父自定义方法

vue2: $emit()

setup(props,context){context.emit()}

汇总：

5.组件ref设置

vue2设置子组件内ref：

<div ref=“domRef”></div>  
// 获取  
this.$refs.domRef;

vue2在设置后，组件内的变量及方法均可获取及调用

vue3设置 vue3为子组件内的数据添加了限制，需要使用defineExpose将子组件内的属性和方法暴露出去

父组件

<template>
    <div>
        <div>子组件名称： {{ name }}</div>
        <button @click="click">获取子元素的 name</button>
        <Son ref="son" msg="123" />
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import Son from './Son.vue'

let son = ref()
const name = ref("")

const click = () => {
    console.log("son", son.value.name);
    name.value = son.value.name
}
</script>

子组件

<script setup>
const props = defineProps({
    msg: String,
    count: Number
})
const name = "我是子组件"

defineExpose({
    name
})
</script>
<template>
    <div>
        传入子组件的值：{{ msg }}
    </div>
</template>

运行结果：

图片.png

6.reactive, ref（vue3）

vue3新增使用reactive, ref设置响应式数据

7.路由

路由引用

可以参考 vue2 与 vue3 的 vue-router的差异

路由使用

vue2 ： $router / $route

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

const router = useRouter()
const route = useRoute()

8.Suspense 标签的添加(vue3)

<Suspense> 为异步组件提供加载状态

9.diff算法

vue2:

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
diff算法会比较每一个vnode,而对于一些不参与更新的元素，进行比较是有点消耗性能的。

vue3:

diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags，patchFlags就是优化的标识。
只会比较patchFlags发生变化的vnode,进行更新视图，对于没有变化的元素做静态标记，在渲染的时候直接复用。

10.双向绑定原理

vue2: 利用ES5的一个APIObject.defineProperty()对数据进行劫持，结合发布者订阅者模式的方式来实现的。

vue3:使用了ES6的Proxy API对数据代理。

vue2.0与vue3的响应式

vue2与vue3的区别【持续更新】