昨天接到一个电话面试,上来第一个问题就是Vue双向绑定的原理。当时我并不知道如何监听数据层到视图层的变化,于是没答上来,挂电话后,我赶忙查了下资料,主要思路有如下三种。

1.发布者-订阅者模式(backbone.js)

思路:使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素。

2.脏值检查(angular.js)

思路:angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,angular只有在指定的事件触发时进入脏值检测,大致如下:

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )

  • XHR响应事件 ( $http )

  • 浏览器Location变更事件 ( $location )

  • Timer事件( $timeout , $interval )

  • 执行 $digest() 或 $apply()

3.数据劫持(Vue.js)

思路: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。


Object.defineProperty():方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

var obj = {};
    Object.defineProperty(obj, 'hello', {
        get: function() {
            console.log('get val:'+ val);
            return val;
       },
      set: function(newVal) {
            val = newVal;
            console.log('set val:'+ val);
        }
    });
obj.hello='111';//控制台打印set val:111
obj.hello; //控制台打印get val:111

当获取hello属性时,触发get;设置hello值时,触发set;这就是vue实现双向绑定的核心

完整代码如下

<!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 >v-model </ title >
</ head >

< body >
< div id= 'app' >
< h2 >{{title}} </ h2 >
< input id= 'i' v-model= 'text' type= "text" >
< h1 >{{text}} </ h1 >
< button v-on:click= 'clickMe' >click me </ button >
</ div >
< script >
//Dom类 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图
//并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
class Doms {
constructor( node, vm) {
if ( node) {
this. $frag = this. nodeToFragment( node, vm)
return this. $frag
}
}
nodeToFragment( node, vm) { //将dom转换成fragment
var frag = document. createDocumentFragment()
var child;
while ( child = node. firstChild) {
this. compileElement( child, vm)
frag. appendChild( child)
}
return frag
}
compileElement( node, vm) { //获取v-model属性,给dom赋值
var reg = / \{\{ ( . * ) \}\} / //匹配双括号里面的任何字符
if ( node. nodeType === 1) { //element元素
var attr = node. attributes;
for ( var i = 0; i < attr. length; i++) {
if ( attr[ i]. nodeName == 'v-model') {
var name = attr[ i]. nodeValue //获取绑定的key
node. addEventListener( 'input', function ( e) {
vm[ name] = e. target. value //触发set方法
})
new Watcher( vm, node, name, 'value')
} else if ( attr[ i]. nodeName. includes( ':')) {
var eventType = attr[ i]. nodeName. split( ':')[ 1] //事件名
var cb = vm. methods && vm. methods[ attr[ i]. nodeValue]
if ( eventType && cb) {
node. addEventListener( eventType, cb. bind( vm), false)
}
}
}
if ( node. childNodes && node. childNodes. length) { //如果还有子节点 递归
[... node. childNodes]. forEach( n => this. compileElement( n, vm))
}
}
if ( node. nodeType === 3) { //text
if ( reg. test( node. nodeValue)) {
var name = RegExp. $1
name = name. trim()
new Watcher( vm, node, name, 'nodeValue')
}
}
}
}
class Vue { //Vue类
constructor( params) {
this. data = params. data //获取属性
this. methods = params. methods //获取方法
this. observe( params. data, this) //监听属性
var id = params. el;
var dom = new Doms( document. getElementById( id), this)
document. getElementById( id). appendChild( dom)
params. mounted. call( this)
}
observe( obj, vm) { //读取data内属性,并监听
if (! obj || typeof obj !== 'object') return
Object. keys( obj). forEach( key => this. defineReactive( vm, key, obj[ key]))
}
defineReactive( obj, key, val) { //利用Object.defineProperty监听属性改变
var dep = new Dep()
Object. defineProperty( obj, key, {
get: function () {
if ( Dep. target) { //添加订阅者watcher到主题对象Dep
dep. addSub( Dep. target)
}
return val
},
set: function ( newVal) {
if ( newVal === val) return
val = newVal
console. log( val)
//作为发布者发布通知
dep. notify()
}
})
}

}
class Dep { //收集订阅者的容器类
constructor() {
this. subs = []
}
addSub( sub) {
this. subs. push( sub)
}
notify() {
this. subs. forEach( sub => sub. update())
}
}

class Watcher {
constructor( vm, node, name, type) {
Dep. target = this
this. name = name
this. node = node
this. vm = vm
this. type = type
this. update()
Dep. target = null
}
update() {
this. get()
this. node[ this. type] = this. value //订阅者执行响应操作
}
get() {
this. value = this. vm[ this. name] //触发响应属性的get
}
}

var vm = new Vue({
el: 'app',
data: {
text: 'lyl',
title: 'hello world'
},
methods: {
clickMe() {
this. title = 'hello world'
}
},
mounted() {
setTimeout(() => {
this. title = '你好'
}, 1000);
}
})
< / script >
</ body >

</ html >



GitHub地址:https://github.com/ChrisLuckComes/Vue2WayBind
Logo

前往低代码交流专区

更多推荐