implementación sencilla de datos bidireccionales vinculante

html:

1  <! DOCTYPE html > 
2  < html lang = "en" > 
3  < cabeza > 
4      < meta charset = "UTF-8" > 
5      < meta nombre = "ventana" contenido = "width = dispositivo de ancho, inicial escala = 1,0" > 
6      < título > Documento </ título > 
7  </ cabeza > 
8  < cuerpo > 
9      <
10  
11      </ div > 
12      < guión src = "./ vue.js" > </ escritura > 
13      < secuencia de comandos > 
14          var vm =  nuevo Vue ();
15          setTimeout (() => {
 16              vm. $ Data.a =  123 
17          }, 4000 )
 18      </ escritura > 
19  </ cuerpo > 
20  </ html >

JS:

. 1  función Vue () {
 2      el este $ datos = {A :. 1. },
 3.      El este .el = document.getElementById ( 'App' );
 . 4      el este .virtualDom = '' ;
 . 5      el este .Observar ( el este . $ Data) ;
 . 6      el este .render ();
 . 7  }
 . 8  // datos secuestro, datos del monitor 
. 9 Vue.prototype.observe = función (obj) {
 10      var _self = el este ;
 . 11      var la _value;
 12 se      para ( var Key enobj) {
 13          _value = obj [tecla]
 14          si ( typeof _value == 'objeto' ) {
 15              _self.observe (_value)
 16          } más {
 17              Object.defineProperty (obj, llave, {
 18                  get: función () {
 19                      // 依赖收集
20                      de retorno _value
 21                  },
 22                  set: función (newValue) {
 23                      // 触发视图更新
24                      _value =newValue
 25                      _self.render ();
 26 es                  }
 27              })
 28          }
 29      }
 30  }
 31 es Vue.prototype.render = función () {
 32      // vista de plantilla de lectura, AST generado árbol sintáctico 
33 es      el este .virtualDom = 'el I AM '+ el este . $ data.a;
 34 es      // volver a hacer, actualiza la vista 
35      de la presente .el.innerHTML = el presente .virtualDom
 36 }