(一)API
Vue2 :选项式 API,实现一个功能涉及的数据、方法、计算属性,分散在不同的地方。
开发的功能比较多时,代码查看和修改起来不方便。
例如总共800行代码,功能A只有100行,但比较分散。因为数据要放在data里面,方法要放在methods里面,计算属性要放在computed里面,监听部分要放在watch里面。
当操作功能A的代码时可能要在这800行代码间不停来回跳,查找麻烦。
Vue3:组合式API,实现一个功能涉及的数据、方法、计算属性,都放在同一个的地方。
底层逻辑是将实现一个功能涉及的数据、方法、计算属性等模块,全部封装到一个函数里面了。到时候哪个页面要复用,直接去调就可以了,特别方便。
尽管有800行代码,但功能A只涉及100行,且都紧挨着存放在一块儿。操作功能A的代码时,只需要在这紧挨着的100行里面查找就可以了,其他700行不用管,整体方便多了。
(二)脚手架工具
Vue2:采用Vue-Cli 脚手架,底层构建工具是webpack。
Vue3:采用create-vue脚手架,底层构建工具是vite。
无论是构建项目、安装依赖还是运行项目,vite的整体速度都远远快于webpack。
(三)项目目录和关键文件
1. 新构建的项目框架文件中,底部的项目配置文件(名字不一样,功能一样)
Vue2:vue.config.js
Vue3:vite.config.js
2. 项目包文件 package.json
Vue2:核心依赖项为vue2.x和vue-cli
Vue3:核心依赖项变成了vue3.x和vite
3. 入口文件 main.js:
Vue2:采用new Vue( ) 创建应用实例
【 PS:图解为什么可以简写为render:h=>h(App) 】
Vue3:采用createApp 函数创建应用实例
4. VSCode插件不同
Vue2:安装Vetur插件
Vue3:安装Vue Language Feature插件
5. 根组件App.vue
Vue2:1)根组件的文件顺序由上至下依次为:模板template、脚本script 、样式style。
2)模板template 要求唯一根元素。
3)脚本script 标签什么都不用添加。
Vue3:1)根组件的文件顺序由上至下依次为:脚本script 、模板template、样式style。
2)模板template 不要求唯一根元素。
3)脚本script 标签需要添加 setup 标识,用来支持组合式API。
注!!
Vue3中的 setup选项 是在beforeCreate生命周期之前执行,
此时组件实例还没有创建,获取不到this,所以this指向是undefined!!
所以我们一般不在script脚本里面使用this。
6. 单页入口 indext.html
Vue2:提供id 为app的挂载点,通过App.vue提供渲染。
Vue3:提供id 为app的挂载点,将来main.js中创建出的结构就在这里挂载。