原生JavaScript之理解Vue原理

最新推荐文章于 2023-03-17 20:39:42 发布
最新推荐文章于 2023-03-17 20:39:42 发布
阅读量330 收藏 1
点赞数 1
文章标签： vue javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SarcoMao/article/details/105131115
版权

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/Mao.js"></script>
</head>

<body>
    <div id="root">
        <input type="button" M-bind:value="str" M-on:click="fn">
        <input type="text" M-model="str">
        <div M-html="str">{{str}}</div>
        <div M-text="str">{{str}}</div>
        <div>{{a}}</div>

    </div>
</body>
<script>
    new Mao({
        el: "#root",
        data: {
            str: "今天是个好日子",
            a: 1
        },
        methods: {
            fn() {
                this.str = "量变引起质变"
                console.log(11111, this.str);
            }
        }
    });
</script>

</html>

原生js部分 理解Vue原理

/*
* 数据：--》data-->methods
* 数据监听器：observer.对数据的属性进行监听，如果发生变化，会告诉发布者。
* 发布者：通知订阅者数据发生变了。（发布者会通知订阅者更新视图）
* 订阅者：视图元素订阅的数据信息。data下面的每一个数据，都会有多个订阅者。
*        订阅者的职责：当数据发生变化时，会将与数据相关的元素属性进行更新（更新视图）
*       订阅者与数据的关系是多对一的。
* 编译器：对HTML进行解析的，分析HTML，然后生成相对应的事件以及订阅者。compile
* watcher:数据监听器与编译器的一个桥梁。 实际是封装函数 优化代码
* */
function Mao(options) {
    this.$options = options;
    //获得挂载元素
    if (options.el)
        this.$el = document.querySelector(options.el);
    //获取数据
    if (options.data)
        this.$data = options.data;

    // $binds是一个对象。确定视图与数据之间的关系 。  
    // 里面的属性均是咱们的数据属性。属性的值是一个数组，数组的每一个元素即是一个订阅者

    //$binds中 ---> 键-->this.$data中的键值-->相当于一个类型
    //$binds中 ---> 值  是与每一个this.$data数据的变量str或a或b产生关联的元素更新数据的方法   
    //   当数据发生变化时-->执行方法-->更新视图
    // <input type="button" M-bind:value="str" M-on:click="fn">
    // <input type="text" M-model="str">
    // <div M-html="str"></div>    
    //指令中 有str有多个元素--> 所以  $binds中 ---> 值-> 多对一 ->键    值是一个数组储存的方法
    this.$binds = {};

    //创建数据监视器  当数据发生变化时,告诉发布者 去通知订阅者更新视图
    this.obsever();

    //创建编译器      对HTML进行解析，生成相对应的事件以及订阅者
    this.comfile();
}

Mao.prototype.obsever = function () {
    // 声明_this的原因在56行;
    let _this = this;
    for (let key in this.$data) {
        //初始化$binds   遍历 this.$data时，先初始化类型 方便储存方法
        this.$binds[key] = [];
        //储存变量，下面需要使用
        let value = this.$data[key];
        //拦截    当this.$data中数据改变会执行 set    
        //获取this.$data中数据 会执行 get 返回值
        //当改变时 会执行set方法   在此改变数据的同时去通知订阅者更新视图
        Object.defineProperty(this.$data, key, {
            get() {
                return value
            },
            set(v) {
                value = v
                //该this指向的是this.$data  
                // ×  this.$binds[key].forEach(v => v.update())

                //$binds原因详解23-29行   update方法在编译器中声明创建
                //this.$data中的数据发生变化时,通知所有订阅者更新视图
                _this.$binds[key].forEach(v => v.update(false))

            }
        })
    }

}
// 对HTML进行解析。分析HTML当中是否包含框架的指令或者其它标识{{}}
// 查看属性是否有框架当中的指令。（标签是否与DATA有关联，如果有关联，可以生成一个订阅者）
Mao.prototype.comfile = function () {
    //获得挂载元素中的所有一级子元素  
    //  *****该编译器只适用于一级子元素  如想任意嵌套实现指令,需用递归实现
    let _this = this;
    const nodes = this.$el.children;
    for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i];
        //当有M-on:click指令存在时 增加一个点击事件
        if (node.hasAttribute("M-on:click")) {
            //获取事件名
            const M_on = node.getAttribute("M-on:click")
            //增加事件   
            //this.$options.methods[M_on]指向的是该node 需要改变this指向 指向this.$data 
            node.addEventListener("click", this.$options.methods[M_on].bind(this.$data))

        }
        //当有M-bind:value指令存在时 增加一个订阅者 当this.$data数据发生改变时 视图改变
        if (node.hasAttribute("M-bind:value")) {
            //获取数据
            const M_bind = node.getAttribute("M-bind:value")  //str

            /*******************第一种写法****************/
            //增加一个订阅者  $binds{str:[订阅者]}
            // this.$binds[M_bind].push({
            //     //当数据发生变化时视图发生变化
            //     update() {
            //         node.value = _this.$data[M_bind]  _this 73行  指向构造函数
            //     }
            // })

            /*******************第二种写法**********第三种写法在最后面******/
            //因为 页面刷新的时候 绑定指令时  会直接显示  用这种方法比较好
            const watcher = {
                data: this.$data,
                key: M_bind,
                el: node,
                prop: "value",
                update() {
                    this.el[this.prop] = this.data[this.key]
                }
            }
            this.$binds[M_bind].push(watcher)
            watcher.update()

        }
        //当有M-model指令存在时 增加一个订阅者 实现双向绑定
        if (node.hasAttribute("M-model")) {
            const M_model = node.getAttribute("M-model")
            // console.log(this.$data[M_model], this.$data)
            const watcher = {
                data: this.$data,
                key: M_model,
                el: node,
                prop: "value",
                update() {
                    this.el[this.prop] = this.data[this.key]
                }
            }
            //增加一个订阅者 
            this.$binds[M_model].push(watcher);
            // console.log(watcher.update());
            watcher.update();

            //视图改变 数据改变
            node.oninput = function () {
                _this.$data[M_model] = node.value
            }
        }

        //当有M-html指令存在时 增加一个订阅者 实现双向绑定
        if (node.hasAttribute("M-html")) {
            const M_html = node.getAttribute("M-html");
            const watcher = {
                data: this.$data,
                key: M_html,
                el: node,
                prop: "innerHTML",
                update() {
                    /*解析双{{}}过程  此步可以省略*/
                    //把this.$data中的数据键值 转换成数组  方便遍历判断是否含有{{}}
                    let arrData = Object.keys(this.data)
                    let len = arrData.length
                    while (len--) {
                        //正则表达式   每次遍历 每次正则条件不同
                        const ele = new RegExp("{{" + arrData[len] + "}}")

                        // console.log(ele.test(this.el[this.prop]))
                        // 判断有没有{{}}  有就解析
                        if (ele.test(this.el[this.prop])) {
                            this.el[this.prop] = this.data[this.key]
                        }

                    }
                    //由于第一次有
                    this.el[this.prop] = this.data[this.key]
                }
            }
            this.$binds[M_html].push(watcher);
            watcher.update();
        }

        if (node.hasAttribute("M-text")) {
            const M_text = node.getAttribute("M-text");
            // const watcher = {
            //     data: this.$data,
            //     key: M_text,
            //     el: node,
            //     prop: "innerText",
            //     update() {
            //         //把this.$data的数据转成数组
            //         let arrData = Object.keys(this.data)
            //         let len = arrData.length
            //         while (len--) {
            //             const ele = new RegExp("{{" + arrData[len] + "}}")
            //             // 判断有没有{{}}  有就解析
            //             console.log(ele.test(this.el[this.prop]), this.el[this.prop])
            //             if (ele.test(this.el[this.prop])) {
            //                 this.el[this.prop] = this.data[this.key]
            //             }
            //         }
            //         this.el[this.prop] = this.data[this.key]
            //     }
            // }
            //第三种写法法  详情看204-231行
            const watcher = new Watcher(node, "innerText", this.$data, M_text)
            this.$binds[M_text].push(watcher);
            watcher.update();

        }
        //当没有指令时解析
        for (let k in this.$data) {
            const watcher = new Watcher(node, "innerText", this.$data, k)
            watcher.update();
        }


    }

}

function Watcher(el, prop, data, key) {
    this.el = el;
    this.prop = prop;
    this.data = data;
    this.key = key;
}
//默认第一次时解析{{}}  默认为true
//因为只要第一次才有{{}}   后面解析完成是没有的
Watcher.prototype.update = function (flag = true) {
    //把this.$data的数据转成数组
    if (flag) {
        let arrData = Object.keys(this.data)
        let len = arrData.length
        while (len--) {
            const ele = new RegExp("{{" + arrData[len] + "}}")
            //解析当前的数据
            const nowData = arrData[len];
            // 判断有没有{{}}  有就解析
            console.log(ele.test(this.el[this.prop]), this.el[this.prop])
            if (ele.test(this.el[this.prop])) {
                this.el[this.prop] = this.data[nowData]
            }
        }
        console.log(111)
    } else {
        this.el[this.prop] = this.data[this.key]
        console.log(222)
    }

}

  • 总结：

  • 1、实现一个数据监听器Observer,
    对数据对象的所有属性进行监听，当数据发生变化时 通过Object.defineProperty方法同时所有订阅者去更新视图

  • 2、实现一个HTML解析器Compile.
    对每个元素进行解析，根据其相对应的属性，为其增加订阅者或绑定事件

  • 3、watcher:生成订阅者–>构造函数 优化代码
    双向绑定：通过数据监听器，以及HTML解析器再加上一个订阅者生成器来完成的。
    在对数据监听时，可以根据数据的变化去通知相对应的数据订阅者，让你的订阅者更新视图。
    当视图影响到数据时，数据会发生变化。当数据变化，再次通知订阅者。

msmior
关注
第2章　原生的Vue.js
唯美清泠
11-13 1671
第2章　原生的Vue.js 所谓的原生Vue.js，就是独立的Vue.js框架，不与Webpack等框架结合使用。学习这个比较有必要，因为在后期查看官方文档时，很多概念都是用“原生Vue.js”的形式说明的，脱离了其他框架，说明起来更加简明一些。 虽然我们在做项目时极少会使用原生Vue.js，但是对于未来的学习大有好处。 2.1　极速入门 如果只从体验的角度来看，Vue.js的安装非常简单，只需要引入一个第三方的js包即可。 <script src="https://cdn.jsdel
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
10-15
通过这种方式，原生JavaScript实现了类似Vue的数据绑定，尽管没有Vue那么强大和完善，但它能帮助理解数据绑定的核心原理——观察者模式。在实际开发中，可以进一步扩展这个模型，比如添加数据劫持、依赖收集等特性，...
对VUE框架的理解
yj_xy的博客
10-30 2631
Vue.js概述 Vue 是一套用于构建用户界面的渐进式MVVM框架。那怎么理解渐进式呢？渐进式含义：强制主张最少。 Vue.js包含了声明式渲染、组件化系统、客户端路由、大规模状态管理、构建工具、数据持久化、跨平台支持等，但在实际开发中，并没有强制要求开发者之后某一特定功能，而是根据需求逐渐扩展。 Vue.js的核心库只关心视图渲染，且由于渐进式的特性，Vue.js便于与第三方库或既有项目整合。 组件机制 定义：组件就是对一个功能和样式进行独立的封装，让HTML元素得到扩展...
vue双向绑定原理（原生js实现）
huahaigo的博客
10-27 123
<!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> &lt
用原生JS搞懂VUE的响应式原理，这篇文章就够了
邓占勇的博客
03-12 3147
在实现之前我们先了解下VUE的响应式是什么； 它是Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。 博主网站：www.dzyong.top 微信公众号：《前端筱园》 原理是什么 VUE中实现响应式运用到了JavaScript中object的一个很重要的属性Object.defineProper...
聊聊对Vue.js框架的理解
飞翔༒之翼
12-28 826
分享目标： 了解 Vue.js 的组件化机制 了解 Vue.js 的响应式系统原理 了解 Vue.js 中的 Virtual DOM 及 Diff 原理 Vue.js概述 Vue 是一套用于构建用户界面的渐进式MVVM框架。那怎么理解渐进式呢？渐进式含义：强制主张最少。 Vue.js包含了声明式渲染、组件化系统、客户端路由、大规模状态管理、构建工具、数据持久化、跨平台支持等，但在实际开发中，并没有...
vue与原生app的对接交互的方法(混合开发)
10-17
在Vue中，可以通过window对象调用原生APP提供的接口对象及其回调函数，实现Vue应用与原生APP的交互。例如，Vue组件中可以通过`window.client.startScanQR`方法调用原生APP的扫码功能。 #### 3. Vue生命周期钩子 ...
基于Vue和Javascript的原生认养H5应用设计源码
最新发布
04-11
本源码提供了一个基于Vue和Javascript的原生认养H5应用设计。项目包含90个文件，其中包括52个PNG图片、16个JavaScript文件、14个Vue文件、2个JSON文件、2个HTML文件、1个Babel配置文件、1个Gitignore文件和1个...
基于Javascript和Vue的网盘系统前端设计源码
04-07
本项目是一个基于Javascript和Vue的网盘系统前端设计，包含121个文件，主要文件类型包括SVG图形、JavaScript脚本、Vue组件、图片、Markdown文档、JSON配置文件、Babel配置文件、编辑器配置文件、ESLint忽略文件和Git...
Vue双向绑定原理以及原生JS实现
Raleway的博客
03-16 808
前言 Vue的数据双向绑定原理是面试中必问的一题。每当被问到Vue数据双向绑定原理的时候，大家可能都会脱口而出：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。虽然一句话把大概原理概括了，但是其内部的实现方式还是值得深究的。 使用原生js实现一个vue的双向...
Vue 核心原理理解及原生 JS 实现
Chico_Feng的博客
01-05 335
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统，简单来说，就是在 JavaScript 中写变量，然后，可以通过一定的语法规则，直接渲染到页面上。的“小积木”构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。简单来说，其实就是将一个模块封装为一个函数（对象），然后可以快速的进行复用。同时，在 DOM 表单中用户操作修改了数据，js 中也同步接收这个数据。在 js 中修改了数据，在页面中的 DOM 直接就配合进行修改数据。3.响应式数据对象双向绑定。
JS和原生交互原理浅析
机智的皮卡丘的博客
01-10 4970
Java实现原理研究 参照Android：WebView与Javascript交互（相互调用参数、传值）http://itfish.net/article/25514.html 研究了安卓java的功能接口代码,上述地址先在Activity(java源生和js之间类似与桥梁的文件)中先使用了 webView.addJavascriptInterface(new JsInte
第十七天 JavaScript、Vue详细总结
HuanLe.的博客
03-17 3027
JS VUE详细总结
vue 和nodejs是什么关系？
buzhiheyi的博客
08-03 493
Vuex就是本地的一个store（仓库），可以理解成容器，和其它的容器不同之处是Vuex 的状态存储是响应式的，可以认为它是专门为Vue开发的，主要是解决vue绑定本地储存数据问题。Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它算是个快速开发工具，通过简单的命令行就可以搭建出一个vue结构的项目，并做了一些默认配置。还得从Vue的配套周边说起，它们就和Node.js产生的关系，Vue和它们一起配合使用的机率比较高，当然不配置使用也是可以的，看自己程序构架的选择。...
原生vue标签_Vue-初识
weixin_35122299的博客
01-09 166
1.简介Vue 是一套用于构建用户界面的渐进式框架声明式渲染 > 组件系统 > 客户端路由 > 集中式状态管理 > 项目构建官网：https://cn.vuejs.org/v2/guide/2.传统开发模式对比 原生js<div id="msg"></div> <script type="text/javascript"> v...
简单介绍一下什么是vue
weixin_44190647的博客
08-11 4332
1、 vue是什么 vue是一个渐进式的js框架 2、什么是渐进式框架 对项目参与的少 （在项目中可以使用其他的框架或者类库） 3、MVC和MVVM mvc是一个后台的软件设计模式，将程序分为三部分 m(model 模型) V（view 视图） C（controller 控制器） 模型：model 操作和数据库相关的逻辑 view :和前端相关的所有界面 controll:控制器来协调什么时候显示view 什么时候调用model mvvm:将mvc中view又细分为MVVM M model
原生Vue实现CURD
qq_41557320的博客
03-26 957
页面引入Vue和Jquery即可 <!DOCTYPE html> <html lang="en"> <head> <!-- 原生Vue实现CURD --> <meta charset="UTF-8"> <title>Document</title> <head> <s...
JavaScript、jQuery、Vue三者的区别
key__value的博客
08-29 5724
javaScript、jQuery、vue的区别，前端面试题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值