首页 /
正文
手写vue（下）
MVVM框架的三要素：
数据响应式、模板引擎及其渲染
数据响应式：监听数据变化并在视图中更新: Object.defineProperty()/ Proxy
模版引擎：提供描述视图的模版语法
- 插值：{{}}
- 指令：v-bind，v-on，v-model，v-for，v-if
渲染：如何将模板转换为html
- 模板 => vdom => dom
原理分析
1、new Vue() 首先执行初始化，对data执行响应化处理，这个过程发生在Observer中
2、同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在 Compile中
3、同时定义一个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数
4、由于data的某个key在一个视图中可能出现多次，所以每个key都需要一个管家Dep来管理多个 Watcher
5、将来data中数据一旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数
涉及类型介绍
Vue：框架构造函数
Observer：执行数据响应化（分辨数据是对象还是数组）
Compile：编译模板，初始化视图，收集依赖（更新函数、watcher创建）
Watcher：执行更新函数（更新dom）
Dep：管理多个Watcher，批量更新
使用
需要引入vue.js和compile.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<script src="./compile.js"></script>
</head>
<body>
<!-- vue1.0实现，没有使用虚拟dom -->
<div id="app">
<p>{{counter}}</p>
<div @click="onclick" v-text="counter"><span>19</span></div>
<div v-html="desc"></div>
<input type="text" v-model="desc">
</div>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 1,
desc:"<span>这是html</span>"
},
methods: {
onclick(){
this.counter++
}
}
})
setInterval(() => {
app.counter++
}, 1000)
</script>
</body>
</html>
编写vue.js
function defineReactive(obj, key, val){
// 递归
observe(val)
// 创建一个Dep和当前key一一对应
const dep = new Dep()
// 对传入obj进行访问拦截
Object.defineProperty(obj, key, {
// val被引用,形成闭包不被释放,保存当前状态
get(){
console.log('get '+key);
// 依赖收集在这里
Dep.target && dep.addDep(Dep.target)
return val
},
set(newVal){
if(newVal !== val){
console.log('set ' + key + ': ' + newVal);
// 如果传入的newVal依然是obj，要对其做响应式处理
observe(newVal)
val = newVal
// 值发生变化，执行更新函数
// watchers.forEach(w => w.update())
dep.notify()
}
}
})
}
function observe(obj){
if(typeof obj !== 'object' || obj == null) return
// 创建Observer实例
new Observer(obj)
}
// 代理函数，方便用户直接访问$data数据
function proxy(vm, sourceKey){
Object.keys(vm[sourceKey]).forEach(key => {
// 将$data中的key代理到vm属性中
Object.defineProperty(vm, key, {
get(){
return vm[sourceKey][key]
},
set(newVal){
vm[sourceKey][key] = newVal
}
})
})
}
// 创建vue构造函数
class Vue {
constructor(options){
// 保存选项
this.$options = options
this.$data = options.data
// 响应化处理
observe(this.$data)
// 代理
proxy(this, '$data')
// 创建编译器实例
new Complie(options.el, this)
}
}
// 根据对象类型决定如何做响应化
class Observer{
constructor(value){
this.value = value
// 判断其类型
if(typeof value === 'object'){
this.walk(value)
}
}
// 对象数据的响应化
walk(obj){
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}
// 数组的响应化
}
// 观察者：保存更新函数，值发送变化调用更新函数
// const watchers = []
class Watcher{
constructor(vm, key, updateFn){
this.vm = vm
this.key = key
this.updateFn = updateFn
// watchers.push(this)
// Dep.target静态属性上设置为当前watcher实例
Dep.target = this
// 读取触发getter
this.vm[this.key]
// 收集完置空
Dep.target = null
}
update(){
this.updateFn.call(this.vm, this.vm[this.key])
}
}
// Dep:依赖，管理某个key相关Watcher实例
class Dep{
constructor(){
this.deps = []
}
addDep(dep){
this.deps.push(dep)
}
notify(){
this.deps.forEach(dep => dep.update())
}
}编写compile.js
编译模板中vue模板特殊语法，初始化视图、更新视图
// 编译器
// 递归遍历dom数
// 判断节点类型，如果是文本，则判断是否是插值绑定
// 如果是元素，则遍历器属性是否是指令或事件，然后递归子元素
class Complie{
// el宿主元素，vm vue实例
constructor(el, vm){
this.$vm = vm
this.$el = document.querySelector(el)
if(this.$el){
console.log(this.$el);
//执行编译
this.complie(this.$el)
}
}
complie(el){
// 遍历el树
const childNodes = el.childNodes
Array.from(childNodes).forEach(node => {
// 判断是否是元素
if(this.isElement(node)){
console.log('编译元素', node.nodeName);
this.complieElement(node)
}else if(this.isInter(node)){
console.log('编译一下插值绑定' + node.textContent);
this.complieText(node)
}
// 递归子节点
if(node.childNodes && node.childNodes.length > 0){
this.complie(node)
}
});
}
isElement(node){
return node.nodeType === 1
}
// 判断是否插值表达式
isInter(node){
// 首先是文本标签，其次内容是{{xxx}}
return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)
}
// 替换插值表达式
complieText(node){
// // 静态调用RegExp.$1刚刚isInter方法中匹配的插值文本部分
// node.textContent = this.$vm[RegExp.$1]
this.update(node, RegExp.$1, 'text')
}
complieElement(node){
// 节点是元素，遍历其属性列表
const nodeAttrs = node.attributes
Array.from(nodeAttrs).forEach(attr => {
// 指令以v-xx='oo'开头
// 属性名
const attrName = attr.name
// 属性值
const exp = attr.value
if(this.isDirective(attrName)){
// 拿到指令名
const dir = attrName.substring(2)
// 执行指令
this[dir] && this[dir](node, exp)
}
// 事件处理
if(this.isEvent(attrName)){
// @click=""
const dir = attrName.substring(1)
// 事件监听
this.eventHandler(node, exp, dir)
}
})
}
// 判断是否指令
isDirective(attr){
return attr.indexOf('v-') === 0
}
// v-text
text(node, exp){
// // 把子元素也覆盖
// node.textContent = this.$vm[exp]
this.update(node, exp, 'text')
}
// v-html
html(node, exp){
// // 把子元素也覆盖
// node.innerHTML = this.$vm[exp]
this.update(node, exp, 'html')
}
update(node, exp, dir){
// 指令对应更新函数xxUpdater
const fn = this[dir + 'Updater']
fn && fn(node, this.$vm[exp])
// 更新处理,封装更新函数，更新对应dom元素
new Watcher(this.$vm, exp, function(val){
fn && fn(node, val)
})
}
textUpdater(node, value){
node.textContent = value
}
htmlUpdater(node, value){
node.innerHTML = value
}
isEvent(dir){
return dir.indexOf('@') === 0
}
eventHandler(node, exp, dir){
const fn = this.$vm.$options.methods && this.$vm.$options.methods[exp]
node.addEventListener(dir, fn.bind(this.$vm))
}
// v-model="xx"
model(node, exp){
// update方法只能赋值更新，单项
this.update(node, exp, 'model')
// 事件监听
node.addEventListener('input', e => {
// 新的值付给数据即可
this.$vm[exp] = e.target.value
})
}
modelUpdater(node, value){
// 表单元素赋值
node.value = value
}
}
1
1
1
1
1
1
1
1
1
1