一步一步分析vue之_data属性
生活随笔
收集整理的這篇文章主要介紹了
一步一步分析vue之_data属性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先，讓我們先新建個vue(2.5.2)的實例。代碼如下。
<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，并分享成果給大家。 新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！總結
以上是生活随笔為你收集整理的一步一步分析vue之_data属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： saltstack grains
- 下一篇： html5倒计时秒杀怎么做,vue 设