V-SHOW和箭头函数在VUE项目的踩坑点

v-show和v-if

  1. v-show控制显示隐藏是通过控制CSS的display决定dom节点的显示和隐藏。
  2. v-if通过控制dom节点的渲染与否实现元素的显示和隐藏。

在vue中,template标签不参与页面渲染,也不会破坏代码的层级结构,所以多和v-if结合控制元素的显示隐藏。但是如果和v-show结合使用,由于tempate标签不是节点,不参与DOM渲染,所以v-show控制的css变化对于它不起作用,因此v-show的结果哪怕是false,包裹住的元素依然会显示出来。

箭头函数

箭头函数提供了更简洁的语法,可以省略function关键字、返回语句的return以及括号(当参数只有一个时)。例如,普通函数表达式const add = function(a, b) { return a + b; };可以简写成const add = (a, b) => a + b;。这种简洁的语法特别适合于传递匿名函数作为参数的场景,例如回调函数和数组方法中。

但是箭头函数没有自己的this,其this值由外层作用域决定,且不能通过call、apply、bind等方法改变。

由于vue的很多东西都是绑定在vue实例上的,也就是需要使用this去获取,例如this. e l , t h i s . el,this. el,this.refs等。如果在vue中使用普通函数那么this获取vue的实例方法等不会有问题,因为此时的this指针指向的是VUE实例。

如果使用箭头函数,箭头函数中的this不指向Vue实例,因为箭头函数没有自己的this绑定,它会捕获其在上下文中的this值。此时获取VUE实例的属性和方法等有可能会出现undefined或其他值的情况,这取决于外部上下文。

个人博客:苏恩博客

相关推荐
望获linux5 分钟前
【Linux基础知识系列:第一百五十九篇】磁盘健康监测:smartctl
linux·前端·数据库·chrome·python·操作系统·软件
十一吖i1 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
冰暮流星3 小时前
css之线性渐变
前端·css
徐同保3 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
mapbar_front3 小时前
大厂精英为何在中小公司水土不服?
前端
生莫甲鲁浪戴3 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
细节控菜鸡5 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
2501_916008895 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu6 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una6 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节