共计 3148 个字符，预计需要花费 8 分钟才能阅读完成。
在实现 vue 双向数据绑定之前，先理解 Proxy 相干的概念和用法
proxy 概念
Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。
一些术语
- handle
蕴含捕获器（trap）的占位符对象，可译为处理器对象
- traps
提供属性拜访的办法。这相似于操作系统中捕捉器的概念。
- target
被 Proxy 代理虚拟化的对象。
语法
const p = new Proxy(target, handler)
- target
要应用 Proxy 包装的指标对象（能够是任何类型的对象，包含原生数组，函数，甚至另一个代理）。
- handle
一个通常以函数作为属性的对象，各属性中的函数别离定义了在执行各种操作时代理 p 的行为。
应用 proxy 实现数据劫持
let data = {
name: YoLinDeng,
height: '176cm'
}
const p = new Proxy(data, {get(target, prop) {return Reflect.get(...arguments)
},
set(target, prop, newValue) {return Reflect.set(...arguments)
}
})对于 vue 中数据响应式的原理
对数据进行侦测
- 在 vue2.X 中，实现一个
observe类，对于对象数据，通过Object.defineProperty来劫持对象的属性，实现getter和setter办法，这样就能够在 getter 的时候晓得谁（订阅者）读取了数据，即谁依赖了以后的数据，将它通过Dep 类（订阅器）收集对立治理，在 setter 的时候调用 Dep 类中的notify办法告诉所以相干的订阅者进行更新视图。如果对象的属性也是一个对象的话，则须要递归调用observe进行解决。 - 对于数组则须要另外解决，通过实现一个拦截器类，并将它挂载到数组数据的原型上，当调用
push/pop/shift/unshift/splice/sort/reverse批改数组数据时候，相当于调用的是拦截器中从新定义的办法，这样在拦截器中就能够侦测到数据扭转了，并告诉订阅者更新视图。 - vue3 中应用 Proxy 代替了 Object.defineProperty，长处在于能够间接监听对象而非属性、能够间接监听数组的变动、多达 13 种拦挡办法。毛病是兼容性还不够好。Proxy 作为新规范将受到浏览器厂商重点继续的性能优化。
对模板字符串进行编译
- 实现 Compile 解析器类，将
template中的模板字符串通过正则等形式进行解决生成对应的 ast（形象语法树），通过调用定义的不同钩子函数进行解决，包含开始标签（start）并判断是否自闭和以及解析属性、完结标签（end）、文本（chars）、正文（comment） - 将通过 html 解析与文本解析的 ast 进行优化解决，在动态节点上打标记，为前面
dom-diff算法中性能优化应用，即在比照前后 vnode 的时候会跳过动态节点不作比照。 - 最初依据解决好的 ast 生产
render函数，在组件挂载的时候调用render函数就能够失去虚构 dom。
虚构 dom
- vnode 的类型包含正文节点、文本节点、元素节点、组件节点、函数式组件节点、克隆节点，
VNode能够形容的多种节点类型，它们实质上都是VNode类的实例，只是在实例化的时候传入的属性参数不同而已。 - 通过将模板字符串编译生成虚构 dom 并缓存起来，当数据发生变化时，通过比照变动前后虚构 dom，以变动后的虚构 dom 为基准，更新旧的虚构 dom，使它和新的一样。把 dom-diff 过程叫做
patch的过程，其次要做了三件事，别离是创立 / 删除 / 更新节点。 - 对于子节点的更新策略，vue 中为了防止双重循环数据量大时候造成工夫复杂度高带来的性能问题，而抉择先从子节点数组中 4 个非凡地位进行比照，别离是：新前与旧前，新后与旧后，新后与旧前，新前与旧后。如果四种状况都没有找到雷同的节点，则再通过循环形式查找。
实现繁难的 vue 双向数据绑定
vue 的双向数据绑定次要是指，数据变动更新视图变动，视图变动更新数据。
实现代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<script src="myVue.js"></script>
</head>
<body>
<div id="app">
{{name}}
<div>{{message}}</div>
<input type="text" v-model="test">
<span>{{test}}</span>
</div>
<script>
let vm = new vue({
el: '#app',
data: {
name: 'YoLinDeng',
message: '打篮球',
test: '双向绑定数据'
}
})
// console.log(vm._data)
</script>
</body>
</html>class vue extends EventTarget {constructor(option) {super()
this.option = option
this._data = this.option.data
this.el = document.querySelector(this.option.el)
this.compileNode(this.el)
this.observe(this._data)
}
// 实现监听器办法
observe(data) {
const context = this
// 应用 proxy 代理，劫持数据
this._data = new Proxy(data, {set(target, prop, newValue) {
// 自定义事件
let event = new CustomEvent(prop, {detail: newValue})
// 公布自定义事件
context.dispatchEvent(event)
return Reflect.set(...arguments)
}
})
}
// 实现解析器办法，解析模板
compileNode(el) {
let child = el.childNodes
let childArr = [...child]
childArr.forEach(node => {if (node.nodeType === 3) {
let text = node.textContent
let reg = /\{\{\s*([^\s\{\}]+)\s*\}\}/g
if (reg.test(text)) {
let $1 = RegExp.$1
this._data[$1] && (node.textContent = text.replace(reg, this._data[$1]))
// 监听数据更改事件
this.addEventListener($1, e => {node.textContent = text.replace(reg, e.detail)
})
}
} else if (node.nodeType === 1) { // 如果是元素节点
let attr = node.attributes
// 判断属性中是否含有 v -model
if (attr.hasOwnProperty('v-model')) {let keyName = attr['v-model'].nodeValue
node.value = this._data[keyName]
node.addEventListener('input', e => {this._data[keyName] = node.value
})
}
// 递归调用解析器办法
this.compileNode(node)
}
})
}
}
正文完
