当前位置: 首页 > 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;…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...

数据分析六部曲?

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...

【设计模式】1.简单工厂、工厂、抽象工厂模式

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 以下是 简单工厂模式、工厂方法模式 和 抽象工厂模式 的 Python 实现与对比&#xff0c;结合代码示例和实际应用场景说明&#xff1a; 1. 简单工厂模式&a…...

Vue3项目实现WPS文件预览和内容回填功能

技术方案背景&#xff1a;根据项目需要&#xff0c;要实现在线查看、在线编辑文档&#xff0c;并且进行内容的快速回填&#xff0c;根据这一项目背景&#xff0c;最终采用WPS的API来实现&#xff0c;接下来我们一起来实现项目功能。 1.首先需要先准备好测试使用的文档&#xf…...