vue面试常见问题小结
写在前面的话,给自己:任何时候,比起你的技术,更重要的是你的情商,不要纠结在某一个问题的点上面,一千个读者眼里有一千个哈姆雷特。在面试当中,有的时候正确的答案并不是最重要的,重要的是面对各种问题,你是否有从容的境界。一、Vue的双向数据绑定原理是什么?或者vue的响应式原理这个问题,真的很多公司如果问到vue,都会去问这一个问题。具体在这小结一下:vue.js是...
写在前面的话,给自己:
任何时候,比起你的技术,更重要的是你的情商,不要纠结在某一个问题的点上面,一千个读者眼里有一千个哈姆雷特。在面试当中,有的时候正确的答案并不是最重要的,重要的是面对各种问题,你是否有从容的境界。
一、Vue的双向数据绑定原理是什么?或者vue的响应式原理
这个问题,真的很多公司如果问到vue,都会去问这一个问题。具体在这小结一下:
- 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变更的双向绑定效果。
二、什么时候用到嵌套路由?
何为嵌套路由,顾名思义就是路由嵌套子路由;
当我们的菜单不止一级的时候,就需要使用嵌套路由了
———————————-还在整理学习,未完待续,这是一篇持续更新的文章———————————————–
更多推荐
所有评论(0)