API风格
vue2使用选项式API，而vue3使用的是组合式API。选项是API在代码里分割了不同属性：data，
computed，methods等；新得组合式API能让我们使用方法来分割，相比于旧的选项式API使用属性来分组，这样代码会更加简便和整洁。
vue2写法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<script lang="ts" setup> export default { name: '', components: { Explain, }, data () { return { imgArr: ['explain'] } }, created () { }, mounted () { }, methods: {} } </script>
vue3写法
复制代码
1
2
3
4<script lang="ts" setup> import { reactive, ref, onMounted } from 'vue'; ... </script>
生命周期
vue2 | vue3 | 描述 |
beforeCreate | setup() | |
created | setup() | |
beforeMount | onBeforeMount | DOM挂载前调用 |
mounted | onMounted | DOM挂载完成后调用 |
beforeUpdate | onBeforeUpdate | 数据更新之前调用 |
updated | onUpdated | 数据更新之后调用 |
beforeDestroyed | onBeforeDestroyed | 组件销毁前调用 |
destroyed | onUnmounted | 组件销毁后调用 |
获取props
vue2使用props
复制代码
1props:['title','text']
vue3使用defineProps()
复制代码
1defineProps(['title','text'])
监听事件
vue2使用$emit
复制代码
1this.$emit('event','传参')
vue3使用defineEmits()
复制代码
1defineEmits(['event1','event2'])
定义响应式变量
vue2中在data()中定义并return返回
复制代码
1
2
3
4
5
6data(){ return { name:'小明', age:'20', } }
vue3使用reactive和ref定义响应式变量
reactive定义数组和对象等复杂类型的变量
ref定义字符串，数字，布尔值这些简单类型的变量
复制代码
1
2let arr = reactive([1,3,5,7,9]); let str = ref('你好')
根节点的不同
vue2只支持一个根节点，而vue3支持多个根节点
复制代码
1
2
3
4
5
6
7
8
9
10// vue2 <template> <div></div> </template> // vue3 <template> <div></div> <div></div> <div></div> </template>
样式穿透
vue2中使用 ::v-deep
复制代码
1::v-deep .类名{}
vue3中使用 ::v-deep()
复制代码
1::v-deep(类名)
最后
以上就是标致河马最近收集整理的关于vue2与vue3的使用区别API风格生命周期获取props监听事件定义响应式变量根节点的不同样式穿透的全部内容，更多相关vue2与vue3内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复