手写Vue(上课笔记)

无处安放的前端
150 阅读4分钟

理解Vue的设计思想

MVVM模式

image.png

  • MVVM框架的三要素：数据响应式、模板引擎及其渲染
    1. 数据响应式：监听数据变化并在视图中更新
      • Object.defifineProperty()
      • Proxy
    2. 模版引擎：提供描述视图的模版语法
      • 插值：{{}}
      • 指令：v-bind，v-on，v-model，v-for，v-if
    3. 渲染：如何将模板转换为html
      • 模板 => vdom => dom

数据响应式原理

  • 数据变更能够响应在视图中，就是数据响应式。vue2中利用 Object.defineProperty() 实现变更检 测。
  1. 数据劫持

image.png

// 响应式
const obj = {}

function defineReactive(obj, key, val) {
    // 对传入的obj进行访问拦截
    Object.defineProperty(obj, key, {
        get() {
            console.log('get'+key)
            // 闭包处理 Val不会被释放
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log('set' + key + ':' + newVal)
                val = newVal
            }
        },
    })
}

defineReactive(obj,'foo','foo')
obj.foo
obj.foo = 'f123123123'
  1. 视图变更
// 响应式
const obj = {}
const app = document.querySelector('#app')
function defineReactive(obj, key, val) {
    // 对传入的obj进行访问拦截
    Object.defineProperty(obj, key, {
        get() {
            console.log('get'+key)
            // 闭包处理 Val不会被释放
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log('set' + key + ':' + newVal)
                val = newVal
                //更新函数
                update()
            }
        },
    })
}

    function update(){
        app.innerText = obj.foo
    }

defineReactive(obj,'foo','foo')
obj.foo
obj.foo = new Date().toLocaleTimeString()
setTimeout(()=>{
    obj.foo = new Date().toLocaleTimeString()
},2000)
  1. 遍历做响应化处理
  • 简单循环处理

// 遍历需要响应化的对象
function observe(obj){
    if(typeof obj !== 'object' || obj == null){
        // 判断是否是对象类型
        return
    }
    Object.keys(obj).forEach(key =>{
        defineReactive(obj,key,obj[key])
    })
}

const obj2 = {
    foo:'foo',
    bar:'bar',
    naz:{a:1}
}

observe(obj2)
  • 递归处理
    function defineReactive(obj, key, val) {
    //递归
        observe(val)
    // 对传入的obj进行访问拦截
    Object.defineProperty(obj, key, {
        get() {
            console.log('get'+key)
            // 闭包处理 Val不会被释放
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                // 解决赋的值是对象的情况
                // 如果传入的newVal 还是对象的话 还需要做一次响应式
                observe(newVal)
                console.log('set' + key + ':' + newVal)
                val = newVal
                //更新函数
                update()
            }
        },
    })
}

// 如果添加/删除了新属性无法检测
function set(obj, key, val) {

    defineReactive(obj, key, val)

}

Vue中的数据响应化

  1. 将要实现的代码
       
 <!DOCTYPE html>

<html lang="en">

<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>Document</title>

</head>

<body>

<div id="app">

<p>{{counter}}</p>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script>

const app = new Vue({

    el:'#app',

    data: {

    counter: 1

    },

})

setInterval(() => {

app.counter++

}, 1000);

</script>

</body>

</html>

  1. 原理分析

    1. new Vue() 首先执行初始化，对data执行响应化处理，这个过程发生在Observer中

    2. 同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在

    Compile中

    1. 同时定义一个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数

    2. 由于data的某个key在一个视图中可能出现多次，所以每个key都需要一个管家Dep来管理多个

    Watcher

    1. 将来data中数据一旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数

image.png

涉及类型介绍

  • MyVue：框架构造函数

  • Observer：执行数据响应化（分辨数据是对象还是数组）

  • Compile：编译模板，初始化视图，收集依赖（更新函数、watcher创建）

  • Watcher：执行更新函数（更新dom）

  • Dep：管理多个Watcher，批量更新

MyVue (框架构造函数) 数据执行初始化

  1. 数据初始化 对data中的数据进行响应化处理
function observe(obj) {
        if (typeof obj !== 'object' || obj == null) {
            return
        }
        new Observer(obj)
}

function defineReactive(obj, key, val) {}

class MyVue {
    constructor(options) {
        this.$options = options;
        this.$data = options.data;
        observe(this.$data)
    }
}

class Observer {

    constructor(value) {

        this.value = value

        this.walk(value);

    }

    walk(obj) {
        Object.keys(obj).forEach(key => {
            defineReactive(obj, key, obj[key]) 
        })

    }

}
  1. 为$data做代理

class MyVue {
    constructor(options) {
        this.$options = options;
        this.$data = options.data;
        observe(this.$data)
        // 代理  让外界能够直接访问$data中的数据
        proxy(this, '$data')
    }
}

function proxy(vm, sourceKey) {
    Object.keys(vm[sourceKey]).forEach(key => {
        Object.defineProperty(vm, key, {
            get() {
                return vm[sourceKey][key]
            },
            set(newVal) {
                vm[sourceKey][key] = newVal
            }
        })
    })
}

编译 - Compile

  1. 编译模板中vue模板特殊语法，初始化视图、更新视图

无标题.png

  1. 根据节点类型编译 compile.js

// 编译器


/*
* 1. 递归遍历dom树
* 
* 2. 判断节点类型 如果是文本 则判断是否是插值绑定
* 
* 3/ 如果是元素 则遍历属性判断是否是指令 或者事件 然后递归
* 
* */


class Compile {
    /**
     * @el 根元素
     * @vm MyVUe 实例
     * */
    constructor(el, vm) {
        this.$vm = vm
        this.$el = document.querySelector(el)
        if (this.$el) {
            // 执行编译
            this.compile(this.$el)
        }
    }

    /**
     * 编译器
     * */
    compile(el) {
        // 遍历el树
        const childNodes = el.childNodes;
        Array.from(childNodes).forEach(node => {
            if (this.isElement(node)) {
                console.log('编译元素' + node.nodeName)
            } else if (this.isInter(node)) {
                console.log('编译插值绑定' + node.textContent)
            }
            // 递归子节点
            if (node.childNodes && node.childNodes.length > 0) {
                this.compile(node)
            }

        })
    }

    isElement(node) {
        return node.nodeType === 1;
    }

    isInter(node) {
        // 首先是文本标签 其次内容是{{xxx}} 要分组 后期要拿到匹配的内容
        return node.nodeType === 3 && /{{(.*)}}/.test(node.textContent);
    }
}
  1. 编译插值 compile.js


/**
 * 编译器
 * */
compile(el) {
    // 遍历el树
    const childNodes = el.childNodes;
    Array.from(childNodes).forEach(node => {
        if (this.isElement(node)) {
            console.log('编译元素' + node.nodeName)
        } else if (this.isInter(node)) {
            console.log('编译插值绑定' + node.textContent)
            this.compileText(node)
        }
        // 递归子节点
        if (node.childNodes && node.childNodes.length > 0) {
            this.compile(node)
        }

    })
}

compileText(node) {
    // 获取当前匹配的数据 在MyVue实例上获取对应的值 赋值给视图
    node.textContent = this.$vm[RegExp.$1]
}
  1. 编译元素
/**
 * 编译器
 * */
compile(el) {
    // 遍历el树
    const childNodes = el.childNodes;
    Array.from(childNodes).forEach(node => {
        if (this.isElement(node)) {
            console.log('编译元素' + node.nodeName)
            this.compileElement(node)
        } else if (this.isInter(node)) {
            console.log('编译插值绑定' + node.textContent)
            this.compileText(node)
        }
        // 递归子节点
        if (node.childNodes && node.childNodes.length > 0) {
            this.compile(node)
        }

    })
}


compileElement(node){
    /**
     * 1, 获取属性列表
     * 2. 定义指令规范  jsy-xx = '123'
     * */

    const nodeAttrs = node.attributes
    Array.from(nodeAttrs).forEach(attr =>{
        const attrName = attr.name // jsy-xx
        const value = attr.value // 123

        // 判断是否是指令
        if(this.isDirective(attrName)){
            const dir = attrName.substring(4) // xx
            // 执行指令
            this[dir] && this[dir](node,value)
        }
    })

}

isDirective(attrName) {
    return attrName.indexOf('jsy-') === 0;
}

// jsy-text
text(node,exp){
    node.textContent = this.$vm[exp]
}
html(node,exp){
    node.innerHTML = this.$vm[exp]
}

依赖收集

视图中会用到data中某key，这称为依赖。同一个key可能出现多次，每次都需要收集出来用一个

Watcher(观察者)来维护它们，此过程称为依赖收集。

多个Watcher需要一个Dep来管理，需要更新时由Dep统一通知。

看下面案例，理出思路：

new Vue({

    template:

        `<div>

        <p>{{name1}}</p>

        <p>{{name2}}</p>

        <p>{{name1}}</p>

        <div>`,

    data: {

        name1: 'name1',

        name2: 'name2'

    }

});

image.png

实现思路

  1. defifineReactive时为每一个key创建一个Dep实例

  2. 初始化视图时读取某个key，例如name1，创建一个watcher1

  3. 由于触发name1的getter方法，便将watcher1添加到name1对应的Dep中

  4. 当name1更新，setter触发时，便可通过对应Dep通知其管理所有Watcher更新

创建Watcher，MyVue.js
    const watchers = [];//临时用于保存watcher测试用

// 监听器：负责更新视图

class Watcher {

constructor(vm, key, updateFn) {

// kvue实例

this.vm = vm;

// 依赖key

this.key = key;

// 更新函数

this.updateFn = updateFn;

// 临时放入watchers数组

watchers.push(this)

}

// 更新

update() {

this.updateFn.call(this.vm, this.vm[this.key]);

}

}
编写更新函数、创建watcher

compileElement(node) {
    /**
     * 1, 获取属性列表
     * 2. 定义指令规范  jsy-xx = '123'
     * */

    const nodeAttrs = node.attributes
    Array.from(nodeAttrs).forEach(attr => {
        const attrName = attr.name // jsy-xx
        const value = attr.value // 123

        // 判断是否是指令
        if (this.isDirective(attrName)) {
            const dir = attrName.substring(4) // xx

            this.update(node, value, dir)
            // 执行指令
            // this[dir] && this[dir](node, value)
        }
    })

}

compileText(node) {
    // 获取当前匹配的数据 在MyVue实例上获取对应的值 赋值给视图
    this.update(node, RegExp.$1, 'text')
}


// jsy-text
text(node, exp) {
    node.textContent = this.$vm[exp]
}

htmlUpdate(node, value) {
    node.innerHTML = value
}

// 公共的更新函数
update(node, exp, dir) {
    //初始化操作
    // 指令对应的更新函数 xxUpdate
    const fn = this[dir + 'Update']
    fn && fn(node, this.$vm[exp])

    //更新处理 封装一个更新函数 可以更新对应新的dom函数
    new Watcher(this.$vm, exp, function (val) {
        fn && fn(node, val)
    })
}

textUpdate(node, value) {
    node.textContent = value
}
声明Dep

/**Dep:依赖 管理某个Key相关的所有watcher实例
 * 和key一对一关联
 * */
class Dep {
    constructor() {
        this.deps = []
    }
    /**
     * @dep Watcher实例
     * */
    addDep(dep){
        this.deps.push(dep)
    }

    notify(){
        this.deps.forEach(dep  =>dep.update())
    }

}
创建watcher时触发getter

class Watcher {
    /**
     * @vm 当前实例
     * @key vm中data对应的key值
     * @updateFn() 当前key更新的函数
     * */
    constructor(vm,key,updateFn) {
        this.vm = vm
        this.key = key
        this.updateFn = updateFn
        // Dep.target静态属性上设置为当前watcher的实例
        Dep.target = this
        // 手动触发getter
        this.vm[this.key]
        //收集完依赖 放空Dep
        Dep.target = null
    }


    update(){
        console.log(12,'------> 12')
        this.updateFn.call(this.vm, this.vm[this.key])
    }
}
依赖收集，创建Dep实例
function defineReactive(obj, key, val) {
    observe(val)
    const dep = new Dep()
    // 对传入的obj进行访问拦截
    Object.defineProperty(obj, key, {
        get() {
            console.log('get' + key)
            // 依赖收集
            Dep.target && dep.addDep(Dep.target)
            // 闭包处理 Val不会被释放
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                // 解决赋的值是对象的情况
                // 如果传入的newVal 还是对象的话 还需要做一次响应式
                observe(newVal)
                val = newVal
                dep.notify()
            }
        },
    })
}
avatar
文章
阅读
粉丝