vue数据双向绑定

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        <div id="app">

            <input type="text" v-model="text" /> {{text}}

        </div>

    </body>

    <script type="text/javascript">
        //          编译函数
        function compile(node, vm) {

            var reg = /\{\{(.*)\}\}/; // 来匹配{{xxx}}中的xxx

            //如果是元素节点
            if(node.nodeType === 1) {

                var attr = node.attributes;

                //解析元素节点的所有属性

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

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

                        var name = attr[i].nodeValue //看看是与哪一个数据相关

                        node.addEventListener(‘input‘, function(e) { //将与其相关的数据改为最新值
                            vm[name] = e.target.value
                        })

                        node.value = vm.data[name]; //将data中的值赋予给该node

                        node.removeAttribute(‘v-model‘)

                    }

                }

            }

            //如果是文本节点

            if(node.nodeType === 3) {

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

                    var name = RegExp.$1; //获取到匹配的字符串

                    name = name.trim();

                    //                  node.nodeValue = vm[name]; //将data中的值赋予给该node

                    new Watcher(vm, node, name) //绑定一个订阅者
                }

            }

        }

        //          在向碎片化文档中添加节点时,每个节点都处理一下

        function nodeToFragment(node, vm) {

            var fragment = document.createDocumentFragment();

            var child;

            while(child = node.firstChild) {

                compile(child, vm);

                fragment.appendChild(child);

            }

            return fragment

        }

        //          Vue构造函数
        //      观察data中的所有属性值,注意增添了observe

        function Vue(options) {

            this.data = options.data;

            observe(this.data, this)

            var id = options.el;

            var dom = nodeToFragment(document.getElementById(id), this)

            //处理完所有节点后,重新把内容添加回去
            document.getElementById(id).appendChild(dom)

        }

        //      实现一个响应式监听属性的函数。一旦有赋新值就发生变化 

        function defineReactive(obj, key, val) {

            var dep = new Dep();

            Object.defineProperty(obj, key, {

                get: function() {

                    if(Dep.target) {

                        dep.addSub(Dep.target)

                    }

                    return val

                },
                set: function(newVal) {

                    if(newVal === val) {

                        return

                    }

                    val = newVal;

                    console.log(‘新值‘ + val);

                    //一旦更新立马通知

                    dep.notify();

                }

            })

        }

        //      实现一个观察者,对于一个实例 每一个属性值都进行观察。

        function observe(obj, vm) {

            for(let key of Object.keys(obj)) {

                defineReactive(vm, key, obj[key]);

            }

        }

        //      Watcher监听者

        function Watcher(vm, node, name) {

            Dep.target = this;

            this.vm = vm;
            this.node = node;
            this.name = name;

            this.update();

            Dep.target = null;

        }

        Watcher.prototype = {

            update() {
                this.get();
                this.node.nodeValue = this.value //更改节点内容的关键
            },
            get() {
                this.value = this.vm[this.name] //触发相应的get
            }

        }

        //      dep构造函数

        function Dep() {
            this.subs = []
        }
        Dep.prototype = {
            addSub(sub) {
                this.subs.push(sub)
            },
            notify() {
                this.subs.forEach(function(sub) {
                    sub.update();
                })
            }
        }

        var vm = new Vue({

            el: ‘app‘,

            data: {
                text: ‘赵刚‘
            }

        })
    </script>

</html>

原文地址:https://www.cnblogs.com/cs122/p/12503563.html

时间: 2024-10-07 05:32:16

vue数据双向绑定的相关文章

Vue数据双向绑定原理及简单实现

嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫

深入理解Proxy 及 使用Proxy实现vue数据双向绑定

阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.has(target, propKey) 5.construct(target, args, newTarget): 6.apply(target, object, args) 7.使用Proxy实现简单的vue双向绑定 回到顶部 1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解

Vue数据双向绑定(面试必备) 极简版

我又来吹牛逼了,这次我们简单说一下vue的数据双向绑定,我们这次不背题,而是要你理解这个流程,保证读完就懂,逢人能讲,面试必过,如果没做到,请再来看一遍,走起: 介绍双向数据之前,我们先解释几个名词: 1.setter.getter 答:首先,别误以为他们就是一会要说的get.set, 原文地址:https://www.cnblogs.com/webcabana/p/11077628.html

vue的双向绑定原理及实现

前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位: 代码:                                                                    效果图:   是不是看起来跟vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步来实现这个SelfVue.由于本文只是为了学习和分享

vue中数据双向绑定的实现原理

vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Object.defineProperty() * 对对象的属性进行 定义/修改 * */ let obj = {x:10} // 这两种方式都相对来说比较简单,直接,但是有些时候我们需要对对象的属性的修改和增加进行必要的干预 // obj.y = 20; // obj.x = 100; // obj.x =

VUE的数据双向绑定

1.概述 让我们先来看一下官网的这张数据绑定的说明图: 原理图告诉我们,a对象下面的b属性定义了getter.setter对属性进行劫持,当属性值改变是就会notify通知watch对象,而watch对象则会notify到view上对应的位置进行更新(这个地方还没讲清下面再讲),然后我们就看到了视图的更新了,反过来当在视图(如input)输入数据时,也会触发订阅者watch,更新最新的数据到data里面(图中的a.b),这样model数据就能实时响应view上的数据变化了,这样一个过程就是数据的

vue中v-model 数据双向绑定

表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type="text" v-model="msg"> <p>{{ msg }}</p> </div> <script src="vue.js"></script> <script> new

Vue实现数据双向绑定的原理

Vue实现数据双向绑定的原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调.当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter.用户看不

0 到 1 掌握:Vue 核心之数据双向绑定

实现数据的双向绑定: 1.实现一个监听器 Observer ,用来劫持并监听所有属性,如果属性发生变化,就通知订阅者: 2.实现一个订阅器 Dep,用来收集订阅者,对监听器 Observer 和 订阅者 Watcher 进行统一管理: 3.实现一个订阅者 Watcher,可以收到属性的变化通知并执行相应的方法,从而更新视图: 4.实现一个解析器 Compile,可以解析每个节点的相关指令,对模板数据和订阅器进行初始化. Reference: 0 到 1 掌握:Vue 核心之数据双向绑定 http