vue2和vue3的写代码上的区别

路由的区别

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加强了组件自身的隐私，需要暴露才能被拿取到