vue实现过程
1、new Vue() ⾸先执⾏初始化，对data执⾏响应化处理，这个过程发⽣在Observer中
- 同时对模板执⾏编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发⽣在
Compile中- 同时定义⼀个更新函数和Watcher，将来对应数据变化时Watcher会调⽤更新函数
- 由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个
Watcher将来data中数据⼀旦发⽣变化，会⾸先找到对应的Dep，通知所有Watcher执⾏更新函数
image.png
- Vue：框架构造函数
- Observer：执⾏数据响应化（分辨数据是对象还是数组）
- Compile：编译模板，初始化视图，收集依赖（更新函数、watcher创建）
- Watcher：执⾏更新函数（更新dom）
- Dep：管理多个Watcher，批量更新
依赖收集
视图中会⽤到data中某key，这称为依赖。同⼀个key可能出现多次，每次都需要收集出来⽤⼀个
Watcher来维护它们，此过程称为依赖收集。
多个Watcher需要⼀个Dep来管理，需要更新时由Dep统⼀通知。
image.png
实现思路
- defineReactive时为每⼀个key创建⼀个Dep实例
- 初始化视图时读取某个key，例如name1，创建⼀个watcher1
- 由于触发name1的getter⽅法，便将watcher1添加到name1对应的Dep中
- 当name1更新，setter触发时，便可通过对应Dep通知其管理所有Watcher更新
实现代码
//从头实现vue的双向绑定原理 以及视图更新机制
class Vue {
constructor(option) {
//option代表vue的所有对象
this.$options = option
this.$data = option.data
//劫持data中的数据
observe(this.$data)
}
}
//劫持所有属性
class Observe {
constructor(value) {
this.value = value
this.walk(this.value)
}
//walk遍历对象中的每一个key,每一个属性都调用一次defineReactive 来实现劫持
walk(obj) {
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}
}
//定义一个管家 管家中存放自己需要管理的watcher
class Dep {
constructor() {
//存放watcher
this.deps = []
}
//这里将watch添加到管家中
addDep(dep) {
this.deps.push(dep)
}
//触发自己管理的每一个watch的更新方法
notify() {
this.deps.forEach(dep => dep.update())
}
}
class Watcher {
constructor(vm, key, updateFn) {
this.vm = vm
this.updateFn = updateFn
this.key = key
//解析插值表达式的时候实例化Watch，因为要用到值，会触发getter方法 这时候给Dep.target赋值
Dep.target = this
this.vm[this.key] //调用data中的值，触发definePrototy的getter方法，开始收集依赖
Dep.target = null //每次将watcher添加到dep中后清空 不影响下次添加
}
//更新视图的方法
update() {
//传入一个根实例，一个当前的值
this.updateFn.call(this.vm, this.vm[key])
}
}
//初始化视图方法
class Compile {
constructor(el, vm) {
this.$vm = vm
this.$el = document.querySelctor(el)
//如果拿到节点，就将节点编译e
if (this.$el) {
this.complie(this.$el)
}
}
complie(value) {
const childNodes = value.childNodes;
Array.from(childNodes).forEach(node => {
if (this.isElement(node)) {
console.log("编译元素" + node.nodeName);
} else if (this.isInterpolation(node)) {
//编译插值文本的时候创建watcher 并更新dom
console.log("编译插值⽂本" + node.textContent);
this.compileText(node);
}
//递归编译
if (node.childNodes && node.childNodes.length > 0) {
this.compile(node);
}
});
}
isElement(node) {
return node.nodeType == 1;
}
isInterpolation(node) {
return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);
}
compileText(node) {
// console.log(RegExp.$1);
this.update(node, RegExp.$1, 'text')
}
update(node, exp, dir) {
const fn = this[dir + 'Updater']
fn && fn(node, this.$vm[exp]) //给节点赋值
new Watcher(this.$vm, exp, function (val) { //添加监听 触发的时候调用此方法更新节点
fn && fn(node, val)
})
}
textUpdater(node, val) {
node.textContent = val;
}
htmlUpdater(node, val) {
node.innerHTML = val
}
}
function observe(obj) {
if (typeof obj != 'object' || obj === null) return
new Observe(obj)
}
function defineReactive(obj, key, val) {
//解决嵌套对象问题 采用递归方法
observe(val)
//实例化管家，为管家添加多个watcher
const dep = new dep()
Object.defineProperty(obj, key, {
get() {
//收集依赖 Dep.target在Watcher创建的时候被赋值 其实指向了watch的实例 watch的实例中有update方法，
Dep.target && dep.addDep(Dep.target)
return val
},
set(newVal) {
if (newVal != val) {
//将管家中多个watch更新
dep.notify()
}
}
})
}
function compileElement(node) {
let nodeAttrs = node.attributes;
Array.from(nodeAttrs).forEach(attr => {
let attrName = attr.name;
let exp = attr.value;
if (this.isDirective(attrName)) {
let dir = attrName.substring(2);
this[dir] && this[dir](node, exp);
}
});
}
