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

methods的实现原理

news 来源：原创 2025/6/1 12:02:57

一、直观的感受methods的使用

首先直观的感受methods方法的使用，同样以计数器为例，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><title>methods的实现原理</title>
</head>
<body><div id="app"><h1>{{msg}}</h1><h1>计数器：{{count}}</h1><button @click="addOne">加一</button></div><script>new Vue({el : "#app",data:{msg: "methods的实现原理",count:0},methods:{addOne(){this.count++}}})</script></body>
</html>

不难看出来，其methods中的方法是用来处理事件和执行相应逻辑的代码。对于上述代码来说，其addOne()方法就是来处理的相应逻辑——实现不断加1的功能。在页面上点击按钮触addOne()方法，它就会执行 this.count++，让 count 增加。

二、🧠 `methods` 的实现原理是什么？

Vue 实例初始化时到底发生了什么？—— 挂载方法

当我写下如下代码的时候

new Vue({el : "#app",data:{msg: "回调函数中的this",count:0},methods:{addOne(){this.count++}}
})

Vue 会进行一系列的初始化操作。其中的一部分是初始化 methods —— Vue 会把我们写在methods 中的函数挂载到 Vue 实例（this）上。

📦 举个比喻：你写了一堆工具（函数）放在工具箱（methods），Vue 会把它们一一拿出来，贴在你的“Vue 小人”身上（Vue 实例），这样你就能用 this.someMethod() 来调用。

那和通过this之间访问data有什么区别呢？是否也是通过数据代理机制来实现的呢？

三、和 `data` 的区别？

this.count访问count的时候是通过数据代理机制的getter方法来实现的，而通过Vue实例来访问methods中定义的方法使用的却不是数据代理机制，是通过 Vue 在初始化阶段，手动把 methods 中的函数“挂载”到 Vue 实例（vm）上实现的。

绑定的过程大致如下所示。

function initMethods(vm, methods) {for (let key in methods) {const method = methods[key]// 只接受函数，其他类型会报错if (typeof method !== 'function') {console.warn(`${key} is not a function`)continue}// 把方法“复制”到 Vue 实例上，并绑定 thisvm[key] = method.bind(vm)}
}