1.响应式的实现（Object.defineProperty）
在javascript中实现数据响应式一般有两种方案, 正好也对应了vue2.x和vue3.x使用的方式
1.对象属性拦截（vue2.x）=>Object.defineProperty
2.对象整体代理(vue3.x) =>Proxy
- 对象属性拦截的实现是通过
Object.defineProperty定义对象，通过get，set方法实现的
// 栗子
let data = {
name: '我是栗子'
age: 18
}
// 遍历每个属性
// Object.keys()将对象转化为数组形式
Object.keys(data).forEach((key) => {
defineReactive(data, key, data[key])
})
//响应式转化
// 使用闭包特性, 使value变量不被销毁
function defineReactive(data, name, value) {
Object.defineProperty(data, name, {
get() {
return value
}
set(newVal) {
value = newVal
}
})
}
2.指令的实现(v-model)
<div>
<input v-model="name"></input>
</div>
<script>
let data = {
name: '栗子',
age: 18
}
Object.keys(data).forEach((key) => {
defineReactive(data, key, data[key])
})
function defineReactive(data, key, value ) {
Object.defineProperty(data, key, {
get() {
return value
},
set(newVal) {
if(newVal === value) {
return
}
value = newVal
// 直接全部执行存在问题,会导致没有发生更改得数据也进行执行, 可以通过发布订阅模式(自定义事件)进行优化
compile()
}
})
}
function compile() {
let app = document.getElementById('app')
// 拿到app的所有子元素
const nodes = app.childNodes
// 遍历所有子元素
nodes.forEach(node => {
if(node.nodeType === 1) {
// node.attributes找到标签的属性
const attrs = node.attributes
Array.from(attrs).forEach(attr => {
const dirName = attr.nodeName
const dataProp = attr.nodeValue
// v-model
if(dirName === 'v-model') {
// M->V
node.value = data[dataProp]
// V->M
node.addEventListener('input', (e) => {
data[dataProp] = e.target.value
})
}
// v-text
if(dirName === 'v-text') {
node.innerText = data[dataProp]
}
})
}
})
}
// 首次渲染
compile()
</script>
3.简单实现发布订阅模式
简单版发布订阅模式
// dep对象
const dep = {
// map事件对象存在里面
map: Object.create(null),
// 收集事件
collect(dataProp, updateFn) {
// 判断map中是否存在该事件
if(!this.map[dataProp]) {
this.map[dataProp] = []
}
this.map[dataProp].push(updateFn)
},
// 触发事件
trigger(dataProp) {
this.map[dataProp] && this.map[dataProp].forEach(updateFn => {
updateFn()
})
}
}
- 优化指令实现
进行收集事件
function compile() {
let app = document.getElementById('app')
const nodes = app.childNodes
nodes.forEach(node => {
if(node.nodeType === 1) {
const attrs = node.attributes
Array.from(attrs).forEach(attr => {
const dirName = attr.nodeName
const dateProp = attr.nodeValue
if(dirName === 'v-text') {
// 第一次赋值
node.innerText = data[dataProp]
// 收集跟新函数
dep.collect(dateProp, () => {
node.innerText = data[dataProp]
})
}
})
}
})
}
触发收集函数
function defineReactive(data, key, value) {
Object.defineProperty(data, key, {
get() {
return value
},
set(newVal) {
if(newValue === value) return
value = newValue
// 触发对应事件即可
dep.trigger(key)
}
})
}