不习惯的 Vue3 起步一
![不习惯的Vue3起步一](https://static001.geekbang.org/infoq/b0/b0a9d9eaaf9822188cdf085e01b01069.png)
序
Vue3 虽然说是 Vue2 的升级版,但里面不一样的地方还是挺多的,并且相比 Vue2 能更好的使用typescript
了
先从网上找视频学习:https://www.bilibili.com/video/BV1gf4y1W783
目录:
Vue + TS 技术历史变革
Vite 还是 Webpack
Typescript 你还不熟?
本套实战课程总结
Vue + TS 技术历史变革
对于 vue 和 typescript 的结合使用,在 vue2 中就已经出现了,那就是vue-class-component
,但使用起来其实不是很方便,还不如不用 typescript
在 Vue2 --> Vue3 过渡阶段出现了 @vue/composition-api
和vuex-composition-helpers
vue3 时代: xxx@next + Vite
在Vue3
中性能提升较大:
打包大小减少
初次渲染快,更新渲染快
内存减少
使用 Proxy 代替 definePropery 实现数据响应式
重写虚拟 DOM 的实现(把没有用到的 DOM 干掉)和 Tree-Shaking(摇树:在程序中会有一个入口文件作为树的树干,会有很多依赖文件像树的树枝,在打包过程中,会将一些没有用到的代码或文件删掉,让代码变得更紧密)
Vue3 新增特性:
新增 CompositionAPI
setup
ref 和 reactive
computed 和 watch
新的生命周期函数
provide 和 inject
新组件
Fragment 文档碎片
Teleport 瞬移组件的位置
Suspense 异步加载组件的 loading 界面
Vite 还是 Webpack
Vite 是 vue3 本身推荐的构建工具,编译速度非常快
webpack 是老牌构建工具,vue2 时代 vue cli 这样的打包都是需要用到
如果就是要用 vue 开发,并且针对的浏览器版本较高,不需要兼容开发的,那么推荐使用 Vite
![](https://static001.geekbang.org/infoq/9d/9d60a707f5f908320cfbc21f8b36222f.png)
Vite 的世界
Vite 中文网 https://vitejs.cn/
先在 vs code 中打开终端,使用 yarn 创建一个 vite 项目: yarn create vite first-vite-demo --template vue
PS: 在视频教程中使用的 vue3 版本比我的要早一些了,我的是 vue3.2.x 了,所以会有一些不同。
错误 1
我这里遇到了一个警告和一个错误,警告是 yarn 版本过低了,错误是
![](https://static001.geekbang.org/infoq/f4/f43925651e66fd638fb264d6e9c6b954.png)
警告通过升级 yarn 即可消除,npm install --global yarn
错误是说C:\Program 不是内部或外部命令,也不是可运行的程序或批处理文件
![](https://static001.geekbang.org/infoq/44/446a5258b9284f0ce5a150eeca0c0739.png)
这里解决的方式有挺多的,不过我选择了重新安装 node,具体安装可参考:https://www.jianshu.com/p/30ba1da2bde1 。这里需要把 yarn 全局位置也配置一下。
现在就可以使用命令正确创建了:
![](https://static001.geekbang.org/infoq/d1/d105d87829704b5ac315327e31348c2b.png)
创建出来的项目结构:
![](https://static001.geekbang.org/infoq/2f/2f37167cb5693d24d407eda869aaf0b8.png)
然后可以使用yarn dev
运行项目,打开默认的 url 地址
![](https://static001.geekbang.org/infoq/42/4242a977d811bbe41ff600ee4f45ed7b.png)
![](https://static001.geekbang.org/infoq/cc/cc9a3b49c7eccfa6e5d95f1d6e7bb024.png)
可以看到页面正常运行出来了,不过当我打开 src 文件夹中的 App.vue 时会在界面上出现一个红色波浪线报错,虽然不会影响程序的运行,但是还是看着很不舒服
![](https://static001.geekbang.org/infoq/64/64ae857396104b97413a0c5ac62fa95a.png)
错误 2
这主要是因为插件vetur
的关系,在 vue2 中,template 只能有一个根元素,但是在 vue3 中则没有这个限制,所以可以对vetur
检查语法功能设置进行修改。
将里面的 Template 勾选取消,然后重启 vs code,这样重新打开App.vue
就不会出现红色波浪线了
![](https://static001.geekbang.org/infoq/5d/5d37f4b6405ee9f1aee47d31fbe744d1.png)
![](https://static001.geekbang.org/infoq/cc/ccdccd499d591e63790988405914dbfa.png)
入口文件
在程序中,依旧还是以 main.js 为主干,是程序的入口文件。在 vue2 中,创建 vue 实例使用new Vue
,而在 vue3 中则是可以直接使用createApp
方法
引入组件
在 Vue3 中,使用 vite 创建的示例里,App.vue 中引入使用HelloWorld
组件,并没有写components
包括,这是因为使用了setup
![](https://static001.geekbang.org/infoq/d5/d547595ccc8c484e30af2382d9a57b9b.png)
setup 语法糖
关于单文件组件<script setup>
介绍:
基本语法:<script setup>
,在原始的 script 标签上附加上 setup
改变 1: 组件自动注册
像上面示例所说,使用了 setup 语法糖之后,组件直接 import 引入进来就可以使用了
改变 2:属性和方法直接在template
中使用,无需 return 返回
之前 vue3.0 中会有一个setup
函数,要暴露变量必须 reutrn 出来,这样才能在template
中使用。(当然目前 3.2 也是同样支持这样写的)
现在使用了语法糖之后就不需要写return
和export default
了,直接定义使用即可。同样也能达到上面的效果:
改变 3:关系组件的数据传递
在 3.0 版本中,因为使用的是 setup 函数,可以将 props 数据存放作为参数传入。
PS: 这里对于 props 数据的解析,使用 es6 的解构方式有问题,会消除 prop 的响应性。
这里举一个例子,点击按钮改变数值,但是在子组件中,使用 es6 解构出来的数值不会随之改变,需要使用toRefs
方法进行解构。
父组件:
子组件:
效果:可以看到 es6 解构出来的数值只是固定的,不会随父组件中数值变化而响应式改变。
![](https://static001.geekbang.org/infoq/87/87c789346fc91ad1af2c5514d8eec8aa.gif)
说完 3.0,现在来看看 3.2 使用语法糖之后的用法:
对于 props 的接收可以使用defineProps
方法,如果需要给父组件传值可以使用defineEmits
方法。defineProps
和defineEmits
在语法糖中可以不用引入,不过我在下面的示例中还是写了一下。
子组件:
父组件:
效果:
![](https://static001.geekbang.org/infoq/22/22a09e0e6229f83900bfa0584b95c7f0.gif)
改变 4:获取 attrs 和 slots
一般而言,在<script setup>
使用 slots
和 attrs
的情况应该是很罕见的。可以在模板中通过 $slots
和 $attrs
来访问它们。在你的确需要使用它们的罕见场景中,可以分别用 useSlots
和 useAttrs
两个辅助函数
这里关于$attrs
使用可参考:https://juejin.cn/post/7103271635783778311
这里就不详细展开了
改变 5: defineExpose
在 setup 语法糖中,外部父组件默认是不能使用refs 了)。这里<script setup>
类似于形成了一个闭包,所以为了外部能够使用,可以使用defineExpose
将外部需要的属性暴露出去。
父组件:
子组件:
暂时先告一段落,看<script setup>
语法糖就花了好久。
可能是我刚刚开始学习Vue3
的关系吧,<script setup>
感觉代码量多了会很复杂,看起来更加不清晰了,而且可能从setup
函数看还有点 vue2 的影子,这个语法糖真的就和 vue2 完全不一样了。
挺多东西要推翻重来的,没有 this 真的不习惯了。
版权声明: 本文为 InfoQ 作者【空城机】的原创文章。
原文链接:【http://xie.infoq.cn/article/ff4bb01ea278da63735b4d419】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论