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.$el，this.$refs等。如果在vue中使用普通函数那么this获取vue的实例方法等不会有问题，因为此时的this指针指向的是VUE实例。

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

个人博客：苏恩博客