精华内容
下载资源
问答
  • Vue基本原理
    千次阅读
    2020-06-14 16:30:43

    经过几天的研究,发现学习框架的底层技术,收获颇丰,相比只学习框架的使用要来的合算;如果工作急需,快速上手应用,掌握如何使用短期内更加高效;如果有较多的时间来系统学习,建议研究一下框架的等层技术、原理。

    Vue、React、Angular三大框架对比

    1、Vue

    Vue是尤雨溪编写的一个构建数据驱动的Web界面的库,准确来说不是一个框架,它聚焦在V(view)视图层。

    它有以下的特性:

    1.轻量级的框架

    2.双向数据绑定

    3.指令

    4.插件化

    优点:

    1. 简单:官方文档很清晰,比 Angular 简单易学。
    2. 快速:异步批处理方式更新 DOM。
    3. 组合:用解耦的、可复用的组件组合你的应用程序。
    4. 紧凑:~18kb min+gzip,且无依赖。
    5. 强大:表达式 无需声明依赖的可推导属性 (computed properties)。
    6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。

    缺点:

    1. 新生儿:Vue.js是一个新的项目,没有angular那么成熟。
    2. 影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
    3. 不支持IE8

    2、React

    React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

    它有以下的特性:

    1.声明式设计:React采用声明范式,可以轻松描述应用。

    2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。

    3.灵活:React可以与已知的库或框架很好地配合。

    优点:

    1. 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
    2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。
    3. 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。
    4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。
    5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。
    6. 兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

    缺点:

    1. React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。

    3、Angular

    Angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中。

    它有以下的特性:

    1.良好的应用程序结构

    2.双向数据绑定

    3.指令

    4.HTML模板

    5.可嵌入、注入和测试

    优点:

    1. 模板功能强大丰富,自带了极其丰富的angular指令。
    2. 是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;
    3. 自定义指令,自定义指令后可以在项目中多次使用。
    4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。
    5. angularjs是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。

    缺点:

    1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
    2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
    3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
    4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
    5. DI 依赖注入 如果代码压缩需要显示声明.

    通过以上相比较,您更加倾向于学习哪一个呢?

    正题:Vue的基本原理

    Vue的原理图

    1、建立虚拟DOM Tree,通过document.createDocumentFragment(),遍历指定根节点内部节点,根据{{ prop }}、v-model等规则进行compile;
    2、通过Object.defineProperty()进行数据变化拦截;
    3、截取到的数据变化,通过发布者-订阅者模式,触发Watcher,从而改变虚拟DOM中的具体数据;
    4、通过改变虚拟DOM元素值,从而改变最后渲染dom树的值,完成双向绑定

    完成数据的双向绑定在于Object.defineProperty()

    Vue双向绑定的实现

    1、简易双绑

    首先,我们把注意力集中在这个属性上:Object.defineProperty。

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
    语法:Object.defineProperty(obj, prop, descriptor)

    什么叫做,定义或修改一个对象的新属性,并返回这个对象呢?

    var obj = {};
    Object.defineProperty(obj,'hello',{
      get:function(){
        //我们在这里拦截到了数据
        console.log("get方法被调用");
      },
      set:function(newValue){
        //改变数据的值,拦截下来额
        console.log("set方法被调用");
      }
    });
    obj.hello//输出为“get方法被调用”,输出了值。
    obj.hello = 'new Hello';//输出为set方法被调用,修改了新值

    通过以上方法可以看出,获取对象属性值触发get、设置对象属性值触发set,因此我们可以想象到数据模型对象的属性设置和读取可以驱动view层的数据变化,view的数据变化传递给数据模型对象,在set里面可以做很多事情。

    在这基础上,我们可以做到数据的双向绑定:

        let obj = {};
        Object.defineProperty(obj, 'name', {
            set: function(newValue){
                console.log('触发setter');
                document.querySelector('.text-box').innerHTML = newValue;
                document.querySelector('.inp-text').value = newValue;
            },
            get: function(){
                console.log('触发getter');
            }
        });
    
        document.querySelector('.inp-text').addEventListener('keyup', function(e){
            obj.name = e.target.value;
        }, false);

    html

    <input class="inp-text" type="text">
    <div class="text-box"></div>

    clipboard.png

    clipboard.png

    以上只是vue的核心思想,通过对象底层属性的set和get进行数据拦截,vue的虚拟dom又是怎么实现的,且看以下分解。

    2、虚拟DOM树

    创建虚拟DOM:
    var frag = document.createDocumentFragment();
    view层的{{msg}}和v-model的编译规则如下:
    html:

    <div id="container">
        {{ msg }}<br>
        <input class="inp-text" type="text" v-model="inpText">
        <div class="text-box">
            <p class="show-text">{{ msg }}</p>
        </div>
    </div>

    view层做了多层嵌套,这样测试更多出现错误的可能性。

        var container = document.getElementById('container');
        //这里我们把vue实例中的data提取出来,更加直观
        var data = {
            msg: 'Hello world!',
            inpText: 'Input text'
        };
        var fragment = virtualDom(container, data);
        container.appendChild(fragment);
    
        //虚拟dom创建方法
        function virtualDom(node, data){
            let frag = document.createDocumentFragment();
            let child;
            // 遍历dom节点
            while(child = node.firstChild){
                compile(child, data);
                frag.appendChild(child);
            }
            return frag;
        }
         
        //编译规则
        function compile(node, data){
            let reg = /\{\{(.*)\}\}/g;
            if(node.nodeType === 1){ // 标签
                let attr = node.attributes;
                for(let i = 0, len = attr.length; i < len; i++){
                    // console.log(attr[i].nodeName, attr[i].nodeValue);
                    if(attr[i].nodeName === 'v-model'){
                        let name = attr[i].nodeValue;
                        node.value = data[name];
                    }
                }
                if(node.hasChildNodes()){
                    node.childNodes.forEach((item) => {
                        compile(item, data); // 递归
                    });
                }
            }
            if(node.nodeType === 3){ // 文本节点
                if(reg.test(node.nodeValue)){
                    let name = RegExp.$1;
                    name = name.trim();
                    node.nodeValue = data[name];
                }
            }
        }

    解释:
    1、通过virtualDom创建虚拟节点,将目标盒子内所有子节点添加到其内部,注意这里只是子节点;
    2、子节点通过compile进行编译,a:如果节点为元素,其nodeType = 1,b:如果节点为文本,其nodeType = 3,具体可以查看详情http://www.w3school.com.cn/js...
    3、如果第二步子节点仍有子节点,通过hasChildNodes()来确认,如果有递归调用compile方法。

    clipboard.png

    3、响应式原理
    核心思想:Object.defineProperty(obj, key, {set, get})

        function defineReact(obj, key, value){
            Object.defineProperty(obj, key, {
                set: function(newValue){
                    console.log(`触发setter`);
                    value = newValue;
                    console.log(value);
                },
                get: function(){
                    console.log(`触发getter`);
                    return value;
                }
            });
        }

    这里是针对data数据的属性的响应式定义,但是如何去实现vue实例vm绑定data每个属性,通过以下方法:

        function observe(obj, vm){
            Object.keys(obj).forEach((key) => {
                defineReact(vm, key, obj[key]);
            })
        }

    vue的构造函数:

        function Vue(options){
            this.data = options.data;
            let id = options.el;
    
            observe(this.data, this); // 将每个data属相绑定到Vue的实例上this
        }

    通过以上我们可以实现Vue实例绑定data属性。

    如何去实现Vue,通常我们实例化Vue是这样的:

        var vm = new Vue({
            el: 'container',
            data: {
                msg: 'Hello world!',
                inpText: 'Input text'
            }
        });
        
        console.log(vm.msg); // Hello world!
        console.log(vm.inpText); // Input text

    实现以上效果,我们必须在vue内部初始化虚拟Dom

         function Vue(options){
            this.data = options.data;
            let id = options.el;
    
            observe(this.data, this); // 将每个data属相绑定到Vue的实例上this
            
            //------------------------添加以下代码
            let container = document.getElementById(id);
            let fragment = virtualDom(container, this); // 这里通过vm对象初始化
            container.appendChild(fragment);
            
        }

    这是我们再对Vue进行实例化,则可以看到以下页面:

    clipboard.png

    至此我们实现了dom的初始化,下一步我们在v-model元素添加监听事件,这样就可以通过view层的操作来修改vm对应的属性值。在compile编译的时候,可以准确的找到v-model属相元素,因此我们把监听事件添加到compile内部。

        function compile(node, data){
            let reg = /\{\{(.*)\}\}/g;
            if(node.nodeType === 1){ // 标签
                let attr = node.attributes;
                for(let i = 0, len = attr.length; i < len; i++){
                    // console.log(attr[i].nodeName, attr[i].nodeValue);
                    if(attr[i].nodeName === 'v-model'){
                        let name = attr[i].nodeValue;
                        node.value = data[name];
    
                        // ------------------------添加监听事件
                        node.addEventListener('keyup', function(e){
                            data[name] = e.target.value;
                        }, false);
                        // -----------------------------------
                    }
                }
                if(node.hasChildNodes()){
                    node.childNodes.forEach((item) => {
                        compile(item, data);
                    });
                }
            }
            if(node.nodeType === 3){ // 文本节点
                if(reg.test(node.nodeValue)){
                    let name = RegExp.$1;
                    name = name.trim();
                    node.nodeValue = data[name];
                }
            }
        }

    这一步我们操作页面输入框,可以看到以下效果,证明监听事件添加有效。
    clipboard.png

    到这里我们已经实现了MVVM的,即Model -> vm -> View || View -> vm -> Model 中间桥梁就是vm实例对象。

    4、观察者模式原理

    观察者模式也称为发布者-订阅者模式,这样说应该会更容易理解,更加形象。
    订阅者:

        var subscribe_1 = {
            update: function(){
                console.log('This is subscribe_1');
            }
        };
        var subscribe_2 = {
            update: function(){
                console.log('This is subscribe_2');
            }
        };
        var subscribe_3 = {
            update: function(){
                console.log('This is subscribe_3');
            }
        };

    三个订阅者都有update方法。

    发布者:

        function Publisher(){
            this.subs = [subscribe_1, subscribe_2, subscribe_3]; // 添加订阅者
        }
        Publisher.prototype = {
            constructor: Publisher,
            notify: function(){
                this.subs.forEach(function(sub){
                    sub.update();
                })
            }
        };

    发布者通过notify方法对订阅者广播,订阅者通过update来接受信息。
    实例化publisher:

        var publisher = new Publisher();
        publisher.notify();

    clipboard.png

    这里我们可以做一个中间件来处理发布者-订阅者模式:

        var publisher = new Publisher();
        var middleware = {
            publish: function(){
                publisher.notify();
            }
        };
        middleware.publish();

    5、观察者模式嵌入
    到这一步,我们已经实现了:
    1、修改v-model属性元素 -> 触发修改vm的属性值 -> 触发set
    2、发布者添加订阅 -> notify分发订阅 -> 订阅者update数据 
    接下来我们要实现:更新视图,同时把订阅——发布者模式嵌入。

    发布者:

        function Publisher(){
            this.subs = []; // 订阅者容器
        }
        Publisher.prototype = {
            constructor: Publisher,
            add: function(sub){
                this.subs.push(sub); // 添加订阅者
            },
            notify: function(){
                this.subs.forEach(function(sub){
                    sub.update(); // 发布订阅
                });
            }
        };

    订阅者:
    考虑到要把订阅者绑定data的每个属性,来观察属性的变化,参数:name参数可以有compile中获取的name传参。由于传入的node节点类型分为两种,我们可以分为两订阅者来处理,同时也可以对node节点类型进行判断,通过switch分别处理。

        function Subscriber(node, vm, name){
            this.node = node;
            this.vm = vm;
            this.name = name;
        }
        Subscriber.prototype = {
            constructor: Subscriber,
            update: function(){
                let vm = this.vm;
                let node = this.node;
                let name = this.name;
                switch(this.node.nodeType){
                    case 1:
                        node.value = vm[name];
                        break;
                    case 3:
                        node.nodeValue = vm[name];
                        break;
                    default:
                        break;
                }
            }
        };

    我们要把订阅者添加到compile进行虚拟dom的初始化,替换掉原来的赋值:

        function compile(node, data){
            let reg = /\{\{(.*)\}\}/g;
            if(node.nodeType === 1){ // 标签
                let attr = node.attributes;
                for(let i = 0, len = attr.length; i < len; i++){
                    // console.log(attr[i].nodeName, attr[i].nodeValue);
                    if(attr[i].nodeName === 'v-model'){
                        let name = attr[i].nodeValue;
                        // --------------------这里被替换掉
                        // node.value = data[name]; 
                        new Subscriber(node, data, name);
    
                        // ------------------------添加监听事件
                        node.addEventListener('keyup', function(e){
                            data[name] = e.target.value;
                        }, false);
                    }
                }
                if(node.hasChildNodes()){
                    node.childNodes.forEach((item) => {
                        compile(item, data);
                    });
                }
            }
            if(node.nodeType === 3){ // 文本节点
                if(reg.test(node.nodeValue)){
                    let name = RegExp.$1;
                    name = name.trim();
                    // ---------------------这里被替换掉
                    // node.nodeValue = data[name];
                    new Subscriber(node, data, name);
                }
            }
        }

    既然是对虚拟dom编译初始化,Subscriber要初始化,即Subscriber.update,因此要对Subscriber作进一步的处理:

       function Subscriber(node, vm, name){
            this.node = node;
            this.vm = vm;
            this.name = name;
            
            this.update();
        }
        Subscriber.prototype = {
            constructor: Subscriber,
            update: function(){
                let vm = this.vm;
                let node = this.node;
                let name = this.name;
                switch(this.node.nodeType){
                    case 1:
                        node.value = vm[name];
                        break;
                    case 3:
                        node.nodeValue = vm[name];
                        break;
                    default:
                        break;
                }
            }
        };

    发布者添加到defineReact,来观察数据的变化:

        function defineReact(data, key, value){
            let publisher = new Publisher();
            Object.defineProperty(data, key, {
                set: function(newValue){
                    console.log(`触发setter`);
                    value = newValue;
                    console.log(value);
                    publisher.notify(); // 发布订阅
                },
                get: function(){
                    console.log(`触发getter`);
                    if(Publisher.global){ //这里为什么来添加判断条件,主要是让publisher.add只执行一次,初始化虚拟dom编译的时候来执行
                        publisher.add(Publisher.global); // 添加订阅者
                    }
                    return value;
                }
            });
        }

    这一步将订阅者添加到发布者容器内,对订阅者改造:

      function Subscriber(node, vm, name){
            Publisher.global = this;
            this.node = node;
            this.vm = vm;
            this.name = name;
            
            this.update();
            Publisher.global = null;
        }
        Subscriber.prototype = {
            constructor: Subscriber,
            update: function(){
                let vm = this.vm;
                let node = this.node;
                let name = this.name;
                switch(this.node.nodeType){
                    case 1:
                        node.value = vm[name];
                        break;
                    case 3:
                        node.nodeValue = vm[name];
                        break;
                    default:
                        break;
                }
            }
        };

    6、完整效果

    html:

    <div id="container">
        {{ msg }}<br>
        <input class="inp-text" type="text" v-model="inpText">
        <p>{{ inpText }}</p>
        <div class="text-box">
            <p class="show-text">{{ msg }}</p>
        </div>
    </div>

    javascript:

        function Publisher(){
            this.subs = [];
        }
        Publisher.prototype = {
            constructor: Publisher,
            add: function(sub){
                this.subs.push(sub);
            },
            notify: function(){
                this.subs.forEach(function(sub){
                    sub.update();
                });
            }
        };
    
        function Subscriber(node, vm, name){
            Publisher.global = this;
            this.node = node;
            this.vm = vm;
            this.name = name;
            this.update();
            Publisher.global = null; // 清空
        }
        Subscriber.prototype = {
            constructor: Subscriber,
            update: function(){
                let vm = this.vm;
                let node = this.node;
                let name = this.name;
                switch(this.node.nodeType){
                    case 1:
                        node.value = vm[name];
                        break;
                    case 3:
                        node.nodeValue = vm[name];
                        break;
                    default:
                        break;
                }
            }
        };
    
        function virtualDom(node, data){
            let frag = document.createDocumentFragment();
            let child;
            // 遍历dom节点
            while(child = node.firstChild){
                compile(child, data);
                frag.appendChild(child);
            }
            return frag;
        }
    
        function compile(node, data){
            let reg = /\{\{(.*)\}\}/g;
            if(node.nodeType === 1){ // 标签
                let attr = node.attributes;
                for(let i = 0, len = attr.length; i < len; i++){
                    // console.log(attr[i].nodeName, attr[i].nodeValue);
                    if(attr[i].nodeName === 'v-model'){
                        let name = attr[i].nodeValue;
                        // node.value = data[name];
    
                        // ------------------------添加监听事件
                        node.addEventListener('keyup', function(e){
                            data[name] = e.target.value;
                        }, false);
    
                        new Subscriber(node, data, name);
    
                    }
                }
                if(node.hasChildNodes()){
                    node.childNodes.forEach((item) => {
                        compile(item, data);
                    });
                }
            }
            if(node.nodeType === 3){ // 文本节点
                if(reg.test(node.nodeValue)){
                    let name = RegExp.$1;
                    name = name.trim();
                    // node.nodeValue = data[name];
    
                    new Subscriber(node, data, name);
                }
            }
        }
    
    
        function defineReact(data, key, value){
            let publisher = new Publisher();
            Object.defineProperty(data, key, {
                set: function(newValue){
                    console.log(`触发setter`);
                    value = newValue;
                    console.log(value);
                    publisher.notify(); // 发布订阅
                },
                get: function(){
                    console.log(`触发getter`);
                    if(Publisher.global){
                        publisher.add(Publisher.global); // 添加订阅者
                    }
                    return value;
                }
            });
        }
    
    
        // 将data中数据绑定到vm实例对象上
        function observe(data, vm){
            Object.keys(data).forEach((key) => {
                defineReact(vm, key, data[key]);
            })
        }
    
    
        function Vue(options){
            this.data = options.data;
            let id = options.el;
    
            observe(this.data, this); // 将每个data属相绑定到Vue的实例vm上
    
            //------------------------
            let container = document.getElementById(id);
            let fragment = virtualDom(container, this); // 这里通过vm对象初始化
            container.appendChild(fragment);
    
        }
    
    
        var vm = new Vue({
            el: 'container',
            data: {
                msg: 'Hello world!',
                inpText: 'Input text'
            }
        });

    未完待续......

    更多相关内容
  • 我理解的单页面工作原理是通过浏览器URL的#后面的hash变化就会引起页面变化的特性来把页面分成不同的小模块,然后通过修改hash来让页面展示我们想让看到的内容。 那么为什么hash的不同,为什么会影响页面的展示呢?...
  • vue实现原理

    万次阅读 多人点赞 2018-06-29 12:10:31
    转载:https://blog.csdn.net/lishanleilixin/article/details/79360244一 理解vue的核心理念使用vue会让人感到...倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话:Vue.js(读音 /vjuː/,类似于 vie...

    转载:https://blog.csdn.net/lishanleilixin/article/details/79360244

    一  理解vue的核心理念

    使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全.

    倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话:

    Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。

    这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念.

    那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前端开发中,为了完成某个功能,我们需要通过js在HTML页面中获得dom节点,随后获得dom节点中的文本内容或者在dom节点上添加事件,进行一系列的程序操作,但是,如果任务量很大的情况下,代码会随着业务的增加而变得臃肿和混乱,在现实的开发中,负责的逻辑和巨大的开发量,是原生js无法完成的.

    这个时候,开发人员将js代码分为了三个板块,数据(Model),逻辑控制(*),视图(View),数据板块只负责数据部分,视图板块负责更改样式,逻辑控制负责联系视图板块和数据板块,这样子有很大的好处,当需求发生变动时,只需要修改对应的板块就好

    这种开发模式,就是所谓的MV*结构,我们现在了解的MVC,MVP,MVVM都是MV*的衍生物,对比这几种框架模式,我们会总结出来一个本质的特点,那就是这些开发模式都是让视图和数据间不会发生直接联系.对比用原生JS获得dom的操作,你会发现原生dom流其实是将dom作为数据,从dom中获得Model,随后又更改dom来实现更新视图,视图和模型其实混在一起,所以代码自然混乱,不易维护.

    在具有响应式系统的Vue实例中,DOM状态只是数据状态的一个映射 即 UI=VM(State) ,当等式右边State改变了,页面展示部分UI就会发生相应改变。很多人初次上手Vue时,觉得很好用,原因就是这个.不过,Vue的核心定位并不是一个框架,设计上也没有完全遵循MVVM模式,可以看到在图中只有State和View两部分, Vue的核心功能强调的是状态到界面的映射,对于代码的结构组织并不重视, 所以单纯只使用其核心功能时,它并不是一个框架,而更像一个视图模板引擎,这也是为什么Vue开发者把其命名成读音类似于view的原因。

    上文提到,Vue的核心的功能,是一个视图模板引擎,但这不是说Vue就不能成为一个框架。如下图所示,这里包含了Vue的所有部件,在声明式渲染(视图模板引擎)的基础上,我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是,这些功能相互独立,你可以在核心功能的基础上任意选用其他的部件,不一定要全部整合在一起。可以看到,所说的“渐进式”,其实就是Vue的使用方式,同时也体现了Vue的设计的理念.

    二 探讨vue的双向绑定原理及实现

      成果图

    下面介绍两个内容

      1.vue双向绑定的原理

      2.实现简易版vue的过程,包括声明式数据渲染及一些简单的指令


    vue双向绑定原理

    vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作,在数据变动时做你想要做的事情.我们可以看一下通过控制台梳齿一个定义在vue初始化数据上的对象是什么

    var vm = new Vue({
        data: {
            test : {
                a: 1
            }
        },
        created: function () {
            console.log(this.test);
        }
    })

    打印结果:

    在打印结果中我们可以看到属性a有两个方法:get和set.为什么会有这两个方法呢,这正是vue通过Object.defineProperty()进行数据劫持的.

    Object.defineProperty()这个方法是做什么的呢?文档上是这样说的

    简单的说,他可以控制一个对象属性的一些特有操作,比如读写权,是否可枚举,这里我们主要研究它的get和set方法,如果想清楚更多用法,可以参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

    我们可以很轻松的打印出一个对象的属性数据:

    var Book = {
      name: '人性的弱点'
    };
    console.log(Book.name);  // 人性的弱点

    但是如果在执行console.log(Book.name)的同时,给书的书名增加一个书名号呢,这个时候应该怎么做,这时候我们就需要用到Object.defineProperty( )了:

    //在console.log(book.name)同时,直接给书加一个书号
    var Book = {};
    var name = '';
    Object.defineProperty(Book,'name',{
        set:function(value) {
            name = value;
            console.log('你取了一个书名叫:'+value);
        },
        get:function() {
            console.log('get方法被监听到');
            return '<'+name+'>';
        }
    });
    Book.name = '人性的弱点';  //你取了一个书名叫:人性的弱点
    console.log(Book.name); //<人性的弱点>

    通过Object.defineProperty( )这个方法设置了Book对象的name属性,对其get和set方法进行重写操作,get方法在获得name属性时被调用,set方法在设置name属性时被触发.所以在执行Book.name='人性的弱点' 这个语句时调用set方法,输出你取了一个书名叫:人性的弱点.当调用console.log(Book.name)时触发get方法,输出<人性的弱点>,如果在代码中加入这句话时,会打印出什么呢?

    console.log(Book)

    结果如下:

    与上面vue打印数据进行对比非常类似,说明vue确实是通过这种方式进行数据劫持的.那么什么是发布者-订阅者模式呢??

    订阅者和发布者模式,通常用于消息队列中.一般有两种形式来实现消息队列,一是使用生产者和消费者来实现,二是使用订阅者-发布者模式来实现,其中订阅者和发布者实现消息队列的方式,就会用订阅者模式.

    打个比方,所谓的订阅者,就像我们在日常生活中订阅报纸一样,在订阅报纸的时候,通常都得需要在报社或者一些中介机构进行注册,当有新版的报纸发刊的时候,邮递员就需要向订阅该报纸的人,依次发放报纸.

    所谓的订阅者,就像我们在日常生活中,订阅报纸一样。我们订阅报纸的时候,通常都得需要在报社或者一些中介机构进行注册。当有新版的报纸发刊的时候,邮递员就需要向订阅该报纸的人,依次发放报纸。

    所有如果用代码实现该模式,需要进行两个步骤:

    1、初始化发布者、订阅者。
    2、订阅者需要注册到发布者,发布者发布消息时,依次向订阅者发布消息。

    订阅者注册

    发布者发布消息

    那么接下来我们将通过vue原理实现一个简单的mvvm双向绑定的demo

    思路分析

    要想实现mvvm,主要包含两个方面,视图变化更新数据,数据变化更新视图.

    view变化更新data其实可以通过事件监听实现,比如input标签监听input事件,所有我们着重分析data变化更新view.

    data变化更新view的重点是如何知道view什么时候变化了,只要知道什么时候view变化了,那么接下来的就好处理了.这个时候我们上文提到的Object.defineProperty( )就起作用了.通过Object.defineProperty( )对属性设置一个set函数,当属性变化时就会触发这个函数,所以我们只需要将一些更新的方法放在set函数中就可以实现data变化更新view了

    实现过程

    我们已经知道如何实现数据的双向绑定了, 那么首先要对数据进行劫持监听,所以我们首先要设置一个监听器Observer,用来监听所有的属性,当属性变化时,就需要通知订阅者Watcher,看是否需要更新.因为属性可能是多个,所以会有多个订阅者,故我们需要一个消息订阅器Dep来专门收集这些订阅者,并在监听器Observer和订阅者Watcher之间进行统一的管理.以为在节点元素上可能存在一些指令,所以我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令初始化成一个订阅者Watcher,并替换模板数据并绑定相应的函数,这时候当订阅者Watcher接受到相应属性的变化,就会执行相对应的更新函数,从而更新视图.

    整理上面的思路,我们需要实现三个步骤,来完成双向绑定:

    1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
     
    2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
     
    3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

    流程图如下:

    1.实现一个监听器Observer

    数据监听器的核心方法就是Object.defineProperty( ),通过遍历循环对所有属性值进行监听,并对其进行Object.defineProperty( )处理,那么代码可以这样写:

    //对所有属性都要蒋婷,递归遍历所有属性
    function defineReactive(data,key,val) {
        observe(val);  //递归遍历所有的属性
        Object.defineProperty(data,key,{
            enumerable:true,         //当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。
            configurable:true,       //当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中
            get:function() {
                return val;
            },
            set:function(newVal) {
                val = newVal;
                console.log('属性'+key+'已经被监听,现在值为:"'+newVal.toString()+'"');
            }
        })
    }
     
    function observe(data) {
        if(!data || typeof data !== 'object') {
            return;
        }
        Object.keys(data).forEach(function(key){
            defineReactive(data,key,data[key]);
        });
    }
     
    var library = {
        book1: {
            name: ''
        },
        book2: ''
    };
    observe(library);
    library.book1.name = 'vue权威指南'; // 属性name已经被监听了,现在值为:“vue权威指南”
    library.book2 = '没有此书籍';  // 属性book2已经被监听了,现在值为:“没有此书籍”

    通过observe()方法进行遍历向下找到所有的属性,并通过defineReactive()方法进行数据劫持监听.

    在上面的思路中,我们需要一个可以容纳消息订阅者的消息订阅器Dep,订阅器主要收集消息订阅者,然后在属性变化时执行相应订阅者的更新函数,那么消息订阅器Dep需要有一个容器,用来存放消息订阅者.我们将上面的监听器Observer稍微修改一下:

    function defineReactive(data,key,val) {
        observe(val);
        var dep = new Dep();
        Object.defineProperty(data, key, {
            enumerable: true,
            configurable: true,
            get: function() {
                if (是否需要添加订阅者) {    //Watcher初始化触发
                    dep.addSub(watcher); // 在这里添加一个订阅者
                }
                return val;
            },
            set: function(newVal) {
                if (val === newVal) {
                    return;
                }
                val = newVal;
                console.log('属性' + key + '已经被监听了,现在值为:“' + newVal.toString() + '”');
                dep.notify(); // 如果数据变化,通知所有订阅者
            }
        });
    }
     
    function observe(data) {
        if(!data || typeof data !== 'object') {
            return;
        }
        Object.keys(data).forEach(function(key){
            defineReactive(data,key,data[key]);
        });
    }
     
    function Dep() {
        this.subs = [];
    }
     
    //prototype 属性使您有能力向对象添加属性和方法
    //prototype这个属性只有函数对象才有,具体的说就是构造函数具有.只要你声明定义了一个函数对象,这个prototype就会存在
    //对象实例是没有这个属性
    Dep.prototype = {                        
        addSub:function(sub) {
            this.subs.push(sub);
        },
        notify:function() {
            this.subs.forEach(function(sub) {
                sub.update();        //通知每个订阅者检查更新
            })
        }
    }
    Dep.target = null;

    在代码中,我们将订阅器Dep添加一个订阅者设计在get里面,这是为了让Watcher在初始化时触发,因此判断是否需要需要添加订阅者,至于具体实现的方法,我们在下文中深究.在set方法中,如果函数变化,就会通知所有的订阅者,订阅者们将会执行相对应的更新函数,到目前为止,一个比较完善的Observer已经成型了,下面我们要写订阅者Watcher.

    2.实现订阅者Watcher

    根据我们的思路,订阅者Wahcher在初始化时要将自己添加到订阅器Dep中,那么如何进行添加呢?

    我们已经知道监听器Observer是在get函数中执行了添加订阅者的操作的,所以我们只需要在订阅者Watcher在初始化时触发相对应的get函数来执行添加订阅者的操作即可.那么怎么触发对应的get函数呢?我们只需要获取对应的属性值,就可以通过Object.defineProperty( )触发对应的get了.

    在这里需要注意一个细节,我们只需要在订阅者初始化时才执行添加订阅者,所以我们需要一个判断,在Dep.target上缓存一下订阅者,添加成功后去除就行了,代码如下:

    function Watcher(vm,exp,cb) {
        this.vm = vm;    //指向SelfVue的作用域
        this.exp = exp;  //绑定属性的key值
        this.cb = cb;    //闭包
        this.value = this.get();
    }
     
    Watcher.prototype = {
        update:function() {
            this.run();
        },
        run:function() {
            var value = this.vm.data[this.exp];
            var oldVal = this.value;
            if(value !== oldVal) {
                this.value = value;
                this.cb.call(this.vm,value,oldVal);
            }
        },
        get:function() {
            Dep.target = this;                   // 缓存自己
            var value = this.vm.data[this.exp];  // 强制执行监听器里的get函数
            Dep.target = null;                   // 释放自己
            return value;
        }
    }

    这个时候我们需要对监听器Observer中的defineReactive()做稍微的调整:

    function defineReactive(data,key,val) {
        observe(val);
        var dep = new Dep();
        Object.defineProperty(data, key, {
            enumerable: true,
            configurable: true,
            get: function() {
                if(Dep.target) {   //判断是否需要添加订阅者
                     dep.addSub(Dep.target);
                }
                return val;
            },
            set: function(newVal) {
                if (val === newVal) {
                    return;
                }
                val = newVal;
                console.log('属性' + key + '已经被监听了,现在值为:“' + newVal.toString() + '”');
                dep.notify(); // 如果数据变化,通知所有订阅者
            }
        });
    }

    到目前为止,一个简易版的Watcher已经成型了,我们只需要将订阅者Watcher和监听器Observer关联起来,就可以实现一个简单的双向绑定.因为这里还没有设计指令解析器,所以对于模板数据我们都进行写死处理,假设模板上有一个节点元素,且id为'name',并且双向绑定的绑定变量也是'name',且是通过两个大双括号包起来(暂时没有什么用处),模板代码如下:

    <body>
        <h1 id="name">{{name}}</h1>
    </body>

    我们需要定义一个SelfVue类,来实现observer和watcher的关联,代码如下:

    //将Observer和Watcher关联起来
    function SelfVue(data,el,exp) {
        this.data = data;
        observe(data);
        el.innerHTML = this.data[exp];
        new Watcher(this,exp,function(value) {
            el.innerHTML = value;
        });
        return this;
    }

    然后在页面上new一个SelfVue,就可以实现双向绑定了:

    <body>
        <h1 id="name"{{name}}></h1>
    </body>
     
    <script src="../js/observer.js"></script>
    <script src="../js/Watcher.js"></script>
    <script src="../js/SelfVue.js"></script>
     
    <script>
         var ele = document.querySelector('#name');
         var selfVue = new SelfVue({
             name:'hello world'
         },ele,'name');
     
         window.setTimeout(function() {
             console.log('name值改变了');
             selfVue.name = 'byebye world';
         },2000);
    </script>
    

    这时我们打开页面,显示的是'hello world',2s后变成了'byebye world',一个简单的双向绑定实现了.

    对比vue,我们发现了有一个问题,我们在为属性赋值的时候形式是: '  selfVue.data.name = 'byebye world'  ',而我们理想的形式是:'  selfVue.name = 'byebye world'  ',那么怎么实现这种形式呢,只需要在new SelfVue时做一个代理处理,让访问SelfVue的属性代理为访问selfVue.data的属性,原理还是使用Object.defineProperty( )对属性在包装一层.代码如下:

    function SelfVue(data,el,exp) {
        var self = this;
        this.data = data;
        //Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组
        Object.keys(data).forEach(function(key) {
            self.proxyKeys(key);     //绑定代理属性
        });
        observe(data);
        el.innerHTML = this.data[exp];   // 初始化模板数据的值
        new Watcher(this,exp,function(value) {
            el.innerHTML = value;
        });
        return this;
    }
     
    SelfVue.prototype = {
        proxyKeys:function(key) {
            var self = this;
            Object.defineProperty(this,key,{
                enumerable:false,
                configurable:true,
                get:function proxyGetter() {
                    return self.data[key];
                },
                set:function proxySetter(newVal) {
                    self.data[key] = newVal;
                } 
            });
        }
    }

    这样我们就可以用理想的形式改变模板数据了.

    3.实现指令解析器Compile

    再上面的双向绑定demo中,我们发现整个过程都没有解析dom节点,而是固定某个节点进行替换数据,所以接下来我们要实现一个解析器Compile来解析和绑定工作,分析解析器的作用,实现步骤如下:

    1.解析模板指令,并替换模板数据,初始化视图
     
    2.将模板指令对应的节点绑定对应的更新函数,初始化相应的订阅器

    为了解析模板,首先要获得dom元素,然后对含有dom元素上含有指令的节点进行处理,这个过程对dom元素的操作比较繁琐,所以我们可以先建一个fragment片段,将需要解析的dom元素存到fragment片段中在做处理:

    nodeToFragment:function(el) {
            var fragment = document.createDocumentFragment();   //createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。
            var child = el.firstChild;
            while(child) {
                // 将Dom元素移入fragment中
                fragment.appendChild(child);
                child = el.firstChild;
            }
            return fragment;
        }

    接下来需要遍历所有节点,对含有指令的节点进行特殊的处理,这里我们先处理最简单的情况,只对带有 '{{变量}}' 这种形式的指令进行处理,代码如下:

    //遍历各个节点,对含有相关指定的节点进行特殊处理
        compileElement:function(el) {
            var childNodes = el.childNodes;   //childNodes属性返回节点的子节点集合,以 NodeList 对象。
            var self = this;
            //slice() 方法可从已有的数组中返回选定的元素。
            [].slice.call(childNodes).forEach(function(node) {
                var reg = /\{\{(.*)\}\}/;
                var text = node.textContent;  //textContent 属性设置或返回指定节点的文本内容
                if(self.isTextNode(node) && reg.test(text)) {      //判断是否符合{{}}的指令
                    //exec() 方法用于检索字符串中的正则表达式的匹配。
                    //返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
                    self.compileText(node,reg.exec(text)[1]);
                }
                if(node.childNodes && node.childNodes.length) {
                    self.compileElement(node);    //继续递归遍历子节点
                }
            });
        },
        compileText:function(node,exp) {
            var self = this;
            var initText = this.vm[exp];
            this.updateText(node,initText);    // 将初始化的数据初始化到视图中
            new Watcher(this.vm,exp,function(value) {
                self.updateText(node,value);
            });
     
        },
        updateText:function(node,value) {
            node.textContent = typeof value == 'undefined' ? '': value;
        },

    获取到最外层节点后,调用compileElement函数,对所有子节点进行判断,如果节点是文本节点且匹配{{}}这种形式指令的节点就开始进行编译处理,编译处理首先需要初始化视图数据,对应上面所说的步骤1,接下去需要生成一个并绑定更新函数的订阅器,对应上面所说的步骤2。这样就完成指令的解析、初始化、编译三个过程,一个解析器Compile也就可以正常的工作了。

    为了将解析器Compile与监听器Observer和订阅者Watcher关联起来,我们需要再修改一下类SelfVue函数:

    function SelfVue(options) {
        var self = this;
        this.vm = this;
        this.data = options.data;
        Object.keys(this.data).forEach(function(key) {
            self.proxyKeys(key);     //绑定代理属性
        });
        observe(options.data);
        new Compile(options.el,this.vm);
        return this;
    }

    更改后,我们就不要像之前通过传入固定的元素值进行双向绑定了,可以随便命名各种变量进行双向绑定了:

    <body>
        <div id="app">
            <h1>{{title}}</h1>
            <h2>{{name}}</h2>
            <h3>{{content}}</h3>
        </div>
    </body>
    <script src="../js/observer2.js"></script>
    <script src="../js/Watcher1.js"></script>
    <script src="../js/compile1.js"></script>
    <script src="../js/index3.js"></script>
     
     
    <script>
        var selfVue = new SelfVue({
            el:'#app',
            data:{
                title:'aaa',
                name:'bbb',
                content:'ccc'
            }
        });
        window.setTimeout(function() {
            selfVue.title = 'ddd';
            selfVue.name = 'eee';
            selfVue.content = 'fff'
        },2000);
    </script>

    到这里,一个数据双向绑定功能已经基本完成了,接下去就是需要完善更多指令的解析编译,在哪里进行更多指令的处理呢?答案很明显,只要在上文说的compileElement函数加上对其他指令节点进行判断,然后遍历其所有属性,看是否有匹配的指令的属性,如果有的话,就对其进行解析编译。这里我们再添加一个v-model指令和事件指令的解析编译,对于这些节点我们使用函数compile进行解析处理:

    compile:function(node) {
            var nodeAttrs = node.attributes;   //attributes 属性返回指定节点的属性集合,即 NamedNodeMap。
            var self = this;
            //Array.prototype属性表示Array构造函数的原型,并允许为所有Array对象添加新的属性和方法。
            //Array.prototype本身就是一个Array
            Array.prototype.forEach.call(nodeAttrs,function(attr) {
                var attrName = attr.name;      //添加事件的方法名和前缀:v-on:click="onClick" ,则attrName = 'v-on:click' id="app" attrname= 'id'
                if(self.isDirective(attrName)) {     
                    var exp = attr.value;      //添加事件的方法名和前缀:v-on:click="onClick" ,exp = 'onClick'
     
                    //substring() 方法用于提取字符串中介于两个指定下标之间的字符。返回值为一个新的字符串
                    //dir = 'on:click'
                    var dir = attrName.substring(2);  
                    if(self.isEventDirective(dir)) {   //事件指令
                        self.compileEvent(node,self.vm,exp,dir);
                    }else {          //v-model指令
                         self.compileModel(node,self.vm,exp,dir);
                    }
     
                    node.removeAttribute(attrName);
                }
            });
        }

    上面的compile函数是挂载Compile原型上的,它首先遍历所有节点属性,然后再判断属性是否是指令属性,如果是的话再区分是哪种指令,再进行相应的处理.

    最后我们再次改造一下SelfVue,是它的格式看上去更像vue:

    function SelfVue(options) {
        var self = this;
        this.data = options.data;
        this.methods = options.methods;
        Object.keys(this.data).forEach(function(key) {
            self.proxyKeys(key);    
        });
        observe(options.data);
        new Compile(options.el,this);
        options.mounted.call(this);
    }

    测试一下:

    <body>
        <div id="app">
                <h2>{{title}}</h2>
                <input v-model="name">
                <h1>{{name}}</h1>
                <button v-on:click="clickMe">click me!</button>
        </div>
    </body>
     
    <script src="../js/observer3.js"></script>
    <script src="../js/Watcher1.js"></script>
    <script src="../js/compile2.js"></script>
    <script src="../js/index4.js"></script>
    <script>
        new SelfVue({
            el: '#app',
            data: {
                title: 'hello world',
                name: 'canfoo'
            },
            methods: {
                clickMe: function () {
                    this.title = 'hello world';
                }
            },
            mounted: function () {
                window.setTimeout(() => {
                    this.title = '你好';
                }, 1000);
            }
        });
    </script>

    效果如下:


    到目前为止,我们简易版的demo已经成功了,通过上面这个例子,我们可以更加深刻的理解vue的一些机制,比如双向绑定,声明式渲染等.

    写在后面

    因为代码量比较多,所以对于一些不重要的没有一一展示,我把代码放在我的github上了,github Clone with HTTPS:https://github.com/2686685661/SelfVue.git


    展开全文
  • 本文为大家讲解了Vue分页器实现原理,供大家参考,具体内容如下 网上搜的分页器大多是jQuery实现的,而且也不太完善,于是自己写了个分页器组件,以后再用也不慌,直接复制过去就ok,下面说说具体实现的代码和原理吧...
  • Vue原理面试题

    千次阅读 2021-09-29 15:27:34
    数据驱动视图 - Vue MVVM MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到View.

    一、大厂必考原理

    1.组件化和MVVM

    2.响应式原理

    3.vdom和diff算法

    4.模板编译

    5.组件渲染过程

    6.前端路由

    1.组件化基础=>(MVVM模型)

     传统组件,知识静态渲染,更新依赖于操作DOM

    Vue的核心理念是数据驱动的理念,所谓的数据驱动的理念:当数据发生变化的时候,用户界面也会发生相应的变化,开发者并不需要手动的去修改dom.

    这样做给我们带来的好处就是,我们不需要在代码中去频繁的操作dom了,这样提高了开发的效率,同时也避免了在操作Dom的时候出现的错误。

    Vue.js的数据驱动是通过MVVM这种框架来实现的,MVVM 框架主要包含三部分:Model,View,ViewMode

    数据驱动视图 - Vue MVVM

    MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到ViewModel层并自动将数据渲染到页面中,视图变化的时候通知viewModel层更新数据


    2.Vue响应式原理的实现

    组件data的数据一旦改变,立马触发视图的更新。

    核心API -- Object.defineProperty

    Object.defineProperty有缺点(Vue3启用Proxy)

    Proxy的兼容性不太好,且无法使用polyfill

    Object.defineProperty基本用法

     Object.defineProperty实现响应式

    • 监听对象,监听数组
    • 复杂对象,深度监听

     Object.defineProperty的缺点

    • 深度监听需要递归到底,一次性计算量大
    • 无法监听新增属性、删除属性(要使用Vue.set  Vue.delete)
    • 无法原生监听数组,需要特殊处理

    总结;

    1.核心API -- Object.defineProperty

    2.如何监听对象(深度监听),如何监听数组

    3.缺点

    // 触发更新视图
    function updateView() {
        console.log('视图更新')
    }
    
    // 重新定义数组原型
    const oldArrayProperty = Array.prototype
    // 创建新对象,原型指向 oldArrayProperty ,再扩展新的方法不会影响原型
    const arrProto = Object.create(oldArrayProperty);
    ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
        arrProto[methodName] = function () {
            updateView() // 触发视图更新
            oldArrayProperty[methodName].call(this, ...arguments)
            // Array.prototype.push.call(this, ...arguments)
        }
    })
    
    // 重新定义属性,监听起来
    function defineReactive(target, key, value) {
        // 深度监听
        observer(value)
    
        // 核心 API
        Object.defineProperty(target, key, {
            get() {
                return value
            },
            set(newValue) {
                if (newValue !== value) {
                    // 深度监听
                    observer(newValue)
    
                    // 设置新值
                    // 注意,value 一直在闭包中,此处设置完之后,再 get 时也是会获取最新的值
                    value = newValue
    
                    // 触发更新视图
                    updateView()
                }
            }
        })
    }
    
    // 监听对象属性
    function observer(target) {
        if (typeof target !== 'object' || target === null) {
            // 不是对象或数组
            return target
        }
    
        // 污染全局的 Array 原型
        // Array.prototype.push = function () {
        //     updateView()
        //     ...
        // }
    
        if (Array.isArray(target)) {
            target.__proto__ = arrProto
        }
    
        // 重新定义各个属性(for in 也可以遍历数组)
        for (let key in target) {
            defineReactive(target, key, target[key])
        }
    }
    
    // 准备数据
    const data = {
        name: 'zhangsan',
        age: 20,
        info: {
            address: '北京' // 需要深度监听
        },
        nums: [10, 20, 30]
    }
    
    // 监听数据
    observer(data)
    
    // 测试
    // data.name = 'lisi'
    // data.age = 21
    // // console.log('age', data.age)
    // data.x = '100' // 新增属性,监听不到 —— 所以有 Vue.set
    // delete data.name // 删除属性,监听不到 —— 所有已 Vue.delete
    // data.info.address = '上海' // 深度监听
    data.nums.push(4) // 监听数组
    

    3.虚拟DOM(vdom)和diff算法

    • DOM操作非常耗费性能
    • 以前用jQuery,可以自行控制DOM操作时机,手动调整
    • vue和react都是数据驱动试图,如何有效控制DOM操作?

    解决方案——vdom

    • 有一定的复杂度,想减少计算次数比较难
    • 难不能把计算,更多的转移为JS计算?因为JS执行比较快
    • vdom——用JS模拟DOM结构,计算出最小的变更,操作DOM

    面试题:用JS模拟DOM元素

    包含三部分:标签tag,附着在标签上的属性、样式、事件props,子元素children

    通过snabbdom 学习vdom

    • vue3重写了vdom的代码,优化了性能
    • 但vdom的理念不变,面试考点不变

    h函数、vnode数据结构、patch函数

    vdom总结

    • 用js模拟DOM结构(vnode)
    • 新旧vnode对比,得出最小的更新范围,最后更新DOM
    • 数据驱动视图的模式下,有效控制DOM操作

    diff算法

    两个数做diff,如这里的vdom diff

     vnode   ->patch ->new vnode

    树diff的时间复杂度O(n^3)

    • 第一,遍历tree1;第二,遍历tree2
    • 第三,排序
    • 1000个节点,要计算1亿次,算法不可用

    优化时间复杂度到O(n)

    • 只比较同一层级,不跨级比较
    • tag不相同,直接删掉重建,不再深度比较
    • tag和key,两者都相同,则认为是相同的节点,不再深度比较

    diff算法总结

    • patchVnode
    • addVnodes removeVnodes
    • updateChildren(key的重要性)

    vdom和diff总结

    • 细节不重要,updateChildren更新过程也不重要,不要深究
    • vnode核心概念很重要:h vnode patch diff key 等
    • vnode的存在价值更重要:数据驱动试图,控制DOM操作

    4.模板编译

     

    with语法 

     

    模板编译

    总结

    vue中使用render代替template 

    总结

     5.组件渲染更新过程

    vue原理的三大知识点

    组件渲染/更新过程 

    初次渲染过程

    第二步是因为,执行render函数会触发getter操作 

    更新过程

    触发setter,看是修改的data是否在getter中已经被监听,如果是,就执行render函数

    patch的diff算法,会计算出最小差异,更新在DOM上 

    完整流程图

    模板编译完,生成render函数,执行render函数生成vnode (虚拟DOM的树)

    执行render函数的时候会touch getter,即执行函数的时候回触发Data里的getter

    触发的时候就会收集依赖,即在模板中出发了哪个变量的getter就会把哪个给观察起来(watcher)

    在修改Data的时候,看这个Data是否是之前作为依赖被观察起来的

    如果是,就重新出发re-render,重新渲染,重新生成vdom tree,重新touch

    异步渲染

    1.$nextTick:

    vue是异步渲染,$nextTick会待Dom渲染完之后调用

    页面渲染时会将data的修改做整合,多次data修改只会渲染一次

    2.汇总data的修改,一次性更新试图

    3.减少DOM操作次数,提高性能

    6.前端路由原理

    网页url组成部分

     hash的特点

    <!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>hash test</title>
    </head>
    <body>
        <p>hash test</p>
        <button id="btn1">修改 hash</button>
    
        <script>
            // hash 变化,包括:
            // a. JS 修改 url
            // b. 手动修改 url 的 hash
            // c. 浏览器前进、后退
            window.onhashchange = (event) => {
                console.log('old url', event.oldURL)
                console.log('new url', event.newURL)
    
                console.log('hash:', location.hash)
            }
    
            // 页面初次加载,获取 hash
            document.addEventListener('DOMContentLoaded', () => {
                console.log('hash:', location.hash)
            })
    
            // JS 修改 url
            document.getElementById('btn1').addEventListener('click', () => {
                location.href = '#/user'
            })
        </script>
    </body>
    </html>

    H5 history

    • 用url规范的路由,但跳转时不刷新页面
    • history.pushState
    • window.onpopstate

    <!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>history API test</title>
    </head>
    <body>
        <p>history API test</p>
        <button id="btn1">修改 url</button>
    
        <script>
            // 页面初次加载,获取 path
            document.addEventListener('DOMContentLoaded', () => {
                console.log('load', location.pathname)
            })
    
            // 打开一个新的路由
            // 【注意】用 pushState 方式,浏览器不会刷新页面
            document.getElementById('btn1').addEventListener('click', () => {
                const state = { name: 'page1' }
                console.log('切换路由到', 'page1')
                history.pushState(state, '', 'page1') // 重要!!
            })
    
            // 监听浏览器前进、后退
            window.onpopstate = (event) => { // 重要!!
                console.log('onpopstate', event.state, location.pathname)
            }
    
            // 需要 server 端配合,可参考
            // https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
        </script>
    </body>
    </html>

     总结

     两者选择

    to c的要是不需要管seo、搜索引擎也不需要用H5 history 简单一点就好

    展开全文
  • Vue2.0学习】—Vuex工作原理图(二十五) 一、 Vuex 是什么? 概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式...

    【Vue2.0学习】—Vuex工作原理图(二十五)

    一、 Vuex 是什么?

    在这里插入图片描述

    概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信

    二、什么时候使用Vuex

    (1)多个组件依赖于同一状态

    (2)来自不同组件的行为需要变更同一状态

    三、搭建坏境

    (1) npm install vuex
    (2) Vue.use(Vuex)
    (3) store
    (4) vc==>store
    

    创建文件src/store/index.js
    在这里插入图片描述
    在这里插入图片描述
    在main.js中创建vm时传入store配置项
    在这里插入图片描述

    Vuex工作原理图
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • Vue原理简介

    千次阅读 2019-03-27 09:16:25
    Vue原理简介 Vue就是基于MVVM模式实现的一套框架,在vue中: Model:指的是js中的数据,如对象,数组等等。 View:指的是页面视图 viewModel:指的是vue实例化对象 为什么说VUE是一个渐进式的javascript框架, 渐进...
  • 主要介绍了理解vue ssr原理并自己搭建简单的ssr框架,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了Vue插槽原理与用法,结合实例形式详细分析了vue.js插槽内容、具名插槽、作用域插槽等相关原理与使用方法,需要的朋友可以参考下
  • vue实现原理浅析

    2019-08-10 08:29:37
    那么本文是以一种通俗易懂的的角度来实现一个简单 的双向数据绑定系统,如果你用过vue却对vue的实现原理不太清楚,或者没用过vue想学习vue那我相信看完本文你会的vue的实现有一个比较简单明确的了解。
  • 主要给大家介绍了关于Vue动态组件和异步组件原理的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 面试重点-vue原理

    千次阅读 2020-07-06 18:57:11
    数据驱动视图 传统组件,只是静态渲染,更新还要依赖于操作DOM 数据驱动视图-Vue MVVM 数据驱动视图-React ... 考察Vue原理的第一题 核心API-Object.defineProperty Object.defineProperty的缺点(vue3.0启用P
  • Vue底层实现原理总结

    2020-08-28 00:25:43
    小编给大家整理Vue底层实现原理的知识点总结,如果大家对此有需要,可以学习参考下,希望我们整理的内容能够帮助到你。
  • Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以...
  • vue原理

    千次阅读 2019-06-14 16:24:32
  • 本篇文章主要介绍了Vue监听数据变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了vue3实现v-model原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue3原理解析

    万次阅读 多人点赞 2021-02-19 16:26:20
    大家都知道vue2的时候是使用了Object.defineProperties方法通过set和get来进行数据的劫持,从而达到响应式数据。 在vue3中则是使用es6 proxy代理,将对象进行转化拦截,使用weakMap做弱引用缓存。当触发代理的get时...
  • Computed 计算属性是 Vue 中常用的一个功能,本篇文章主要介绍了Vue Computed 计算属性原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • proxy方法 ...可查看Vue 2.0双向绑定原理的实现 具体实现过程的代码如下: 1、定义构造函数 function Vue(option){ this.$el = document.querySelector(option.el); //获取挂载节点 this.$data =
  • Vue CLI脚手架工作原理

    千次阅读 2020-10-31 18:09:06
    使用Vue CLI创建脚手架 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler),分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript,vue等),并...
  • 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的...
  • 本篇文章主要介绍了详解Vue双向数据绑定原理解析 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 剖析vue实现原理,自己动手实现mvvm
  • vue核心原理解析

    千次阅读 2020-07-11 06:54:58
    1. MVVM原理 vue的精髓在于组件化和数据驱动视图。 组件化之前就有,比如php等语言,vue使用了组件化思想。 进行了数据驱动视图的创新。之前的前端操作是静态渲染,要操作dom修改视图。 数据劫持的优势 无需显示...
  • Vue简单实现原理详解

    2020-11-21 08:33:05
    本文实例讲述了Vue实现原理。分享给大家供大家参考,具体如下: 用了Vue也有两年时间了,一直以来都是只知其然,不知其所以然,为了能更好的使用Vue不被Vue所奴役,学习一下Vue底层的基本原理Vue官网有一段这样的...
  • 主要介绍了vue 组件开发原理与实现方法,结合实例形式详细分析了vue.js组件开发的原理与实现方法,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,596
精华内容 37,838
关键字:

vue的工作原理