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或其他值的情况,这取决于外部上下文。

个人博客:苏恩博客

相关推荐
随风一样自由4 小时前
【前端独角兽】刚进入前端领域的前端开发用jQuery还是Vue3?
前端·javascript·vue3·jquery
IMPYLH5 小时前
HTML 的 <data> 元素
前端·html
YHHLAI5 小时前
[特殊字符] 面试中的 Promise —— 从入门到精通
前端·javascript·面试
weixin_BYSJ19876 小时前
SpringBoot + MySQL 乒乓球运动员信息管理系统项目实战--附源码04954
java·javascript·spring boot·python·django·flask·php
沪飘大军6 小时前
ll-llm:一个零依赖、可插拔的 OpenAI 兼容 LLM 代理
javascript
leoZ2317 小时前
Claude 驱动的全栈开发:Spring Boot + Vue 的 BS 架构实践
vue.js·spring boot·架构
kyriewen7 小时前
我扒了 GPT-5.6 的全部编程跑分——有一项 OpenAI 没敢放出来
前端·gpt·ai编程
前端H8 小时前
微前端 v3 架构升级:从加载隔离到状态协同
前端·架构·状态模式
山河木马8 小时前
GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)
javascript·webgl·图形学
陆枫Larry9 小时前
小程序包体积优化:用 SVG 图片替换 iconfont,并保留 CSS 控色能力
前端