Vue修炼系列教程 - 筑基篇4

前言

上一章我们讲了计算属性computed和侦听属性watch，这一章讲讲vue3中常用的生命周期和修饰符

打个广告，最底下的公众号，可以每天领外卖红包、打车优惠券还有96折充值电费等，需要的可以关注一下哦

---

OnMounted/OnUnmounted

onMounted在组件挂载(挂载的意思将虚拟dom转换成真实dom且挂到某个dom下，类似document.appendChild的操作，虚拟dom是vue的一种优化手段，有兴趣可以查阅)成功的时候触发(此时能获取得到当前组件中的dom元素)，一般的场景用于对初始化时需要做得事情可以放这里做，比如api请求等

而onUnmounted在组件卸载的时候触发，比如定时器销毁防止内存泄漏等，比如以下这个功能，进入页面时开启一个定时器，离开时需要销毁

 如果是在项目中，放在onMounted最常见的应该就是api请求了，这边也比较建议初始化相关的内容都尽量放onMounted中不要直接放setup中(放setup中也能实现对数据的初始化处理，执行顺序比onMounted中要更早，相当于vue2中的created钩子，此时获取不到dom)，特别初始调用浏览器原生方法如获取window对象等，如果以后你的项目变大，需要做服务端渲染，这些方法直接写setup中会报错，因为这些代码不但会在客服端执行还会在服务端执行，而服务端并不像浏览器有这些对象存在(比如window对象)，但服务端不会执行onMounted中的方法，所以目前建议初始化的操作都统一放onMounted中执行，同时onMounted因为已经挂载完，所以可以获取到当前组件dom节点，满足一些需要在组件初始化时操作dom的场景

修饰符

这里举例两个比较常用的事件修饰符stop和prevent(Vue中还有其他修饰符，这里举例比较常用的两个，想查看更多可以点这里)

先从stop说起，他的作用是停止事件冒泡，如下，有两个div嵌套

 会发现当我们点击子div，会触发handleClickChild还会触发父节点的click事件handleClickParent，这是因为事件冒泡的特性，单一个dom节点发生了某个事件比如点击事件，该事件会从内往外不断传递一直到根，如果想停止这种行为，可以使用stop修饰符(等同于event.stopPropagation)，此时点击子节点只会触发handleClickChild而不会触发handleClickParent了，如下图代码这样

 然后说下prevent，他的作用是阻止事件默认行为，如下，有个a标签

当你点击a标签会跳转到href对应的网站去，同时触发handleClick，如果我们想阻止a标签的这种默认行为(a标签的默认行为是跳转网页，还有如button标签中type为submit默认行为为提交表单等等)，可以使用prevent修饰符(等同于event.preventDefault)，此时点击a标签不会再进行跳转页面，当是仍然会触发handleClick，如下图代码这样

 而且修饰符可以组合使用，像这样，这样说明是先阻止默认事件，然后停止冒泡

总结

这章主要讲了vue主要的生命周期mounted和Unmounted以及常用修饰符stop和prevent的场景使用，文字持续更新中~

然后就是关注一下我的公众号呀，就是底下这玩意，每天能领外卖红包、打车红包，还有96折充值电费等