标签：VUE val 框架 propertyName vm key 源代码 data Options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
</div>
<script>
const vm = new Vue({
// Vue源码中关键性代码
// var data = vm.$options.data;
// 此处是获取data,程序执行到此处仍然没有给vm加上_data属性
// data = vm.data = isFunction(data) ? getData(data,vm) : data
// 程序执行完这个代码后,VM上多了一个_data的属性
// 通过以上源码可知,data不一定是一个{}json对象,也可以是一个函数
// 此处的代码含义是,如果data是函数,则调用getData(data,vm)来获取data
// 如果不是函数,则直接将data返回,给data变量赋值给vm._data属性
// 程序执行到这里为什么要给VM拓展一个_data属性
// 重点函数
// function isReserved(str)
// {
// var c = (str + '').charCodeAt(0);
// return c === 0x24 || c === 0x5f;
// }
// 这个函数就是用来判断字符串是否以_或$开始
// true表示是,false表示否
// 重点函数
// 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);
// }
el : "#app",
data : {
msg : "Hello",
name : "Jack",
age : 30
}
});
</script>
</body>
</html>
class Vue
{
//定义构造函数
constructor(Options)//一个简单的纯粹的JS对象
{
//options对象类有一个data配置项
Object.keys(Options.data).forEach((propertyName,index) => {
console.log(propertyName,index);
let firstCode = propertyName.charAt(0);
if(firstCode != "$" && firstCode != "_")
{
Object.defineProperty(this,propertyName,{
get()
{
return Options.data[propertyName];
},
set(val)
{
Options.data[propertyName] = val;
}
});
}
});
}
}
标签：VUE,
val,
框架,
propertyName,
vm,
key,
源代码,
data,
Options
From： https://blog.51cto.com/u_16322355/8945192