Vue双向绑定代码实现MVVM原理

最新推荐文章于 2022-06-07 11:03:13 发布

Bingo_BIG

最新推荐文章于 2022-06-07 11:03:13 发布

阅读量171

点赞数

分类专栏： VUE

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue三要素
响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定
模板引擎: 如何解析模板
渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        实现vue双向绑定
    </title>
    <script>
        //1、首先实现一个整体架构（VUE类、Watcher类），订阅发布者设计模式
        //2、实现MVVM中的由M到V，把模型里面的数据绑定到视图
        //3、（1）最后实现V-M，当文本框输入文本的时候，由文本事件触发更新模型中的数据
        //   （2）同时更新相对应的视图
        //发布者
        class myVue {
            constructor(options) {
                this.$data = options.data;//获取数据
                this.$el = document.querySelector(options.el);//获取对象
                this._directive = {}//存放订阅者容器
                //改变数据 是全页面刷新还是局部刷新
                //{订阅者1，订阅者2，订阅者3，订阅者4}
                //{mytext:[订阅者1，订阅者2]，mybox:[订阅者3]}
                this.Observer(this.$data);
                this.Compile(this.$el)
            }

            Observer(data) {
                for (let key in data) {
                    this._directive[key] = [];
                    let val = data[key];
                    let watch = this._directive[key];//数组
                    //this.$data里的每一个属性发生赋值 都要更新视图
                    // console.log(this._directive) this_directive含Watcher实例对象
                    Object.defineProperty(this.$data, key, {
                        get() {
                            return val;
                        },
                        set(newVal) {
                            if (newVal !== val) {
                                val = newVal;
                                //更新视图
                                // watcher实例.update
                                watch.forEach(element => {
                                    element.update();
                                });
                            }
                        }
                    })
                }
            }

            Compile(el) {

                //创建文档片段，将DOM操作放内存提高性能
                // this.$fragment = this.node2Fragment(el);
                // let nodes = this.$fragment.children;
                let nodes = el.children;
                // console.log(nodes)
                for (let i = 0; i < nodes.length; i++) {
                    let node = nodes[i];
                    if (node.children.length) {
                        this.Compile(node)
                    }
                    //怎样解析指令
                    if (node.hasAttribute('v-text')) {
                        //怎样添加订阅者
                        //首先获取订阅者名
                        let attrVal = node.getAttribute('v-text');
                        // this._directive[arrtVal].push("订阅者1"); //指令对象
                        // console.log(this._directive)
                        //订阅数据变化，绑定更新函数
                        this._directive[attrVal].push(new Watcher(node, this, attrVal, 'textContent'));
                        // console.log(this._directive)
                    }
                    if (node.hasAttribute('v-model')) {
                        let attrVal = node.getAttribute('v-model');
                        this._directive[attrVal].push(new Watcher(node, this, attrVal, 'value'));
                        node.addEventListener('input', () => {
                            // console.log("哈哈哈哈")
                            this.$data[attrVal] = node.value
                            // console.log(this.$data[attrVal])
                        })
                    }
                }
            }
            node2Fragment(el) {
                let fragment = document.createDocumentFragment()
                let child;
                while (child = el.firstChild) {
                    fragment.appendChild(child)
                }
                return fragment;
            }
        }
        //订阅者
        class Watcher {//更新视图
            constructor(el, vm, exp, attr) {
                this.el = el;
                this.vm = vm;
                this.exp = exp;
                this.attr = attr;
                this.update();//初始化视图
            }
            update() {
                // div.textContent=vue对象.$data['mytext']
                // input.value=vue对象.$data['mytext']
                this.el[this.attr] = this.vm.$data[this.exp]
            }

        }
    </script>
</head>

<body>
    <div id="app">
        <h1>双向绑定</h1>
        <div v-text="mytext">
            <div v-text="mybox"></div>
        </div>
        <div v-text="mybox"> </div>
        <input type="text" v-model="mytext">
    </div>

</body>
<script>
    var app = new myVue({
        el: '#app',
        data: {
            mytext: '青鸟软通公开课',
            mybox: 'vue实现MVVM'
        }
    });
</script>

</html>

Bingo_BIG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue双向绑定代码实现MVVM原理

Vue三要素响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定模板引擎: 如何解析模板渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染<!DOCTYPE html><html><head> <meta charset="utf-8"> <title> 实现vu...
复制链接

扫一扫