Vue里this指向

Vue里this指向一 普通函数中的 this nbsp 这是 vue 文档里的原话 All nbsp lifecycle nbsp hooks nbsp are nbsp called nbsp with nbsp their nbsp this nbsp context nbsp pointing nbsp to nbsp the nbsp Vue nbsp instance nbsp invoking nbsp it 意思是 在 Vue 所有的生命周期钩子方法 如 created mounted nbsp updated 以及 destroyed 里使用 this this 指向调用它的 Vu

一、普通函数中的this 

这是vue文档里的原话:

意思是:在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,this指向调用它的Vue实例,即(new Vue)。 

<div id="app">     <button class="btn btn-primary" v-on:click="on()">点击添加并查看this</button>     <ul class="list-group" v-for="item in list">         <li class="list-group-item">{ 
  {item}}</li>     </ul> </div> <script>     new Vue({         el: "#app",         data: {             list: ["banner", "orange", "apple"]         },         methods: {             on: function() {             alert(this.list);             this.list.push("Potato")         } }) </script>

实例:这里的this指向的是new Vue这个对象。new Vue也可以写成var C=new Vue({}).所以这里的this指向的是C。


 

二、箭头函数中的this

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。

Vue里this指向

这里箭头函数指向window。


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/231173.html原文链接:https://javaforall.net

(0)
上一篇 2026年1月23日 下午8:01
下一篇 2026年1月23日 下午8:22


相关推荐

  • wireshark抓包分析——TCP/IP协议[通俗易懂]

    wireshark抓包分析——TCP/IP协议[通俗易懂]本文来自网易云社区当我们需要跟踪网络有关的信息时,经常会说“抓包”。这里抓包究竟是什么?抓到的包又能分析出什么?在本文中以TCP/IP协议为例,简单介绍TCP/IP协议以及如何通过wireshark抓包分析。Wireshark是最著名的网络通讯抓包分析工具。功能十分强大,可以截取各种网络封包,显示网络封包的详细信息。Wireshark下载安装,略。注意,若在Windows系统安装Wireshar…

    2025年9月30日
    6
  • Mysql 多表联合查询效率分析及优化

    Mysql 多表联合查询效率分析及优化1.多表连接类型1.笛卡尔积(交叉连接)在MySQL中可以为CROSSJOIN或者省略CROSS即JOIN,或者使用’,’如:SELECT*FROMtable1CROSSJOINtable2SELECT*FROMtable1JOINtable2SELECT*FROMtable1,table2由于其返回的结果为被连接的两…

    2022年4月28日
    36
  • 小白也能做!用Nano Banana秒出专属手办图,免费教程附提示词模板

    小白也能做!用Nano Banana秒出专属手办图,免费教程附提示词模板

    2026年3月13日
    3
  • 直方图和条形图区别

    直方图和条形图区别https blog csdn net xjl article details pythonMatplo 系列教程 三 绘制直方图和条形图

    2026年3月20日
    1
  • ubuntu安装完毕后拔掉u盘_4个CPU最大能开多少进程

    ubuntu安装完毕后拔掉u盘_4个CPU最大能开多少进程该方法同样适用于:1.强制卸载无法卸载的USB设备,比如:解决因为在传输数据未完成时直接拔下存储设备导致的后台D进程驻留(无法被kill);2.系统更新固件可能导致(只遇到过一次)的USB存储设备无法被识别(重启系统同样可以解决);3.不重启系统,只重启xhci控制器。

    2025年11月23日
    3
  • APP——List「建议收藏」

    [‘王者荣耀’,’QQ’,’作业帮-学习辅导’,’绝地求生:刺激战场’,’爱奇艺’,’快手’,’腾讯视频’,’微信’,’抖音短视频’,’全民K歌’,’手机淘宝’,’迷你世界’,’QQ音乐’,’优酷’,’WiFi万能钥匙’,’酷狗音乐’,’荒野行动’,’互动作业’,’穿越火线:荒岛特训-60V60′,’QQ飞车手游’,’拼多多’,’绝地求生全军出击’,’…

    2022年4月9日
    38

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号