Vue —— 响应式解析

墨蓝 2022-12-13 12:56 126阅读 0赞

# 简单介绍 defineReactive #

<!DOCTYPE html>
    <html lang="en">
      <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, intial-scale=1">
    	<title>Vue 响应式解析</title>
      </head>
    
      <body>
    	<div id="app"></div>
    
    	<script> const app = document.getElementById('app') // 对单个对象使用响应式绑定 function defineReactive(obj, key, val) { // 监听嵌套对象 observe(val) Object.defineProperty(obj, key, { get() { console.log(`get ${ key}: ${ val}`) return val }, // 除了要改变资深的值 // 还要触发与之相关值的变化 set(newVal) { if (newVal !== val) { // 保证如果 newVal 是对象，再次做响应式处理 observe(newVal) val = newVal update() } } }) } // 数据更新后要触发的更新动作，如通知视图发生变化 function update() { app.innerText = obj.foo } // 使对象的第一层数据变成响应式 function observe(obj) { if (typeof obj !== 'object' || obj === null) return Object.keys(obj).forEach((key) => { defineReactive(obj, key, obj[key]) }) } // 处理对象动态新增的属性 function set(obj, key, val) { defineReactive(obj, key, val) } </script>
      </body>
    </html>

# 手撸 Vue #

先上图  
![MVVM][]  
接下来会将上图各部分分开解析

## 使用 ##

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Vue 响应式</title>
    </head>
    
    <body>
      <div id="app">
    	<p>{
       {counter}}</p>
    	<p @click="handleClick(counter)">{
       {counter}}</p>
    	<p v-text="counter"></p>
    	<p v-html="desc"></p>
    	<div>
    	  <label for="v-model-test">
    		v-model-test
    		<input type="text" name="v-model" id="v-model-test" v-model="text"/>
    	  </label>
    	  <p>{
       {text}}</p>
    	</div>
      </div>
      <script src="myVue.js"></script>
      <script> const app = new Vue({ el: '#app', data: { counter: 1, desc: '<span style="color: red">嘿嘿嘿</span>', text: 'hhh' }, methods: { handleClick(counter) { alert(`counter: ${ counter}`) } } }) setInterval(() => { app.counter++ }, 1000) </script>
    </body>
    </html>

## Vue 类 ##

1.  对 data 选项做响应式处理
2.  编译模板

class Vue { 
      constructor(options) { 
    	this.$options = options
    	this.$data = options.data
    	this.$methods = options.methods
    
    	// 对 data 做响应式处理
    	observe(this.$data)
    
    	// 对 data 进行代理
    	// 可以直接使用 app.counter 而不是 app.$data.counter
    	proxy(this)
    
    	// 编译模板
    	// options.el 就是 #app
    	new Compile(options.el, this)
      }
    }
    
    // 对单个对象进行响应式绑定
    function defineReactive(obj, key, val) { 
      // 监听嵌套对象
      observe()
    
      // 创建 Dep 实例
      const dep = new Dep()
    
      Object.defineProperty(obj, key, { 
    	get() { 
    	  // 在此做依赖收集
    	  if (Dep.target) dep.addDep(Dep.target)
    	  return val
    	},
    	// 除了要改变自身的值
    	// 还要出发与之相关值的变化
    	set(newVal) { 
    	  if (newVal !== val) { 
    		// 如果 newVal 是对象，就再次对其作响应式处理
    		observe(newVal)
    
    		val = newVal
    
    		// 变量发生变化时，通知与之相关的函数都执行一遍
    		dep.notify()
    	  }
    	}
      })
    }

以上代码的 dep 可以先忽略，后文会解释

## 代理 ##

仔细看一下 `new Vue()`，对于数据的修改是直接取来修改的

比如说修改 `data` 中的 `counter`，在内部可以直接使用 `this.counter++` 就使其自增

// proxy(this)
    function proxy(vm) { 
      Object.keys(vm.$data).forEach((key) => { 
    	Object.defineProperty(vm, key, { 
    	  get() { 
    		return vm.$data[key]
    	  },
    	  set(v) { 
    		vm.$data[key] = v
    	  }
    	})
      })
    }

## 响应式 ##

// observe(this.$data)
    function observe (obj) { 
      if (typeof obj !== 'object' || obj === null) return
    
      // 对 data 作响应式处理
      new Observer(obj)
    }
    
    // 根据传入 value 的类型做相应的响应式处理
    class Observer { 
      constructor(value) { 
    	this.value = value
    
    	if (Array.isArray(value)) { 
    	  // 对于 Array 做相应的处理
    	} else { 
    	  this.walk(value)
    	}
      }
    
      // 对象响应式
      walk(obj) { 
    	Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]))
      }
    }

## 模板 ##

// 1.处理差值表达式
    // 2.处理指令和事件
    // 3.以上两者的初始化和更新
    class Compile { 
      constructor(el, vm) { 
    	this.$el = document.querySelector(el)
    	this.$vm = vm
    
    	if (this.$el) { 
    	  this.compile(this.$el)
    	}
      }
    
      // 从根节点开始编译
      compile(el) { 
    	// 遍历 el 的子节点，并判断他们类型然后做出相应的处理
    	const childNodes = el.childNodes
    	childNodes.forEach((node) => { 
    	  // 元素
    	  if (node.nodeType === 1) { 
    		// 处理指令和事件
    		const attrs = node.attributes
    		Array.from(attrs).forEach((attr) => { 
    		  // v-xxx="abc"
    		  const attrName = attr.name // v-xxx
    		  const exp = attr.value // abc
    		  // 指令处理
    		  if (attrName.startsWith('v-')) { 
    			const dir = attrName.substring(2)
    			if (this[dir]) this[dir](node, exp)
    		  }
    		  // 事件处理
    		  if (attrName.startsWith('@')) { 
    			const action = attrName.substring(1)
    			const fn = exp.match(/\w+/)[0]
    			let params = exp.match(/$.+$/)
    			if (params) { 
    			  params = params[0].slice(1, -1).split(',')
    			  node.addEventListener(action, () => { 
    				this.$vm.$methods[fn].apply(this.$vm, params.map(p => this.$vm[p]))
    			  })
    			  return
    			}
    			node.addEventListener(action, this.$vm.$methods[fn].bind(this.$vm))
    		  }
    		})
    	  }
    	  // 文本节点
    	  if (this.isInter(node)) { 
    		this.compileText(node)
    	  }
    	  // 其他情况...
    
    	  // 递归遍历节点
    	  if (node.childNodes) { 
    		this.compile(node)
    	  }
    	})
      }
    
      // 判断是否为差值表达式
      isInter(node) { 
    	return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)
      }
    
      // 为以下函数的更新操作抽象出来
      update(node, exp, directive) { 
    	// 1.初始化
    	const fn = this[directive + 'Updater']
    	if (fn) fn(node, exp)
    	// 2.更新
    	// 在此进行依赖收集
    	new Watcher(this.$vm, exp, (val) => { 
    	  if (fn) { 
    		fn(node, val)
    	  }
    	})
      }
    
      // 各指令要做的事
      // v-text
      text(node, exp) { 
    	this.update(node, exp, 'text')
      }
    
      // v-html
      html(node, exp) { 
    	this.update(node, exp, 'html')
      }
    
      // v-model
      model(node, exp) { 
    	this.update(node, exp, 'model')
      }
    
      // 各指令的操作函数
      textUpdater(node, exp) { 
    	node.textContent = this.$vm[exp]
      }
    
      htmlUpdater(node, exp) { 
    	node.innerHTML = this.$vm[exp]
      }
    
      modelUpdater(node, exp) { 
    	node.value = this.$vm[exp]
    	node.addEventListener('input', (e) => { 
    	  this.$vm[exp] = node.value = e.target.value
    	})
      }
    }

## 侦听器 ##

用于监听数据变化，当数据发生变化的时候通知相关更新函数进行执行

class Watcher { 
      constructor(vm, key, updateFn) { 
    	this.vm = vm
    	this.key = key
    	this.updateFn = updateFn
    
    	// 触发依赖收集，通过一个全局对象存储
    	Dep.target = this
    
    	// 触发一次 get
    	console.log(this.vm[this.key])
    	Dep.target = null
      }
    
      update() { 
    	// 数据发生时，和该数据相关的方法都执行一遍
    	this.updateFn.call(this.vm, this.key)
      }
    }

## 依赖收集 ##

class Dep { 
      constructor() { 
    	this.deps = []
      }
    
      addDep(dep) { 
    	this.deps.push(dep)
      }
    
      notify() { 
    	this.deps.forEach(dep => dep.update())
      }
    }

在 `defineReactive`、`Watcher` 中使用到依赖收集

**最后**，非常感谢你能看到这里！祝大家变得更强！

[MVVM]: /images/20221123/366325c598ac4ae4b5c51469b4e65d38.png