API风格

vue2使用选项式API，而vue3使用的是组合式API。选项是API在代码里分割了不同属性：data，

computed，methods等；新得组合式API能让我们使用方法来分割，相比于旧的选项式API使用属性来分组，这样代码会更加简便和整洁。

vue2写法

<script lang="ts" setup>
export default {
    name: '',
    components: {
   
Explain,
    },
    data () {
   
return {
   
imgArr: ['explain']
   
}
    },
    created () { },
    mounted () { },
    methods: {}
}
</script>

vue3写法

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
...
</script>

生命周期

获取props

vue2使用props

props:['title','text']

vue3使用defineProps()

defineProps(['title','text'])

监听事件

vue2使用$emit

this.$emit('event','传参')

vue3使用defineEmits()

defineEmits(['event1','event2'])

定义响应式变量

vue2中在data()中定义并return返回

data(){
return {
name:'小明',
age:'20',
}
}

vue3使用reactive和ref定义响应式变量

• reactive定义数组和对象等复杂类型的变量

• ref定义字符串，数字，布尔值这些简单类型的变量

let arr = reactive([1,3,5,7,9]);
let str = ref('你好')

根节点的不同

vue2只支持一个根节点，而vue3支持多个根节点

// vue2
<template>
<div></div>
</template>
// vue3
<template>
<div></div>
<div></div>
<div></div>
</template>

样式穿透

vue2中使用 ::v-deep

::v-deep .类名{}

vue3中使用 ::v-deep()

::v-deep(类名)