为什么Vue生命周期函数不能使用剪头函数书写

最新推荐文章于 2022-11-08 08:35:25 发布
最新推荐文章于 2022-11-08 08:35:25 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40202869/article/details/106054286
版权

这里我们以生命周期beforeCreate为例：

通过看源码查看，找到调用位置，使用了callHook
在这里插入图片描述
我们接下来看看这个方法，使用了call
在这里插入图片描述
所以，如果生命周期使用了箭头函数，那么this就会指向window而不是当前组件实例

再举个栗子：
在这里插入图片描述

code-ZYG
关注
专栏目录
Vue生命周期
laoli360的博客
09-28 207
人是有生命的,也是有周期这一个说法的婴儿 =>少年=>青年=>中年=>老年=>黄土 Vue也是有周期这一个说法的 它分为 创建=>挂载=>更新=>销毁 Vue - 钩子函数 Vue 框架内置函数，随着组件的生命周期阶段，自动执行 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 阶段 方法名 方法名 初始化 beforeCreate created 挂载 ..
vue路由守卫函数
m0_46670906的博客
08-12 895
一、全局路由守卫函数 全局前置守卫 router.beforeEach((to,from,next)=>{ console.log(to)//到哪去 console.log(from)//从哪来 next()//通过 }) next 函数参数说明 next('/XXX') //跳转到指定地址 next(false) //中断当前导航 全局后置守卫 router.afterEach((to,from)=>{ console.log(to)//到哪去 console.
【Vue】生命周期函数的新写法
看花容易绣花难
11-08 1288
生命周期函数的新写法
Vue生命周期（必看哦！！！）
yu_yuxiaoer的博客
06-24 6363
Vue生命周期理解 什么是生命周期？？？ Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。简单来说就是Vue实例从创建到销毁的过程，就是生命周期。 Vue生命周期图 生命周期的三个阶段 每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化阶段、运行中阶段、销毁阶段。 初始化阶段钩子函数（beforeCreate,created,beforeMount,mounted） 运行中阶段钩子函数
vue生命周期钩子函数为什么不能使用箭头函数
xiaoxiaofly的博客
02-21 2385
来自vue官方文档的解释： 所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。 箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文...
vue中的方法 methods 定义时不要使用箭头函数
hjh15827475896的博客
03-24 1万+
今天在vue中引入vuex的时候出现了错误，解决了一个多少时，总结如下： vuex 的使用： vuex就是一个状态管里中心 也好比一个仓库 细分可分为五个部分，这是我不考虑 module 分别是 state geters setter mutations actions state 就是要存入的数据 getters setters 就不用多说的，是获取和设置数据用的 mutation...
女朋友生日，不要礼物，非要我给她讲解VUE的生命周期钩子函数，最后直夸我讲的详细又透彻！
01-08
注：在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期函数的执行顺序与书写的顺序无关 目录*图示1.beforeCreate2*.created3.beforeMount4*.mounted5.beforeUpdate6*.updated7.beforeDestroy8*....
在 Vue 中使用 JSX 及使用它的原因浅析
10-15
Vue 支持 JSX，但需要注意的是，使用 JSX 可能会增加学习曲线，因为它需要对虚拟 DOM 和 `render` 函数有深入的理解。 总结来说，Vue 中使用 JSX 可以提升代码的可读性和可维护性，特别是在处理动态渲染和复杂组件...
vue3中如何书写生命周期
最新发布
09-20
在 3中，可以使用组合式API或选项式API来书写生命周期。 1. 组合式API的生命周期钩子函数可通过`onBeforeMount`、`onMounted`、`onBeforeUpdate`、`onUpdated`和`onUnmounted`等函数来书写。例如，在组件中使用`...
VUE学习（三） 箭头函数（=>）
n009ww的博客
07-29 1万+
习惯了写传统js的我，看了箭头函数的第一眼，就是....这啥东西？经过大神指点后，总结出的一条道理就是： 1.当在vue中使用箭头函数，可以在函数中使用this 来引用全局的vue对象，若在传统函数中，有时会引不到。 2.并不是所有的函数都适合改为箭头函数。当函数中使用本身的 this 时，我们再用箭头函数将会造成冲突，此时应在函数外面定义一个变量 let $this = this 。在...
聊一聊 Vue 中 watch 的回调函数为什么不能是箭头函数？
happyCoding1024的博客
12-04 1599
聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数 本文重点知识点速览： Vue 中的 watch 对象中的回调函数不能是箭头函数。 箭头函数中的 this 指向的是函数定义时所在的对象，普通函数中的 this 指向的是函数运行时所在的对象。 函数的 this 指向问题。 一起学习吧… 说起箭头函数大家一定不陌生，箭头函数是 ES6 中对函数的扩展，使用起来方便快捷，可能...
vue资料整理: 在 Vue 实例中编写生命周期 hook 或其他 option/properties 时，为什么不使用箭头函数？
weixin_58487208的博客
11-09 294
箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 程序中使用箭头函数时，this 关键字并不会绑定到 Vue 实例，因此会引发错误。所以在编写如钩子函数这类时强烈建议改用标准函数声明。 ...
vue
a378113472的博客
01-08 289
箭头函数的this 指向全局 vue里是json this 指向window
小白学习Vue(9)--箭头函数 | this指向 | 指令缩写
假人一个的博客
11-15 463
9.1 箭头函数： 9.1.1. 无参多行形式： 9.1.2. 无参单行简写形式： 9.1.3. 有参多行形式： 9.1.4. 有参单行简写形式：9.2 this指向：9.3 常用指令指向： 9.1 箭头函数： 通过function关键字我们可以定义一个函数，此外我们也可以通过箭头=>来定义；形式：（参数）=> {//函数实现};  9.1.1. 无参多行形式： <script> const a = () => { console.log("无参多.
js---遍历的4种方法 & 箭头函数=＞
时光里的博客
09-07 8012
常规遍历方法 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.js_36_ 箭头函数的使用和 this 指向
魏宇轩
04-27 1042
本系列博客汇总在这里：Vue.js 汇总 箭头函数的使用和 this 指向一、箭头函数二、this 指向 源码工程文件为： 一、箭头函数 箭头函数: 也是一种定义函数的方式。 二、this 指向 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
Vue生命周期详解
写代码的渣渣苏
03-24 3万+
Vue生命周期详解
Vue生命周期中mounted和created的区别
热门推荐
xdnloveme的博客
09-19 40万+
一、什么是生命周期？ 用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。 通过一系列实践，现在把所有遇到的问题整理一遍，今天记录一下created和mounted的区别： 二、created和mounted区别？ 官方图解如下: 我们从图中看两个节点： created:在模板渲染成html前调用，即通常初始化
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值