<!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> </head> <body> <div id="app"> </div> <script> function Vue(option){ var _this = this var template = option.template //here this.render = function(dom){ document.querySelector(option.el).innerHTML = dom } var data = option.data for(key in data) { var initValue = data[key] Object.defineProperty(this, key, { set: function (val) { var compileValue = template.replace("{{" + key + "}}", val) _this.render(compileValue) // change notify }, configurable: true }) Object.defineProperty(data, key, { set: function (val) { var compileValue = template.replace("{{" + key + "}}", val) _this.render(compileValue) // change notify }, configurable: true }) this[key] = initValue } } var data = { message:'xxxx' } var vm = new Vue({ el:'#app', data:data, template:'<h1>{{message}}<h1>' }) data.message = 1 vm.message = 2 </script> </body> </html>