写在前面的话,给自己:
任何时候,比起你的技术,更重要的是你的情商,不要纠结在某一个问题的点上面,一千个读者眼里有一千个哈姆雷特。在面试当中,有的时候正确的答案并不是最重要的,重要的是面对各种问题,你是否有从容的境界。


一、Vue的双向数据绑定原理是什么?或者vue的响应式原理

这个问题,真的很多公司如果问到vue,都会去问这一个问题。具体在这小结一下:

  1. vue.js是采用数据劫持,并结合发布者——订阅者的模式:通过Object.defineProperty()来劫持vue中各个属性的setter、getter,在数据变动的时候,再发布消息给订阅者

具体是怎么实现的呢?
再说一下Object.defineProperty();

Object.defineProperty(obj,prop, descriptor),该方法接收3个参数
obj:
要在其上定义属性的对象。
prop:
要定义或修改的属性的名称。
descriptor:
给对象的属性添加特性描述,目前提供两种形式:数据描述和存取器描述。
返回值:
这个操作的对象

关于descriptor,个人理解为对某个属性的详细配置,分为数据方面的配置,和存取时候的配置

再简单的说一下什么对象属性的描述呢?对于对象,之前就是直接拿来读或者写它的属性了呀,就像

var obj ={}
obj.a=1

想上面的例子,除了能给obj设置属性a,和设置属性a的值以外,我们可以对属性a进行更进一步的配置,比如设置这个属性a只能读取不能更改,不能删除,读取属性a时返回另外一个值等等,这时就Object.defineProperty()这个方法了,而vue最核心主要用到的是这个方法的存取描述
这里就简单说一下Object.defineProperty()这个方法的存取描述

 Object.defineProperty(obj,"newKey",{
            get:function (){return  ...} | undefined,//读取属性返回的值,即类似上面的value
            set:function (value){ return ...} | undefined//设置属性的值
            configurable: true | false
            enumerable: true | false
        });

举个栗子:

    var obj ={};
    var aData = 'word';
    Object.defineProperty(obj,'one',{
        get:function(){
            return aData
        },
        set:function(val){
            return aData='给你一个'+val//加工一下新的值
        }       
    })
    console.log(obj.one)//word
    obj.one='lala'
    console.log(obj.one)//给你一个word
  • observe:
    在Vue中的data:function(){},里面的每一个属性,也就是需要observe的数据对象,会进行进行递归遍历,包括子属性对象的属性,都加上 setter和getter;
    这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
  • 模板解析:
    接下来,complie会去解析模板指令,将模板中的变量替换成数据,然后再更新视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据变动了,就会接到通知更新视图
  • watcher:
    还有一位关键的角色-watcher:订阅者;
    他是数据监听与模板解析之间通讯的桥梁,
    1、在自身实例化时往属性订阅器(dep)里面添加自己
    2、自身必须有一个update()方法
    3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

  • MVVM
    MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。


二、什么时候用到嵌套路由?

何为嵌套路由,顾名思义就是路由嵌套子路由;
当我们的菜单不止一级的时候,就需要使用嵌套路由了

———————————-还在整理学习,未完待续,这是一篇持续更新的文章———————————————–

Logo

前往低代码交流专区

更多推荐