首先,让我们先新建个vue(2.5.2)的实例。代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<button @click="fetchData">
fetchData
</button>
{{product}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
product:"none"
},
methods:{
fetchData(){
this.product = "some products!"
}
}
})
</script>
</body>
</html>
复制代码
然后,这是生成的vue的实例如下图。
接下来 让我们分析一下这个 _data
首先,找到它首次出现的地方。 让我们来到代码的第4465行,如下图
接着,跟进去,如下图。 接着,跟进去 ps:这是初始化咱们的data的方法。 没错,在代码的 3296行,就是我们的 _data首次出现并赋值的地方。 让我们看看vue究竟对_data做了什么?做了什么py交易?嗯? 上图是vue对data属性做一次检测,比如命名是否合法啊,是否跟methods和props等名字冲突啊,之类的。让我们来到proxy(vm,"_data",key)
这里。就是对
_data 做一些‘py’操作了。我们到那一行,然后跟进去,看看里面有什么。
看到这个
sharedPropertyDefinition 和
Object.defineProperty 没? 没错,他就是
Object.defineProperty的handler!总的来讲:
就是当你要从vue实例上取属性时,实际上就是从_data上取属性!!! 哈哈,就是这么简单,接下来,我会继续研究
observe,并分享成果给大家。