// js部分index.js

class Myvue{

    constructor(options){

        this.data = options.data;

        this.dep = new Dep();

        var id = options.el;

        this.observe();

        var Dom = this.VnodeContainer(document.querySelector(id));

        document.querySelector(id).appendChild(Dom);

    }

    VnodeContainer(node,flag){ // 虚拟DOM容器

        var flag = flag || document.createDocumentFragment();

        var child;

        while(child = node.firstChild){

            this.compile(child);

            flag.appendChild(child);

            this.VnodeContainer(child,flag);

        }

        return flag;

    }

    compile(node){ // 编译DOM

        let reg = /\{\{(.*)\}\}/g;

        if(node.nodeType === ){ // 元素类型

            let attr = node.attributes;

            for(let i=;i<attr.length;i++){

                if(attr[i].nodeName === 'v-model'){

                    let name = attr[i].nodeValue;

                    node.addEventListener('input',(e)=>{

                        this.data[name] = e.target.value;

                    });

                    node.value = this.data[name];

                    this.dep.add(new Watcher(this.data,node,name));

                }

            }

        }

        if(node.nodeType === ){ // text类型节点

            if(reg.test(node.nodeValue)){

                let name = RegExp.$; // 匹配到的字符串

                name = name.trim();

                node.nodeValue = this.data[name];

                this.dep.add(new Watcher(this.data,node,name));

            }

        }

    }

    observe(){

        Object.keys(this.data).forEach((el)=>{

            this.definePropertyInit(this.data,el,this.data[el]);

        });

    }

    definePropertyInit(target,key,value){ // 将data做成响应式的

        Object.defineProperty(target,key,{

            get:()=>{

                return value;

            },

            set:(newVal)=>{

                if(newVal === value) return;

                value = newVal;

                this.dep.notify(); // 更新

            }

        });

    }

}

class Dep{ // 发布者

    constructor(){

        this.subs = [];

    }

    add(sub){

        this.subs.push(sub);

    }

    notify(){

        this.subs.forEach((el)=>{

            el.update();

        });

    }

}

class Watcher{ // 观察者（订阅者）

    constructor(vm,node,name){

        Dep.global = this;

        this.vm = vm;

        this.node = node;

        this.name = name;

        this.update();

    }

    update(){

        this.get();

        switch (this.node.nodeType) {

            case : // 标签元素

                this.node.value = this.value;

                break;

            case : // 文本

                this.node.nodeValue = this.value;

                break;

            default: break;

        }

    }

    get(){

        this.value = this.vm[this.name];

    }

}

let vm = new Myvue({

    el: '#app',

    data: {

        msg: 'hello'

    }

})

html部分

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<div id="app">

<input type="text" id="input" v-model='msg'>

<div id="box">{{msg}}</div>

</div>

<script src='./index.js'></script>

</body>

</html>

myvue 模拟vue核心原理的更多相关文章

  1. FinClip 前端之 VUE 核心原理总结

    小程序框架有很多,都是支持前端JavaScript语言的,也是支持 vue.js 框架的.FinClip 小程序是兼容各家平台的.所以在学习了框架使用之后的进阶就要熟悉框架的底层原理. 1.数据响应式 ...

  2. 通过模拟Mybatis动态代理生成Mapper代理类，讲解Mybatis核心原理

    本文将通过模拟Mybatis动态代理生成Mapper代理类,讲解Mybatis原理 1.平常我们是如何使用Mapper的 先写一个简单的UserMapper,它包含一个全表查询的方法,代码如下 pub ...

  3. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  4. 19. vue的原理

    vue:原理1 => Object.defineProperty 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Obj ...

  5. SPA 路由三部曲之核心原理

    为了配合单页面 Web 应用快速发展的节奏,近几年,各类前端组件化技术栈层出不穷.通过不断的版本迭代 React.Vue 脱颖而出,成为当下最受欢迎的两大技术栈. 仅 7 个月的时间,两个技术栈的下载 ...

  6. vue - vue基础/vue核心内容（终结篇）

    今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...

  7. 模拟Vue之数据驱动2

    一.前言 在随笔“模拟Vue之数据驱动1”结尾处,我们说到如果监听的属性是个对象呢?那么这个对象中的其他属性岂不就是监听不了了吗? 如下: 倘若user中的name.age属性变化,如何知道它们变化了 ...

  8. 模拟Vue之数据驱动4

    一.前言 在"模拟Vue之数据驱动3"中,我们实现了为每个对象扩展一个$set方法,用于新增属性使用,这样就可以监听新增的属性了. 当然,数组也是对象,也可以通过$set方法实现新 ...

  9. Python面向对象篇之元类，附Django Model核心原理

    关于元类,我写过一篇,如果你只是了解元类,看下面这一篇就足够了. Python面向对象之类的方法和属性 本篇是深度解剖,如果你觉得元类用不到,呵呵,那是因为你不了解Django. 在Python中有一 ...

随机推荐

  1. Swift 4.0 字符串(String)学习

    定义字符串常量(常量只有读操作) let lString = "constant" let lString1: String = "constant" 定义字符 ...

  2. cobalt strike 快速上手

    原文:https://klionsec.github.io/2017/09/23/cobalt-strike/#menu 0x01 关于 Cobalt Strike 1 2 3 一款非常优秀的后渗透平 ...

  3. git 更换push 提交地址

    git 删除远程地址 1.找到对应项目 右键点击 GIT Bash Here 2.输入命令 git remote rm origin 3.对应项目 右键点击 GIT Sync..... 4.点击Man ...

  4. laravel的中间件创建思路

    网上有很多解析laravel中间件的实现原理,但是不知道有没有读者在读的时候不明白,作者是怎么想到要用array_reduce函数的? 本文从自己的角度出发,模拟了如果我是作者,我是怎么实现这个中间件 ...

  5. POJ1523 Tarjan求割点以及删除割点之后强连通分量的数量

    题目链接:http://poj.org/problem?id=1523 SPF:A Single Point of Failure也就是割点(一个点导致网络之间的不连通),由于给出的图是无向图,所以只 ...

  6. Java流中的map算子和flatMap算子的区别

    map算子和flatMap算子 map和flatMap都是映射(转换),那么他们之间究竟有什么区别呢? 1.我们先简单了解下map算子: @org.junit.Test public void tes ...

  7. [暴力] Educational Codeforces Round 71 (Rated for Div. 2) B. Square Filling (1207B)

    题目:http://codeforces.com/contest/1207/problem/B   B. Square Filling time limit per test 1 second mem ...

  8. html之锚点

    我命由我不由天 豆瓣:哪吒之魔童降世 哪吒之魔童降世简述 更新描述或海报 导演: 饺子 编剧: 饺子 / 易巧 / 魏芸芸 主演: 吕艳婷 / 囧森瑟夫 / 瀚墨 / 陈浩 / 绿绮 / 更多... ...

  9. C#使用反射设置属性值

    最近在Refix一个支持Excel文件导入导出功能时,发现有用到反射的相关技能.故而在网上查了些资料,通过代码调试加深下理解. class Program { static void Main(str ...

  10. 如何使用Java中的Enum类

    Java1.5 中出现了枚举类型.当一个值都在一个固定的范围内变化,那就可以使用 enum 类型来定义.比如说,一周有七天,一年有四季. 没有枚举类的时候,我们用常量来定义一组范围值的: public ...