关于vue2什么时候用普通函数与箭头函数的小tips

最新推荐文章于 2024-04-28 09:30:00 发布
最新推荐文章于 2024-04-28 09:30:00 发布
阅读量749 收藏 1
点赞数 3
分类专栏： vue2 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39981639/article/details/122497465
版权

普通函数

所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
例如：methods中的事件函数、computed计算属性简写等

箭头函数

所有不被Vue所管理的函数，最好写成箭头函数，这样this的指向才是vm或组件实例对象。
例如:定时器的回调函数、ajax的回调函数、promise的回调函数等

像素检测仪
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解析vue data不可以使用箭头函数问题
08-27
Vue 中 data 不可使用箭头函数问题解析 在 Vue 中，data 属性不能使用箭头函数，这是因为箭头函数的 this 指向问题。在 JavaScript 中，非严格模式下，函数都会有一个 this 指向，但是箭头函数的 this 指向的是定义...
基于Vue2.X的路由和钩子函数详解
08-28
基于Vue2.X的路由和钩子函数详解 Vue2.X的路由和钩子函数是Vue.js框架中两个关键组件，用于管理应用程序中的导航和路由跳转。本文将深入探讨Vue2.X中的路由和钩子函数，了解它们的作用、用法和实现原理。 一、导航...
【2022-8-24】vue2中使用箭头函数踩坑记录
lookingForw_4585的博客
08-24 557
vue2项目中使用箭头函数踩坑
vue的两个重要原则何时使用普通函数何时使用箭头函数
一个小白，博文源于浏览各个大佬所得，感谢行业大佬们！
10-02 610
vue的两个重要原则何时使用普通函数何时使用箭头函数
Vue2基础补充(箭头函数、for循环、修饰符、表单控制、v-model进阶、axios、计算属性、监听属性、组件)
最新发布
AZURE060606的博客
04-28 828
Vue 能够追踪计算属性的依赖关系，当依赖的数据发生变化时，相关的计算属性会自动更新。只有在依赖发生改变时，才会重新计算计算属性的值，否则会直接返回缓存的结果。es6 新增了箭头函数，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。：在实例初始化之后，数据观测和事件配置之前被调用，此时实例还未初始化完成。：实例销毁后调用，此时实例及其所有的指令被解绑，事件监听器被移除。：只处理自己的事件，父控件冒泡的事件不处理，：只处理自己的事件，子控件冒泡的事件不处理，
vue中箭头函数入门说明
ywy7777777的博客
06-05 1557
箭头函数：是一种定义函数的方式 一、无参 1、普通函数无参 var f = function(){ return a; } 2、箭头函数无参 var f =()= > a;//a为返回参数 二、 带参 1、普通函数带参 var sum = function(a, b) { return a+ b; }; 2、箭头函数带参 注:一个参数的时候是可以省略括号的如： （1）var fun = (a) => { return a* a } （2）var fun2 = a=> { return a*
2020 零基础 Vue快速入门 Vue2.0使用ES6语法的箭头函数=> 对this作用域的理解 【整理】
超逸の学习技术博客
01-14 2416
文章目录1、引言2、简单介绍3、普通函数4、箭头函数 =>5、实例演示6、结束语 1、引言 最近，学Vue相关知识时，学到了axios，发现axios请求之后的回调函数里this并不指向当前vue实例，在浏览器按F12报了错，赶紧想着去解决问题，后面才知道原来还有箭头函数这个简便操作，一起来了解一下把~ 2、简单介绍 关于它们两个的比较，我就以请求一个随机获取笑话的api为例了，来说明它们的...
vue2知识点：箭头函数和普通函数的this指向问题
刘大猫
06-24 4069
vue2知识点：箭头函数和普通函数的this指向问题
浅谈Vue中render中的h箭头函数
01-19
vue2.0新增了render方法，官方案例写的是： render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app) } 用es6的写法就是：(只有一个个return语句，...
vue中的箭头函数的this
wanghuohuo1998的博客
07-05 628
在vue中箭头函数没有自己的this，所以，当箭头函数中有this的时候他会往外找，从而确定它的this的值 vm.$watch('firstName',{ immediate:true, //若immediate为true则handler在初始化时，就会调用一次，以后就看firstName的改变了 handler(newValue,oldValue){ setTimeout(()=>{ //此处定时器的回调一定要写箭头函数 t
vue的学习笔记（12）之箭头函数
肿肿的博客
02-02 6192
箭头函数1、箭头函数的使用2、箭头函数参数和返回值3、箭头函数中的this 1、箭头函数的使用 定义函数有三种方式： <script> //箭头函数：也是一种定义函数的方式 //1.定义函数的方式：function const aaa=function () { } //2.对象字面量中定义函数 const obj={ bbb: function () { }, ccc() { } } //3.es6中的箭头函数 // const ddd=(参
js---遍历的4种方法 & 箭头函数=＞
时光里的博客
09-07 7913
常规遍历方法 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入门学习笔记(九)
༄༊星河༣
01-06 571
computed和watch之间的区别computed和watch之间的区别 computed和watch之间的区别 computed和watch之间的区别：        1.computed能完成的功能，watch都可以完成。        2.watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。 两个重要的小原则：  
vue：计算属性和监视属性的区别和内在联系
helloWorldJavaQi的博客
12-01 210
前端初级学习总结 1.<button onclick="click()">点我</button> 其中click命名的自定义函数不会生效，而且不会报错，click是js中的原有函数，不可以用作自定义函数名 2.计算属性computed：两个因素：基于计算依赖的的data中的数据属性；？；。简化格式必须只有读取数据而没有写数据的情况才可以，相对methods来说性能更好，有缓存机制，第一次读取数据的时候，会通过getter从data中取数据，然后会自动加载进缓存，第二次读取，只要数据没
关于vue的注意事项
qq_39933787的博客
08-01 992
想让vue工作，就必须创建一个vue实例，且要传入一个配置对象 root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法 root容器里的代码被称为【vue模板】 一个重要的原则：由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了【箭头函数没有自己的this，要往外找】 vue里MVVM分工 ...
Vue的methods里面不可以使用箭头函数
Stone
04-28 3302
Vue的methods里面不可以使用箭头函数 vue中的methods不可以使用箭头函数，因为this指向的不是vue实例，使用箭头函数打印this，发现是undefined methods: { test: () => { console.log(this); // undefined } } 箭头函数没有this，this其实是外部的this，即箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。所以箭头函数的this是固定的，不能改变或者重
VUE的methods里面的函数不能使用箭头函数
adsadadaddadasda的博客
07-16 5393
VUE的methods对象里面如果函数使用箭头函数会导致this指向的不是vue实例$vm,而是一个xxxx.a的一个类，尽量不要再VUE所定义的字段里面使用箭头函数
在vue2.x methods中使用ES6箭头函数踩的坑，所有方法里的this指向“a”中
经验之谈，不做搬运工
06-17 355
> 背景：vue2.5.2项目 > 定位： methods方法集 > 问题：在methods中使用了ES6箭头函数，this指向多了一层“a” ### 技术定义 > ES6箭头函数内部没有this指向，箭头函数内部this指向只能通过查找作用域链来决定，一旦使用箭头函数当前就不存在作用域链。 ### 问题分析 > this指向多了一层“a”，这里的a，并不是vue对象
vue中的箭头函数 =>
热门推荐
qq_39990827的博客
05-31 4万+
基本语法： ES6允许使用“箭头”（=>）定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 //无形参 var f = () => 5; // 等同于 var f = function () { return 5 }; //多...
vue 外部函数与methods中函数区别_JavaScript 中普通函数与箭头函数的区别
06-01
在Vue中，外部函数与methods中函数的区别在于作用域。外部函数的作用域是全局作用域，而methods中的函数作用域是Vue实例的作用域，因此methods中的函数可以访问Vue实例的data、computed、watch等属性。 JavaScript中普通函数与箭头函数的区别在于this的指向。普通函数中的this默认指向函数的调用者，而箭头函数中的this指向箭头函数定义时所在的作用域。因此，箭头函数通常用于解决this指向问题，而普通函数则可以根据具体情况使用不同的调用方式来改变this的指向。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值