目录准备工作调试源码initMethodsinitData结束语本篇文章介绍的是vue.js如何取到data和methods里的属性？ 准备工作 克隆源码到本地 git clone
本篇文章介绍的是
vue.js如何取到data和methods里的属性？
下载完毕后，用vscode打开，目光移动到package.JSON的scripts属性，我们看到有dev和build，dev会启动一个开发环境的服务，也就是说，我们在源码里做的改动，都会及时生效。build就是打包。和我们平时开发Vue.js项目是一个道理。
我们首先安装一下Vue.js项目的依赖（使用pnpm），然后运行npm run dev。这样的好处就是我们能随时看到代码改动后的效果。
examples目录下创建一个html文件，引入打包后的vue.js<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta Http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1 @click="changeMsg">hello {{msg}}</h1>
</div>
<script src="../dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'world'
},
methods: {
changeMsg() {
this.msg = 'me'
}
}
})
</script>
</body>
</html>serve全局包启动, 在根目录运行一下serve，就能看到页面展示出来了。我们这里使用谷歌浏览器调试，F12找到sources面板如下图所示的位置打上断点，接着刷新页面，就进入了调试模式。
然后，我们就通过step into按钮进入new Vue的函数内部。 接着进入_init的内部，找到initState(vm),也就是当前文件代码的4714行，这个函数的内部就是我们要研究的部分。
进入initState内部，我们看到
if (opts.methods)
initMethods(vm, opts.methods);
if (opts.data) {
initData(vm);
}function initMethods(vm, methods) {
var props = vm.$options.props;
for (var key in methods) {
{
if (typeof methods[key] !== 'function') {
warn$2("Method \"".concat(key, "\" has type \"").concat(typeof methods[key], "\" in the component definition. ") +
"Did you reference the function correctly?", vm);
}
if (props && hasOwn(props, key)) {
warn$2("Method \"".concat(key, "\" has already been defined as a prop."), vm);
}
if (key in vm && isReserved(key)) {
warn$2("Method \"".concat(key, "\" conflicts with an existing Vue instance method. ") +
"Avoid defining component methods that start with _ or $.");
}
}
vm[key] = typeof methods[key] !== 'function' ? noop : bind$1(methods[key], vm);
}
}props、保留键名的名字冲突了vm对应的属性赋值，否则为noop，赋值的函数这里做了一个强绑（使用的bind, this指向vm）。这个bind$来自原生的bind方法var bind$1 = Function.prototype.bind ? nativeBind : polyfillBind;调试完了initMehtods后，就开始initData,我们使用step out按钮就跳出了当前函数，接着进入initData内部。
function initData(vm) {
var data = vm.$options.data;
data = vm._data = isFunction(data) ? getData(data, vm) : data || {};
if (!isPlainObject(data)) {
data = {};
warn$2('data functions should return an object:\n' +
'https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function', vm);
}
// proxy data on instance
var keys = Object.keys(data);
var props = vm.$options.props;
var methods = vm.$options.methods;
var i = keys.length;
while (i--) {
var key = keys[i];
{
if (methods && hasOwn(methods, key)) {
warn$2("Method \"".concat(key, "\" has already been defined as a data property."), vm);
}
}
if (props && hasOwn(props, key)) {
warn$2("The data property \"".concat(key, "\" is already declared as a prop. ") +
"Use prop default value instead.", vm);
}
else if (!isReserved(key)) {
proxy(vm, "_data", key);
}
}
// observe data
var ob = observe(data);
ob && ob.vmCount++;
}逻辑和initMethods类似，和props、methods做了比对，最后通过proxy将data,绑定到vm上
function proxy(target, sourceKey, key) {
sharedPropertyDefinition.get = function proxyGetter() {
return this[sourceKey][key];
};
sharedPropertyDefinition.set = function proxySetter(val) {
this[sourceKey][key] = val;
};
Object.defineProperty(target, key, sharedPropertyDefinition);
}最终我们知道data的值是通过Object.defineProperty，实现绑定的。
我们要研究一个源码，首先要准备源码、serve、和调试工具（谷歌浏览器），然后进入代码的内部，才能看的清楚明白，我们就此知道了Vue.js的this如何取到data和methods的属性。
到此这篇关于Vue.js中this如何取到data和method里的属性的文章就介绍到这了,更多相关Vue.js this取data和method属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: Vue.js中this如何取到data和method里的属性详解
本文链接: https://www.lsjlt.com/news/174358.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0