Vue双向绑定实现原理与方法详解
程序员文章站
2022-03-20 18:45:45
本文实例讲述了vue双向绑定实现原理与方法。分享给大家供大家参考，具体如下：昨天接到一个电话面试，上来第一个问题就是vue双向绑定的原理。当时我并不知道如何监听数据层到视图层的变化，于是没答上来，挂电...
本文实例讲述了vue双向绑定实现原理与方法。分享给大家供大家参考，具体如下：
昨天接到一个电话面试，上来第一个问题就是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()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
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
感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。
上一篇： vue 实现用户登录方式的切换功能