当前位置: 首页 > news >正文

Vue中methods实现原理

目录

前言

回调函数中的this指向问题

vue实例访问methods

methods实现原理


前言

vue实例对象为什么可以访问methods中的函数方法?methods的实现原理是什么?

回调函数中的this指向问题

在解答前言中的问题前,需要了解一下回调函数中的this指向问题

在正常函数中

 <div class="app"><h1>{{msg}}</h1><button @click="app">+1</button></div><script>const vm = new Vue({el:'.app',data:{msg:'this指向问题',count:0},methods:{app(){console.log(this);console.log(vm === this);}}})</script>

由上述代码验证得出,在普通函数中,this是指向vm的,也就是vue实例对象

在箭头函数中

 app2:()=>{console.log(this);console.log(vm === this);}

由上得知,在箭头函数中,this不是指向vue实例对象的,而是指向window。其实在箭头函数是没有this的箭头函数的this是从父级作用域中继承过来的,在上述代码中,window作用域就是父级作用域

vue实例访问methods

   <div class="app"></div><script>const vm = new Vue({el:'.app',data:{msg:'methods的实现原理'},methods:{app(){alert('hh')}}})</script>

由上述代码及结果得出,Vue实例对象访问methods中的函数是没有做数据代理的,数据代理会调用getter方法,也就是上述截图中msg后面的...,当我们点击时,就会调用getter方法查看数据,所有数据代理只会代理数据,不会代理函数方法

methods实现原理

我们可以自己写一个仅针对于methods配置项的js文件(methods实现原理)

// 定义一个类
class Vue {// 定义构造函数// options是一个纯粹的js对象:{}constructor(options){// 获取所有的方法名Object.keys(options.methods).forEach((methodName,index)=>{// 给当前的Vue实例一个扩展方法this[methodName] = options.methods[methodName]})}
}

原理:

通过Object.keys()获取vue实例中所有的方法名,然后通过forEach()遍历,在上述代码中,this就是指向vm,也就是vue实例对象,给实例对象一个拓展方法,而是什么拓展方法与methods中的方法同名,从而达到了通过vue实例可以访问到methods中的方法

将该文件引入到代码中

 <div class="app"></div><script>const vm = new Vue({el:'.app',data:{msg:'methods的实现原理'},methods:{app(){alert('hh')},app2(){alert('xx')}}})</script>

若上即是methods实现原理

相关文章:

Vue中methods实现原理

目录 前言 回调函数中的this指向问题 vue实例访问methods methods实现原理 前言 vue实例对象为什么可以访问methods中的函数方法&#xff1f;methods的实现原理是什么&#xff1f; 回调函数中的this指向问题 在解答前言中的问题前&#xff0c;需要了解一下回调函数中的th…...

维基百科是非营利性机构 词条内容具有中立性、准确性、可靠性

维基百科对一些企业很有神秘性&#xff0c;自行操作很多次也没有成功建立维基百科&#xff0c;这一定是没有按照维基百科的规则和流程去操作。小马识途营销顾问提醒企业&#xff0c;维基百科是一种基于协作的在线百科全书&#xff0c;由维基媒体基金会运营。维基百科的创建流程…...

C/C++轻量级并发TCP服务器框架Zinx-框架开发002: 定义通道抽象类

文章目录 2 类图设计3 时序图数据输入处理&#xff1a;输出数据处理总流程 4 主要实现的功能4.1 kernel类&#xff1a;基于epoll调度所有通道4.2 通道抽象类&#xff1a;4.3 标准输入通道子类4.4 标准输出通道子类4.5 kernel和通道类的调用 5 代码设计5.1 框架头文件5.2 框架实…...

bin、hex、ELF文件格式上的区别

bin, hex, 和 ELF 是三种不同的文件格式&#xff0c;主要用于表示和存储二进制数据和程序代码。它们各自有其用途、特点和格式&#xff1a; bin (Binary) 文件: 通常表示纯二进制格式的文件。它不包含任何元数据或文件结构&#xff0c;只是简单地按照字节顺序存储数据。这种文件…...

《QT从基础到进阶·二十六》绘制多个图形项(QGraphicsRectItem,QGraphicsLineItem,QGraphicsPolygonItem)

这个demo用QT实现了对多个图形项的绘制&#xff0c;包括矩形的绘制&#xff0c;直线的绘制和多边形的绘制&#xff0c;是之前一章中绘制矩形的增强版&#xff0c;之前一章节关于矩形的绘制可以参考&#xff1a;《QT从基础到进阶十五》用鼠标绘制矩形&#xff08;QGraphicsView、…...

【分布式】CAP理论详解

一、CAP理论概述 在分布式系统中&#xff0c;CAP是指一组原则&#xff0c;它们描述了在网络分区&#xff08;Partition&#xff09;时&#xff0c;分布式系统能够提供的保证。CAP代表Consistency&#xff08;一致性&#xff09;、Availability&#xff08;可用性&#xff09;和…...

AI歌姬,C位出道,基于PaddleHub/Diffsinger实现音频歌声合成操作(Python3.10)

懂乐理的音乐专业人士可以通过写乐谱并通过乐器演奏来展示他们的音乐创意和构思&#xff0c;但不识谱的素人如果也想跨界玩儿音乐&#xff0c;那么门槛儿就有点高了。但随着人工智能技术的快速迭代&#xff0c;现在任何一个人都可以成为“创作型歌手”&#xff0c;即自主创作并…...

ZooKeeper基本知识

1.什么是ZooKeeper ZooKeeper是一个开源的分布式协调服务&#xff0c;它提供了一个高性能、高可靠的分布式协调基础&#xff0c;用于构建分布式系统。 具体来说&#xff0c;ZooKeeper通常用于以下几个方面&#xff1a; 配置管理&#xff1a;分布式系统通常需要集中管理配置信…...

leetcode:138. 随机链表的复制

一、题目&#xff1a; 138. 随机链表的复制 - 力扣&#xff08;LeetCode&#xff09; 函数原型&#xff1a; struct Node* copyRandomList(struct Node* head) 二、思路 本题是给出一个单链表&#xff0c;单链表的每个结点还额外有一个随机指针&#xff0c;随机指向其他结点&am…...

SpringBoot 全局异常之参数校验(1)

文章目录 前言背景依赖校验类型@NotBlank、@NotNull和@NotEmpty的区别@Valid和@Validated区别异常处理方式一 @RequestParam全局异常处理(ConstraintViolationException)请求示例方式二 @RequestBody(推荐)全局异常处理(MethodArgumentNotValidException)请求示例方式三(…...

QT windows与linux之间sokcet通信中文乱码问题解决方法

QT windows与linux之间sokcet通信中文乱码问题解决方法 linux发送与接收都转码utf-8: tcpClient ->write( send_msg.toUtf8());//解决乱码&#xff0c;发送转码 接收&#xff1a; QByteArray buffer tcpClient->readAll(); if(!buffer.isEmpty()) { // ui->plain…...

Java实现DXF文件转换成PDF

代码实现 public static void dxfToPdf(){// 加载DXF文件String inputFile "input.dxf";CadImage cadImage (CadImage) Image.load(inputFile);// 设置PDF输出选项PdfOptions pdfOptions new PdfOptions();pdfOptions.setPageWidth(200);pdfOptions.setPageHeigh…...

揭秘Vue中的nextTick:异步更新队列背后的技术原理大揭秘!

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、N…...

PHP使用文件缓存实现html静态化

<?php // 动态生成的内容 $content "<html><body><h1>time:".date("Y-m-d H:i:s")."</h1></body></html>"; // 静态文件保存路径和文件名 $staticFilePath "file.html"; if(file_exists($s…...

A Gentle Introduction to Graph Neural Networks

A Gentle Introduction to Graph Neural Networks----《图神经网络入门》 图神经网络信息传递积累 图在我们身边随处可见&#xff0c;现实世界中的物体通常是根据它们与其他事物的联系来定义的。一组物体以及它们之间的联系可以很自然地用图来表示。十多年来&#xff0c;研究人…...

详解[ZJCTF 2019]NiZhuanSiWei 1(PHP两种伪协议、PHP反序列化漏洞、PHP强比较)还有那道题有这么经典?

题目环境&#xff1a; <?php $text $_GET["text"]; $file $_GET["file"]; $password $_GET["password"]; if(isset($text)&&(file_get_contents($text,r)"welcome to the zjctf")){echo "<br><h1>&…...

bazel build使用【未完】

1. install install的作用&#xff1a;将生成的目标、文件复制到指定的安装目录中&#xff0c;可以是可执行文件、库文件、 配置文件等 若有一个c可执行文件&#xff0c;可以使用install将其安装到标准的可执行路径中&#xff0c;以便于直接运行&#xff0c;而无需指定完整的文…...

11-13 /11-14代理模式 AOP

调用者 代理对象 目标对象 代理对象除了可以完成核心任务&#xff0c;还可以增强其他任务,无感的增强 代理模式目的: 不改变目标对象的目标方法的前提,去增强目标方法 分为:静态代理,动态代理 静态代理 有对象->前提需要有一个类&#xff0c;那么我们可以事先写好一个类&a…...

Ubuntu 创建并发布 Django 项目

Ubuntu 创建并发布 Django 项目 升级操作系统和软件 sudo apt updatesudo apt -y dist-upgrade 安装 python3-pip sudo apt -y install python3-pip安装 django pip install -i https://pypi.tuna.tsinghua.edu.cn/simple djangosudo apt -y install python3-django创建 dj…...

SQL Server进阶知识

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...

TCP/IP 网络编程 | 服务端 客户端的封装

设计模式 文章目录 设计模式一、socket.h 接口&#xff08;interface&#xff09;二、socket.cpp 实现&#xff08;implementation&#xff09;三、server.cpp 使用封装&#xff08;main 函数&#xff09;四、client.cpp 使用封装&#xff08;main 函数&#xff09;五、退出方法…...

echarts使用graphic强行给图增加一个边框(边框根据自己的图形大小设置)- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图&#xff0c;如果边框加在dom上面&#xff0c;pdf-lib导出svg的时候并不会导出边框&#xff0c;所以只能在echarts图上面加边框 grid的边框是在图里…...

Async-profiler 内存采样机制解析:从原理到实现

引言 在 Java 性能调优的工具箱中&#xff0c;async-profiler 是一款备受青睐的低开销采样分析器。它不仅能分析 CPU 热点&#xff0c;还能精确追踪内存分配情况。本文将深入探讨 async-profiler 实现内存采样的多种机制&#xff0c;结合代码示例解析其工作原理。 为什么需要内…...