vue吧 关注:10,711贴子:23,068
  • 10回复贴,共1

vue面试常见问题小结 欢迎大家一起来讨论哦

只看楼主收藏回复

一、Vue的双向数据绑定原理是什么?或者vue的响应式原理
这个问题,真的很多公司如果问到vue,都会去问这一个问题。具体在这小结一下:
vue.js是采用数据劫持,并结合发布者——订阅者的模式:通过Object.defineProperty()来劫持vue中各个属性的setter、getter,在数据变动的时候,再发布消息给订阅者
1.具体是怎么实现的呢?
再说一下Object.defineProperty();
Object.defineProperty(obj,prop, descriptor),该方法接收3个参数
obj:
要在其上定义属性的对象。
prop:
要定义或修改的属性的名称。
descriptor:
给对象的属性添加特性描述,目前提供两种形式:数据描述和存取器描述。
返回值:
这个操作的对象
2.关于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 - Registered at Namecheap.com)//word obj.one='lala' console.log(obj.one - Registered at Namecheap.com)//给你一个word


1楼2019-11-27 13:21回复
    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变更的双向绑定效果。


    2楼2019-11-27 13:21
    回复
      2026-05-13 10:56:44
      广告
      不感兴趣
      开通SVIP免广告
      相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362


      3楼2019-11-27 14:05
      回复




        4楼2019-11-27 14:05
        回复


          7楼2019-11-28 13:03
          回复


            8楼2019-11-29 13:00
            回复


              10楼2019-11-30 12:21
              回复


                11楼2019-12-02 12:03
                回复
                  2026-05-13 10:50:44
                  广告
                  不感兴趣
                  开通SVIP免广告


                  12楼2019-12-02 22:45
                  回复


                    13楼2019-12-03 13:24
                    回复


                      14楼2019-12-03 19:50
                      回复