Vue2和Vue3的区别【入坑Vue前必须了解的，实测被队友坑到了】

1.引言：

Vue3是在Vue2上的进步，在我看来，Vue3使用起来更加的方便，但是两者相较而言的方便之处体现在那里呢，有些人没有Vue的基础，小白直接学习Vue3，但是学到后面发现学的是Vue2,心态会爆炸的。

2.这边文章的背景：

先说说我的经历，现在正在和几个同学一起开发一个项目【一学期的工程】，其中甲方呢要求前端运用Vue3的框架。我们队有两个前端“打手”【我和小铭（化名哦）】，我两都是Vue的0基础，所以开始学习，直接起步Vue3，分配流程图的分工，跟着B站现学现用，边学边写，每周互相看看页面的展示效果，过来一个多月，写的比较完善了，流程图上的需求基本实现了，所以我们计划将两个人的代码糅合起来，看看实际运行效果。我还记得那是一个月黑风高的下午【没错滴，就是昨天】，代码拷过来，我们激动的心，颤抖的手，迎接曙光，copy代码的时候我就觉得不对劲了，他的代码风格怎么给我一种又熟又不熟的奇妙感觉，但是又和我的代码风格不一样，我没有多虑，当我点击回车键的时候别提有多激动了，就在这时，一连串密密麻麻的报错铺面而来，点进网址，不出意外的出意外了，页面上白花花的，就像我俩惨白的脸，顿时我俩大眼瞪小眼，都觉得自己没问题。这是我都目光移到了代码风格上，突然我好像明白了问题出在哪里了，他的好像是Vue2的代码，我丢，我直接心里***。我直白的和他说，他说不可能，就是跟着带有Vue3标题的课程学的敲代码，代码没有问题。我镇定自若，截取的复制了一段他的代码，然后放到AlChat上运行，理智的Al说出了实情，确也宣判了他的“死刑”……最后我们苦逼的开始了对代码的修改。

3.好了，切回正题，正片开始：

Vue2的API设计是Options【配置】风格

Vue3的API设计是Compositions【组合式】风格

下图源于博主大帅老猿：

先看Vue2的：【分类管理】

   

再看Vue3的：【集中管理】

在Vue3中setup()与Vue2的选项式的data,methods...可以共存 。而且还可以使用this来调用setup()中的内容，【因为在Vue3中，setup()是最先执行的】，但是反过来setup不能调用data,methods...中的内容。【在Vue3中最好不写data，methods...因为setup()足以实现他们包含的功能】：   

 //Vue2的数据                           
data(vm) {
    return{
        a:100,
        c:this.name
    }
},
//Vue2的方法
methods:{
    b(){
console.log('b')
    }
},

//Vue3
setup(){
//数据
let name='张三'
let age=18
let phone='12345'
//方法
function changeName(){
name='zhang-san'//用js中的常规写法就行了
 console.log(name)
}
function changeAge(){
age+=1
 console.log(age)
}
function showPhone(){
alert(phone)
 console.log(phone)
}