vue的双向数据绑定
这篇文章我会仿照vue写一个双向绑定的实例,主要实v-model , v-bind , v-click 1、原理 Vue的双向数据绑定的原理大家可能或多或少了解一点,主要是通过 Object 对象的 defineProperty 属性,重写data的 set 和 get 函数来实现的。 2、页面结构 包含了 一个input,使用v-model指令 一个button,使用v-click指令 一个h3,使用v-bind指令。 我们最后会通过类似于vue的方式来使用我们的双向数据绑定,结合我们的数据结构添加注释: 首先我们需要定义一个myVue构造函数: 为了初始化这个构造函数,给它添加一个 _init 属性: 接下来实现 _obverse 函数,对data进行处理,重写data的set和get函数: 并改造_init函数 接下来我们写一个指令类Watcher,用来绑定更新函数,实现对DOM元素的更新。 更新 _init 函数以及 \_obverse 函数: 那么如何将view与model进行绑定呢?接下来我们定义一个 _compile 函数,用来解析我们的指令(v-bind,v-model,v-clickde)等,并在这个过程中对view与model进行绑定。 至此,我们已经实现了一个简单vue的双向绑定功能,包括v-bind, v-model, v