路由的区别
vue2创建路由对象实例
这里还有个细节,那就是箭头函数如果return的是一个对象,得写成()=>({})这样的形式,即对象外面要包裹一个小括号。
如上面,vue2是通过new Router,这个Router是从vue-router的文件里面import的,new这个构造函数,然后传入我们需要的对象,其中history和hash模式是通过mode属性来控制的。
vue3是通过import createRouter这个函数来构建的
vuex和pinia的区别
vue2中的vuex是有几个关键字的:state,getters,mutations,actions,modules。
vue3中的pinia只有state,getters,actions,去掉了mutations和modules,之所以vuex里面有mutations,vue的开发团队称是为了在vue开发工具中能够看到进行了多少次的state状态修改。所以在vue3的pinia中,这个属性被移除了,而且modules在pinia中是自带的,不需要我们手动去写了。
computed的区别
vue2中是写成
computed:{
xx(){
return 想要的结果
}
vue3中写成引入computed,然后
const a = computed(()=>{
return 想要的结果
})
两个都需要return结果,区别在于3里面是一个函数。
只有写法上有区别,作用都是一样的,是有缓存的,且依赖的值发生改变的时候就会发生改变。
}
watch的区别
2中的watch有两种写法,一种是监听普通变量的,一种是监听对象的
watch:{
a(new,old){
}
}
watch:{
obj:{
handler(new,old){},
immediate:true,
deep:true
}
}
3则是
watch(要监听的数据,(new,old)=>{},{immediate:true,deep:true})第三个参数可选的,
这里要注意的是,监听的时候,如果是ref数据,直接丢进去就好,不需要,.value丢进去,因为监听的是这个响应式数据。
而且watch还能监听多个值的变化
const a=ref(0)
const b=ref(1)
watch([a,b],........)
这样就可以监听多个值的变化,同时,newVal变成了一个数组,里面第一个值是a的新值,第二个值是b的新值,oldVal也同理。
ref生成的响应式对象是默认不支持深度监听的,得加上deep:true,而reactive生成的响应式对象则默认就是深度监听的。
2中的生命周期函数有beforeCreate,created,这里注意,created是小写,一开始我写错了。beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。
3中的生命周期函数是setup,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,其中setup是取代2里的beforeCreate和created的,同时3的生命周期函数是可以多次调用而不会覆盖的,这样可以使得我们在续写别人的代码的时候不会产生冲突。
2里面props是子组件props:{}或者props:[],接收的是对象的话,一般可以多写default:xx,和required:true,type:String这三个中的几个。
3里面通过宏函数defineProps({})或者defineProps([]),的方式来接收
2里面父组件拿到子组件后,可以直接去使用子组件的属性或者方法,子组件拿到父组件后也是一样的
3里面父子组件想要使用对方的方法或者属性,需要对方通过defineExpose({})传入的对象里面的值来暴露出来,才能被拿到。这里我一开始写成数组了。
3的provide(key,value)和inject(key),这里的key一般都是带引号的字符串,如果提供的是ref的数据,在inject的时候是可以修改的。
2里面子调用父的方法通过this.$emit('父的方法名',参数)
3里面子调用父的方法通过const emit = defineEmits(['父的方法名']),这里是用数组来接收
然后通过emit('父的方法名',参数)这样的形式来调用父的方法。
2里面如果给组件加上click这类方法,默认用的不是原生的方法,想用原生的,需要使用.native修饰符
3里面如果给组件加上click方法,默认是原生的。
2中想拿到组件,可以通过refs的方式
3中想拿到组件,需要通过
const xx = ref(null)
然后给子组件加上 ref=“xx”
这样的写法,xx即为子组件,这里注意,在组件身上要给xx加上"",一开始我写错了。
同时,想用子组件的数据还需要写成xx.value.数据,记得要加上value。
2中可以通过直接获取组件来强行调用组件身上的属性和方法,这个概念和传值不同,这个概念指的是没有隐私,而3加强了组件自身的隐私,需要暴露才能被拿取到