《学习总结》vue2与vue3的区别

纯菜鸡个人总结

当前需求是将vue2+ts项目中的logicflow示例页面放到vue3+ts项目中，虽然之前也使用过vue3但是没有加ts，并且之前使用vue3是将setup（）写到script标签中间，而现在的vue3项目是将setup()写到script标签上了，这么写最直观的就是代码真的简洁很多，js代码直接就写在script标签里了，也不需要用export default 包裹，写完的页面基本就是引入、声明变量、方法。但是写法还是有点区别的。

做需求中的感受：（算是总结vue2与vue3的区别）

首先就是vue3中没有this了

1》在vue2中使用data中声明的变量需要使用this.来调用，而在vue3中不能使用this，直接用变量名就可以使用变量

2》在vue2中能通过给标签加 ref="名称"，然后在js中使用this.$refs.名称调用这个dom，但是vue3中没有this了。所以需要换一个方式，首先是可以给标签加id，然后通过document.getElementbyId获取到这个dom，

或者还是给标签加ref=“变量名”，然后声明一下const 变量名 = ref<any>(null)，之后使用的时候 就直接 变量名.value就可以使用了（这个方法可以百度vue3中怎么获取ref元素，更加详细）

3》声明变量也有很大的变化，vue2中声明的变量是在data中return出来的，直接就是响应式的，

但是vue3中就不一样了,没有将setup()写在script标签上的时候，变量还是需要return出来的，否则将拿不到这个变量，

而将setup()写在script标签上时，就不需要return了，可以写在script的任意地方（为了规范应该都是写在import之后，方法之前）

。vue3中直接声明的变量就不是响应式的了，例如，直接声明变量，然后将变量显示在页面上，通过一个点击事件修改变量的值，虽然控制台打印出来的变量值是修改了，但是页面上的值是不会变的。

需要响应式的变量需要通过ref（）或reactive（）进行声明，个人理解是基本数据类型使用ref（）声明，reactive（）声明对象或数组，两个的区别可以百度专业的文章看看。

4》在vue3中关于组件间传值，因为没有this之后，也有不小的改动

在本次项目中这两个的写法是这样的：

const props = defineProps<{

变量名:类型,

}>();

const emit = defineEmits([

"方法名",

]);

然后使用的时候是props.变量名，而方法则是emit（“方法名”）进行调用