网站创作思路/网站搜索排名优化价格
模拟Vue响应式原理-分析
- 功能
- 负责接收初始化的参数（选项）
- 负责把 data 中的属性注入到 Vue 实例，转换成 getter（setter）
- 负责调用 observer 监听 data 中所有属性的变化
- 负调用 compiler 解析指令/ 插值表达式
- 结构
<!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Mini Vue</title>
</head>
<body><div id="app"><h1>差值表达式</h1><h3>{{ msg }}</h3><h3>{{ count }}</h3><h1>v-text</h1><div v-text="msg"></div><h1>v-model</h1><input type="text" v-model="msg"><input type="text" v-model="count"></div><script src="./js/dep.js"></script><script src="./js/watcher.js"></script><script src="./js/compiler.js"></script><script src="./js/observer.js"></script><script src="./js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {msg: 'Hello Vue',count: 100,person: { name: 'zs' }}})console.log(vm.msg)vm.msg = { test: 'Hello' }vm.test = 'abc'</script>
</body>
</html>class Vue {constructor (options) {// 1. 通过属性保存选项的数据this.$options = options || {}this.$data = options.data || {}this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el// 2. 把data中的成员转换成getter和setter，注入到vue实例中this._proxyData(this.$data)// 3. 调用observer对象，监听数据的变化new Observer(this.$data)// 4. 调用compiler对象，解析指令和差值表达式new Compiler(this)}_proxyData (data) {// 遍历data中的所有属性Object.keys(data).forEach(key => {// 把data的属性注入到vue实例中Object.defineProperty(this, key, {enumerable: true,configurable: true,get () {return data[key]},set (newValue) {if (newValue === data[key]) {return}data[key] = newValue}})})}}Observer
- 功能
- 负责把 data 选项中的属性转换成响应式数据
- data 中的某个属性也是对象，把该属性转换成响应式数据
- 数据变化发送通知
- 结构
class Observer {constructor (data) {this.walk(data)}walk (data) {//1. 判断data是否是对象if (!data || typeof data !== 'object') {return}//2. 遍历 data 对象的所有属性Object.keys(data).forEach(key => {this.defineReacive(data, key, data[key])})}defineReacive (obj, key, val) {let that = this// 负责收集依赖，并发送通知let dec = new Dep()//如果val是对象，把val内部的属性转换成响应式数据this.walk(val)Object.defineProperty(obj, key, {enumerable:true,configurable:true,get () {// 收集依赖Dep.target && dep.addSub(Dep.target)return val},set (newValue) {if (newValue === val) {return}val = newValuethat.walk(newValue)// 发送通知dep.notify()}})}
}Compiler
- 功能
- 负责编译模板，解析指令/差值表达式
- 负责页面的首次渲染
- 当数据变化后重新熏染视图
- 结构
class Compiler {constructor (vm) {this.el = vm.$elthis.vm = vmthis.compile(this.el)}// 编译模板，处理文本节点和元素节点compile (el) {let childNodes = el.childNodesArray.from(childNodes).forEach(node => {// 处理文本节点if (this.isTextNode(node)) {this.compileText(node)} else if (this.isElementNode(node)) {// 处理元素节点this.compileElement(node)}// 判断node节点，是否有子节点，如果有子节点，要递归调用compileif (node.childNodes && node.childNodes.length) {this.compile(node)}})}// 编译元素节点，处理指令compileElement (node) {// console.log(node.attributes)// 遍历所有的属性节点Array.from(node.attributes).forEach(attr => {// 判断是否是指令let attrName = attr.nameif (this.isDirective(attrName)) {// v-text --> textattrName = attrName.substr(2)let key = attr.valuethis.update(node, key, attrName)}})}update (node, key, attrName) {let updateFn = this[attrName + 'Updater']updateFn && updateFn.call(this, node, this.vm[key], key)}// 处理 v-text 指令textUpdater (node, value, key) {node.textContent = valuenew Watcher(this.vm, key, (newValue) => {node.textContent = newValue})}// v-modelmodelUpdater (node, value, key) {node.value = valuenew Watcher(this.vm, key, (newValue) => {node.value = newValue})// 双向绑定node.addEventListener('input', () => {this.vm[key] = node.value})}// 编译文本节点，处理差值表达式compileText (node) {// console.dir(node)// {{ msg }}let reg = /\{\{(.+?)\}\}/let value = node.textContentif (reg.test(value)) {let key = RegExp.$1.trim()node.textContent = value.replace(reg, this.vm[key])// 创建watcher对象，当数据改变更新视图new Watcher(this.vm, key, (newValue) => {node.textContent = newValue})}}// 判断元素属性是否是指令isDirective (attrName) {return attrName.startsWith('v-')}// 判断节点是否是文本节点isTextNode (node) {return node.nodeType === 3}// 判断节点是否是元素节点isElementNode (node) {return node.nodeType === 1}}Dep
- 功能
- 收集依赖，添加观察者（watcher）
- 通知所有观察者
- 结构
class Dep {constructor () {//存储所有的观察者this.subs = []}//添加观察者addSub (sub) {if (sub && sub.update) {this.subs.push(sub)}}//发布通知notify () {this.subs.forEach(sub => {sub.update()})}
}Watcher
- 功能
- 当数据变化触发依赖，dep 通知所有的 Watcher 实例更新视图
- 自身实例化的时候往 dep 对象中添加自己
- 结构
class Watcher {constructor (vm, key, cb) {this.vm = vm//data 中的属性名称this.key = key//回调函数负责更新视图this.cb = cb//把 wacher 对象记录到Dep类的静态属性targetDep.target = this//触发 get 方法，在get方法中会调用 addSubthis.oldValue = vm[key]Dep.target = null}// 当数据发生变化的时候更新视图update() {let newValue = this.vm[this.key]if (this.oldValue === newValue) {return}this.cb(newValue)}
}双向绑定
- 在 compiler.js 添加监听事件
