>[warning]Vue訪問data修改 **** 思路: 訪問屬性時, 默認去data里訪問對應的key, 設置個data代理即可 代碼如下: ~~~ <script> function Vue(options, exp){ this.data = options.data(); let el = document.querySelector(options['el']); // 2. 給獲取到的data下的屬性, 每個key都調用代理proxyKeys, 綁定set/get方法, 使用get方法直接從data屬性下去取 let self = this; Object.keys(this.data).forEach(function(key){ self.proxyKeys(key); }); observe(this.data); el.innerHTML = this.data[exp]; new Watcher(this, function(value){ el.innerHTML = value; }, exp); return this; } // 1. 給Vue擴展proxyKeys, key值代理 Vue.prototype = { proxyKeys: function(key){ let self = this; Object.defineProperty(this, key, { get: function(){ return self.data[key]; }, set: function(newVal){ self.data[key] = newVal } }) } } </script> <div id="app">{{userName}}</div> <script> let app = new Vue({ el: "#app", data () { return { "userName": "hello VueJS" } } }, "userName"); setTimeout(()=>{ // 3. 使用方式修改一下 app.userName = "漂亮"; }, 2000); </script> ~~~ [當前頁源代碼](https://github.com/lidongxuwork126com/ldx_vue/tree/master/%E4%BB%BFVue%E6%BA%90%E7%A0%81) 我們發現, 沒有解析標簽中的{{}}啊, ok, 看下個文章解析{{}}模板