Vue 的双向数据绑定原理解析

在目前的前端面试中，vue的双向数据绑定已经成为了一个非常容易考到的点，即使不能当场写出来，至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例，名字就叫myVue吧。结合注释，希望能让大家有所收获。

1、原理
Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过 Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充。

添加网上的一张图

2、实现
页面结构很简单，如下：

<div id="app"><form><input type="text" v-model="number"><button type="button" v-click="increment">增加</button></form><h3 v-bind="number"></h3>
</div>

包含：

一个input，使用v-model指令

一个button，使用v-click指令

一个h3，使用v-bind指令。

我们最后会通过类似于vue的方式来使用我们的双向数据绑定，结合我们的数据结构添加注释：

var app =
new myVue({el: '#app',data:{number:0},methods:{increment:function(){this.number++;},}
})

首先我们需要定义一个myVue构造函数：

function myVue(options){}

为了初始化这个构造函数，给它添加一个 _init 属性：

function myVue(options){this._init(options);
}
myVue.prototype._init =function(options){this.$options = options;// options 为上面使用时传入的结构体，包括el,data,methodsthis.$el = document.querySelector(options.el); // el是 #app, this.$el是id为app的Element元素this.$data = options.data;// this.$data = {number: 0}this.$methods = options.methods; // this.$methods = {increment: function(){}}
}

接下来实现 _obverse 函数，对data进行处理，重写data的set和get函数：

并改造_init函数

参考网址：https://mp.weixin.qq.com/s/MGsEGejaADVHGlZFYQgCnQ

Vue 的双向数据绑定原理解析相关推荐

【Vue的双向数据绑定原理】
Vue的双向数据绑定原理先说面试答案: 1. 什么是setter.getter 2. 什么是Object.defineProperty() ? 先简单的实现一个js的双向数据绑定来熟悉一下`Obje ...
Vue的双向数据绑定原理（极简版）
先说面试答案: 答: vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者 ...
【Vue】双向数据绑定原理 vue2.0 与 vue3.0
目录一.什么是双向数据绑定? 二.双向数据绑定原理 vue2.0 三.Vue 3.0使用ES6的新特性porxy 四.思考一.什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数 ...
剖析Vue实现双向数据绑定原理
几种实现双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input.textare等)添加了change(inpu ...
Vue的双向数据绑定原理是什么
在vue2.x中,双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之改变.核心:关于Vue双向数据绑定,其核心是Ob ...
angularjs双向数据绑定原理解析
angularjs的双向数据绑定脏值(发生了变化的值)检查不等于定时轮询,而是特定事件触发才会执行只有指定事件触发后才会进入脏值轮询. - DOM事件,譬如用户输入文本,点击按钮等.(ng-cli ...
VUE的双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来 ...
Vue的双向数据绑定原理是什么？（前端面试题）
一.vue2.x 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听 ...
vue双向数据绑定原理分析--Mr.Ember
vue双向数据绑定原理分析摘要 vue常用,但原理常常不理解,下面我们来具体分析下vue的双向数据绑定原理. (1)创建一个vue对象,实现一个数据监听器observer,对所有数据对象属性进行监听 ...

Vue 的双向数据绑定原理解析

Vue 的双向数据绑定原理解析相关推荐

最新文章

热门文章