区别有两个目的:一面试说一下书面化的表达,二工作需要升级大白话说一下项目应用的区别。
双向数据绑定:
vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持 结合 发布订阅(getter&setter)模式的⽅式来实现的。
vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理,使⽤ref或者reactive将数据转化为响应式数据,从⽽ 实现对数据的监控。
应用就是:2中监听数据是单层的,有些数组,对象内部变化存在监听不到,对某些修改需要用$set强刷新赋值;3中不需要了类似可以实现内部监听。
实例化main.js:
2中new出的实例对象,所有的东西都在这个vue对象上,template里必须要有一个根元素,是否都会跑⼀遍,性能消耗大。
3按需导出了一个createApp 中,template里不要求只有一个根元素,可以⽤ES module imports按需引⼊,如:keep-alive内置组件、v-model指令,减少 了内存消耗。
生命周期:
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
3中使用setup语法糖即可直接写,各个生命周期意思不做赘述
数据和方法的定义:
2使⽤的是选项类型API(Options API)【在代码中分割不同属性:data,computed,methods等】:data() { return {}; }, methods:{ }
3使⽤的是合成型API(Composition API):setup中定义函数和属性,统一return{}
父子间传参(props&emits):
2中this.props获取,this.$emit使用,
3中setup中setup(props,context){context.emit(),props}两个参数获取,setup语法糖如下
<script lang="ts" setup>
1...prop定义使用
//interface 定义
interface Props {
show: boolean
isUpdate: boolean
title?: string
width?: string
}
//withDefaults赋予初始数据
const props = withDefaults(defineProps<Props>(), {
show: false,
isUpdate: false,
width: "800px"
})
2...子向父暴露可用函数
//子组件
defineExpose({函数名逗号隔开})
//父组件
<keep-alive>
<component :is="part" v-show="part" :show="showRef" ref="componentRef"></component>
</keep-alive>
componentRef.value?.函数名()
3...子组件emit
//定义
const emits = defineEmits(["handle1", "handle2", ...])
//调用
emits("handle1",参数)
指令和插槽的使用不同
2中不建议将v-for和v-if写在一起使用,允许直接使用slot
3中将v-if当作v-for大的一个判断语句,不会相互冲突;移除keyCode作为v-on的修饰符,不支持config.keyCodes;移除v-on.native修饰符;移除过滤器filter;不允许直接使用slot,正确格式为 v-slot文章来源:https://www.toymoban.com/news/detail-656507.html
其他使用区别继续更新,setup语法糖还是比较好用的,建议直接走项目学习比较好文章来源地址https://www.toymoban.com/news/detail-656507.html
到了这里,关于vue2和vue3的区别(Vue3升级部分)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!