或许有许多人问Vue3和Vue2有什么区别,其实Vue3兼容大部分Vue2的语法和书写规则。接下来我们就来看看Vue3和Vue2中不同的地方。
1,启动方式
- Vue2的启动方式是通过new Vue的方式来进行的,而Vue3是通过createAPP.use()的方式来启动的
2,全局方法
- Vue2中需要在main.js配置 Vue.prototype.$functionname = xxxx来实现
- Vue3是通过app.config.globalProperties.$functionname
3,setup
在Vue3中setup是为了使用组合API,在beforeCreate之前就被调用,并且在setup中没有this。
setup中的两个参数props 和context
(1)props代表了组件被传入的参数
(2)context是一个对象,其中attrs是属性,emit发送事件,slots是插槽
4,ref/reactive
ref定义值类型,在setup中要使用value值访问
const num = ref(3);
这里num的默认值是3。
reactive定义引用类型
const list = reactive([....])
5,computed
computed计算属性
可以通过computed返回一个值
computed({
return ...
})
同时computed中还存在get和set两个函数
computed({
get(){
return ...
},
set(v){
.......
}
})
vue3中计算属性的函数中如果只传入一个回调函数,表示的是get,vue3中计算属性的函数中如果传入一个对象,表示的是get和set。
6,watch
既然computed已经出现了,那么接下来就看看watch
watch和Vue2中的用法大致相同
computed({
get(){return xxxx},
set(v){
........
}
})
watchEffect
在回调函数中用的数据,都会监听
watchEffect(()=>{.....})
7,生命周期
onMounted 挂载、
onUpdated 更新
onUnmout 卸载