箭头函数在vue中的妙用

最新推荐文章于 2024-07-02 22:56:56 发布
最新推荐文章于 2024-07-02 22:56:56 发布
阅读量1.2k 收藏 7
点赞数 4
分类专栏： Vue 前端优化 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyp_1/article/details/108973490
版权
Vue 同时被 3 个专栏收录
24 篇文章 1 订阅
订阅专栏
JavaScript
9 篇文章 0 订阅
订阅专栏
前端优化
3 篇文章 0 订阅
订阅专栏

前言

这篇文章是带大家认识一个非常好用的小技巧，是对箭头函数的理解，我是在进行vue项目开发的时候碰到的，所以在这里整理一下分享给大家，如果有不对或者不恰当的地方，大家可以在下方评论，我们一起交流。

举几个例子

1、在对象中，看图

在这里插入图片描述
在这里插入图片描述
没有用箭头函数的情况下是还是指向这个对象中ccc，如果我们用上箭头函数的话

在这里插入图片描述

那么指向的就是data里面的值了

2、使用回调函数的时候

在这里插入图片描述
在这里插入图片描述
用普通函数的话就是找不到，报错，当然这里可以声明that对this的一个保存，但是箭头函数也可以解决这个问题，会让代码变得更加的简洁、优雅
在这里插入图片描述
在这里插入图片描述

总结

这两个例子说明了一个观点，就是在vue的项目中使用箭头函数的时候，只要是用到箭头函数的地方，那么不管是什么方式都改变不了箭头函数对data的指向，这也算是一个小妙招，目前还没有发现不当的地方，如果大家看到了，有疑问，在下发评论即可，一起学习，一起进步

A_Qyp
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
框架学习之 VUE （三） （关键词：箭头函数 模块化 组件化 组件树 实际的VUE案例） 利用实际做b站频道组件的开发过程，深度理解vue
Mark_fu博客
10-11 700
1 es6 补充 // 1 普通函数写法 var sum = function (a, b) { return a + b; }; console.log(sum(1, 2)); //3 // 2 箭头函数表达法 var sum = (a, b) => { return a + b; }; console.log(sum(3, 2)); 关于箭头函数有几个需要注意的地方 ： 1） 若左边只有一个参数 则左边的小括号可以省略掉 2） 若右边只有一个 return 返回值 则右边的大
箭头函数的使用
我是谁的博客
04-11 1756
箭头函数的使用基本用法为什么要有箭头函数和普通函数的区别不绑定this不绑定arguments什么时候不能用箭头函数 基本用法 ES6 允许使用“箭头”（=>）定义函数。 var f = v => v; 上面的箭头函数等同于： var f = function(v) { return v; }; 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 var f ...
vue中的箭头函数的作用
Ying_yy的博客
08-08 1912
首先，在Vue所有的生命周期钩子方法（如beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestory以及destoyed）里使用this，this指向调用它的Vue实例，即（new Vue）。 其次，箭头函数没有自己的this，它的this是继承而来；默认指向在定义它时所处的对象（宿主对象），而不是执行时的...
Vue箭头函数
最新发布
wuyan526的博客
07-02 361
除了原生DOM事件外，Vue还支持自定义事件，实现组件间的通信。我们可以通过$emit方法在一个组件中触发自定义事件，然后在父组件中通过v-on监听该事件。Vue还提供了事件修饰符，用于处理特定情况下的事件。在Vue中，除了在组件内部触发自定义事件外，我们还可以通过Vue实例的$emit方法在根实例中触发全局的自定义事件。在事件处理函数中，Vue允许我们访问原生事件对象（如event），以便于获取更多关于事件的信息。在Vue中，我们可以通过v-on指令来绑定事件监听器，实现对DOM事件的响应。
Vue箭头函数的使用
fsy7670的博客
03-04 1663
这里写自定义目录标题Vue箭头函数的使用函数中的代码数量问题箭头函数中this的使用 Vue箭头函数的使用 对象自变量中定义函数的原始做法 const obj = { bbb(){ } } 使用箭头函数放入多个参数 const sum (num1, num2) =>{ return num1 + num2 } 使用箭头函数放入一个参数，括号可以省略 const power = num =>{ return num * num }` 函数中的代码数量问题 函数块中有多
vue---箭头函数
bzuld的专栏
07-31 1263
ES6中的箭头函数：参数=>函数体； （1）箭头函数和普通函数对比 普通函数： function test(var param){ alert("这是传过来的参数"+param); } 箭头函数： param=>alert("这是传过来的参数...
vue的两个重要原则何时使用普通函数何时使用箭头函数
一个小白，博文源于浏览各个大佬所得，感谢行业大佬们！
10-02 636
vue的两个重要原则何时使用普通函数何时使用箭头函数
箭头函数
OrangeChenZ的博客
04-14 608
箭头函数 (param1, param2, ..., paramN) => expression //相当于：(param1, param2, ..., paramN) =>{ return expression; } // 当只有一个参数时，圆括号是可选的： (singleParam) => { statements } singleParam => { statements } // 没有参数的函数应该写成一对圆括号 () => { statements } 箭头函
【Vue踩坑之一】箭头函数的this指向
FrequencyStar的博客
07-29 1345
【一】methods箭头函数的this指向 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象 <body> <h1 id="app"> <span>{{message}}</span><br /> <button v-on:click="reverseMessage">逆转消息</button> </
简单了解vue中父子组件如何相互传递值（基础向）
10-16
最后，记住在编写组件时，组件的`methods`方法里的`this`默认指向Vue实例，因此不要使用箭头函数来定义，因为箭头函数会改变`this`的指向，导致`this`不再指向Vue实例。同样的规则适用于Vue实例中的`data`、`...
新手练习vue源码，一天搞定vue
01-04
`es6`文件可能包含了使用ES6语法的Vue代码，ES6是现代JavaScript的基石，引入了类、箭头函数、模板字符串等新特性，使得Vue的代码更加简洁和易读。 在一天内掌握Vue.js源码并不意味着要完全理解每一个细节，而是要...
自学vue过程中的一些基础知识点
06-20
6. **`methods` 中的`this`绑定**：Vue自动为`methods`中的函数绑定`this`，因此在定义方法时应避免使用箭头函数，因为箭头函数的`this`不是动态绑定的。 7. **计算属性**：计算属性基于其依赖的响应式数据进行计算...
big-screen-vue-master
03-10
此外，ECMAScript的引入意味着项目可能使用了ES6及以上的语法特性，如箭头函数、类、模板字符串等，提高了代码的可读性和可维护性。而前端框架一词可能指的是除了Vue.js之外，还可能运用了Vuex进行状态管理，或者...
javascript函数进阶详细内容 函数闭包 箭头函数 call bind apply用法 偏函数 回调函数
qq_52168812的博客
04-26 383
JS函数进阶 这次的内容我会给大家详细介绍函数方面的内容 1.箭头函数：ES6新增的定义函数的方式，箭头函数是用来简化函数定义语法的。 - 箭头函数的语法: ()=>{} ()里面写形式参数，{}里面写函数体 var fun1=(a,b)=>{ console.log(a+b); } fun1(1,2);// 3 可以看到这样写的函数就相当于 function fun2(a,b) {
js---遍历的4种方法 & 箭头函数=＞
时光里的博客
09-07 8003
常规遍历方法 for i forEach 箭头函数=> for of 遍历 for in 遍历 for in 遍历的 是 数组下表 ,适合 遍历集合 箭头函数=> ES6标准新增了一种新的函数：Arrow Function（箭头函数） 基础语法 var fn1 = function(a, b) { return a + b } function fn2(a, b) { return a + b } 使用ES6箭头函数语法定义函数，将原函数的“func
vue规定用普通函数定义方法，为什么react又要我用箭头函数?
frontend_nian的博客
04-07 1026
原文首发在我的公众号，订阅可第一时间查看我的最新文章！ 大家好，我是年年！ 如果使用过react和vue，应该发现过一个问题：vue告诉我们不应该把方法、生命周期用箭头函数去定义；而在react的类组件中，把方法写成箭头函数的形式却更方便。 要问其原因，大部分人都只把他当一个理所当然的规定。但把这个问题剖开，其实能很好地把准备面试时造的火箭，在拧螺丝的时候用起来。 这篇文章可以让你在这个实际场景中去用到this的指向、作用域链以及原型。 this指向丢失 无论是vue还是react，都在官方文档中强调，需要
Vue中的箭头函数=＞目的是用来简化函数的写法的分为三部分：被赋值的变量 传入的参数 返回的数据
思维小刀
09-17 1363
对于多个参数：省略函数体的方法 复杂写法 (参数1, 参数2, …, 参数N) => { 函数声明 } var f = (num1, num2) => { return num1*num2 }; console.log(f(3, 4)); // 12 简约写法 (参数1, 参数2, …, 参数N) => 表达式（单一） var f = (num1, num2) => num1*num2; console.log(f(3, 4)); // 12 ..
Vue进阶（十九）： ES6 箭头函数
IT全栈 华强工作室
12-20 5173
基本用法：ES6中允许使用“箭头”(=&gt;)定义函数var f = v =&gt; v; 上面代码相当于：var f = function( v ) { return v; }根据箭头函数有参数和无参数来区分1、无参数的箭头函数var f = () =&gt; 5;等同于var f = function() { return 5};2、有参数的箭头函数var sum = ( a, b)...
Vue 3 之 语法糖，箭头函数、函数声明
HaSaKing的博客
04-16 2653
是两种基本的响应式引用类型，它们是组合式 API 的核心部分。相较于箭头函数，命名函数有明确的名称，更利于调试和递归调用，并且自然绑定。在 Vue 3 中，箭头函数被广泛支持，尤其是在组合式 API 的上下文中。箭头函数提供了一个更简洁的函数书写方式，并且不绑定自己的。但是，需要注意的是，在 Vue 的选项式 API 中，特别是在。标签，Vue 3 提供了一种更声明式的组件写法，极大简化了代码结构。如果你需要管理一个较大的数据结构，如对象或数组，和生命周期钩子中，通常不推荐使用箭头函数，因为这些地方的。
Vue.js组件化实战与ES6在H5活动开发中的应用
"详解vue.js组件化开发实践" 随着前端开发技术的发展，组件化已经成为提高代码复用性和...在vue.js的组件化实践中，理解并熟练运用这些技术，能够构建出结构清晰、可维护的H5活动设计系统，提升开发团队的工作效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值