答对这些问题,检测你是否真正掌握了Vue
默认 Vue 在初始化数据时,会给 data 中的属性使用 Object.defineProperty 重新定义所有属性,当页面到对应属性时,会进行依赖收集(收集当前组件中的 watcher)如果属性发生变化会通知相关依赖进行更新操作
收集当前组件中的 watcher,我会进一步问你什么叫当前组件的 watcher?我面试时经常听到这种模糊的说法,感觉就是看了些造玩具的文章就说熟悉响应式原理了,起码的流程要清晰一些:
关于这个问题,有一个比较有意思的经历是,有一位同学前面部分都答得很好,但是我问他 watcher 是利用了什么数据结构去存储的时候,他就不太能答得出来了。所以是否真的阅读过源码,可以通过类似只要你看过,就一定印象深刻的细节来试探。
响应式部分,如果你想在简历上写熟悉的话,还是要抽时间好好的去看一下源码中真正的实现,而不是看这种模棱两可的说法就觉得自己熟练掌握了。
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钩子
1-常用指令 v-once 让界面不要跟着数据变化, 只渲染一次
2-常用指令v-cloak
3-常用指令v-text 和 v-html
4-常用指令v-if 条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素
5-常用指令v-show v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示
6-常用指令v-for 相当于JS中的for in循环, 可以根据数据多次渲染元素
7-常用指令v-bind 在企业开发中想要给"元素"绑定数据, 我们可以使用{{}}, v-text, v-html
但是如果想给"元素的属性"绑定数据, 就必须使用v-bind
所以v-bind的作用是专门用于给"元素的属性"绑定数据的
8-常用指令-v-bind 绑定类名
9-常用指令-v-on v-on指令专门用于给元素绑定监听事件
下面分享几个实用的 Vue 自定义指令
1、什么是vue生命周期?答:Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom 渲染、更新 渲染、销毁等一系列过程,称之为 Vue 的生命周期
2、vue生命周期的作用是什么?
答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3、vue生命周期总共有几个阶段?
答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
4、第一次页面加载会触发哪几个钩子?
答:会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
5、DOM 渲染在 哪个周期中就已经完成?
答:DOM 渲染在 mounted 中就已经完成了。
以上小试牛刀,前端的路还有很长很长需要走啊~
三宝的其他的干货文章:
前端好用到收藏的工具有什么?
没前端项目经验很难找实习吗?
前端什么最难学?
怎样判断面试者是否有扎实的前端基础?(一)
怎样判断面试者是否有扎实的前端基础?(三)
怎样判断面试者是否有扎实的前端基础?(二)
前端自学路线图突围秘籍,超全最新
黑马程序员web前端视频教程从入门到精通Web前端视频教程完整版_Web前端视频教程从入门到精通_黑马程序员
页面更新:2024-03-07
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号