答对这些问题,检测你是否真正掌握了Vue请说一下响应式数据的原理 默认Vue在初始化数据时,会给data中的属性使用Object。defineProperty重新定义所有属性,当页面到对应属性时,会进行依赖收集(收集当前组件中的watcher)如果属性发生变化会通知相关依赖进行更新操作 收集当前组件中的watcher,我会进一步问你什么叫当前组件的watcher?我面试时经常听到这种模糊的说法,感觉就是看了些造玩具的文章就说熟悉响应式原理了,起码的流程要清晰一些:由于Vue执行一个组件的render函数是由Watcher去代理执行的,Watcher在执行前会把Watcher自身先赋值给Dep。target这个全局变量,等待响应式属性去收集它这样在哪个组件执行render函数时访问了响应式属性,响应式属性就会精确的收集到当前全局存在的Dep。target作为自身的依赖在响应式属性发生更新时通知Watcher去重新调用vm。update(vm。render())进行组件的视图更新 关于这个问题,有一个比较有意思的经历是,有一位同学前面部分都答得很好,但是我问他watcher是利用了什么数据结构去存储的时候,他就不太能答得出来了。所以是否真的阅读过源码,可以通过类似只要你看过,就一定印象深刻的细节来试探。 响应式部分,如果你想在简历上写熟悉的话,还是要抽时间好好的去看一下源码中真正的实现,而不是看这种模棱两可的说法就觉得自己熟练掌握了。说一下Vue双向数据绑定原理,你是怎么理解的。需要实现的vue双向数据绑定,需要使用到一下三种技术通过get()劫持取值操作通过set()劫持赋值操作Dep类:负责进行依赖收集Watcher类:负责订阅一些事件进行数值的累加计算链式获取对象的属性值数组的reduce()方法发布订阅者模式使用Object。defineProperty()进行数据劫持vue初始化过程中都做了什么。处理组件配置项初始化根组件时进行了选项合并操作,将全局配置合并到根组件的局部配置上初始化每个子组件时做了一些性能优化,将组件配置对象上的一些深层次属性放到vm。options选项中,以提高代码的执行效率初始化组件实例的关系属性,比如、children、、refs等处理自定义事件调用beforeCreate钩子函数初始化组件的inject配置项,得到ret〔key〕val形式的配置对象,然后对该配置对象进行浅层的响应式处理(只处理了对象第一层数据),并代理每个key到vm实例上数据响应式,处理props、methods、data、computed、watch等选项解析组件配置项上的provide对象,将其挂载到vm。provided属性上调用created钩子函数如果发现配置项上有el选项,则自动调用mount方法,也就是说有了el选项,就不需要再手动调用mount方法,反之,没提供el选项则必须调用mount接下来则进入挂载阶段为什么vue采用异步渲染。 vue是组件级更新,当前组件里的数据变了,它就会去更新这个组件。当数据更改一次组件就要重新渲染一次,性能不高,为了防止数据一更新就更新组件,所以做了个异步更新渲染。(核心的方法就是nextTick) 原理:当数据变化后会调用notify方法,将watcher遍历,调用update方法通知watcher进行更新,这时候watcher并不会立即去执行,在update中会调用queueWatcher方法将watcher放到了一个队列里,在queueWatcher会根据watcher的进行去重,多个属性依赖一个watcher,如果队列中没有该watcher就会将该watcher添加到队列中,然后通过nextTick异步执行flushSchedulerQueue方法刷新watcher队列。flushSchedulerQueue中开始会触发一个before的方法,其实就是beforeUpdate,然后watcher。run()才开始真正执行watcher,执行完页面就渲染完成啦,更新完成后会调用updated钩子vue中常用的一些指令,说一下vue自定义指令。 1常用指令vonce让界面不要跟着数据变化,只渲染一次 2常用指令vcloak 3常用指令vtext和vhtml 4常用指令vif条件渲染:如果vif取值是true就渲染元素,如果不是就不渲染元素 5常用指令vshowvshow和vif的能够一样都是条件渲染,取值为true就显示,取值为false就不显示 6常用指令vfor相当于JS中的forin循环,可以根据数据多次渲染元素 7常用指令vbind在企业开发中想要给元素绑定数据,我们可以使用{{}},vtext,vhtml 但是如果想给元素的属性绑定数据,就必须使用vbind 所以vbind的作用是专门用于给元素的属性绑定数据的 8常用指令vbind绑定类名 9常用指令vonvon指令专门用于给元素绑定监听事件 下面分享几个实用的Vue自定义指令复制粘贴指令vcopy长按指令vlongpress输入框防抖指令vdebounce禁止表情及特殊字符vemoji图片懒加载vLazyLoad权限校验指令vpremission实现页面水印vwaterMarker拖拽指令vdraggable说一说你对vue生命周期的理解。 1、什么是vue生命周期?答:Vue实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom渲染、更新渲染、销毁等一系列过程,称之为Vue的生命周期 2、vue生命周期的作用是什么? 答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 3、vue生命周期总共有几个阶段? 答:它可以总共分为8个阶段:创建前后,载入前后,更新前后,销毁前销毁后。 4、第一次页面加载会触发哪几个钩子? 答:会触发下面这几个beforeCreate,created,beforeMount,mounted。 5、DOM渲染在哪个周期中就已经完成? 答:DOM渲染在mounted中就已经完成了。 以上小试牛刀,前端的路还有很长很长需要走啊 三宝的其他的干货文章: 前端好用到收藏的工具有什么? 没前端项目经验很难找实习吗? 前端什么最难学? 怎样判断面试者是否有扎实的前端基础?(一) 怎样判断面试者是否有扎实的前端基础?(三) 怎样判断面试者是否有扎实的前端基础?(二) 前端自学路线图突围秘籍,超全最新 黑马程序员web前端视频教程从入门到精通Web前端视频教程完整版Web前端视频教程从入门到精通黑马程序员