前端面试宝典(Vue)

Vue 双向绑定原理


Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。

v-model 是什么?有什么用呢?


一则语法糖,相当于 v-bind:value="xxx" 和 @input,意思是绑定了一个 value 属性的值, 子组件可对 value 属性监听,通过$emit('input', xxx)的方式给父组件通讯。自己实现 v-model 方式的组件也是这样的思路。

vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢?

看实际情况,一般在 created(或 beforeRouter) 里面就可以,如果涉及到需要页面加载 完成之后的话就用 mounted。 在 created 的时候,视图中的 html 并没有渲染出来,所以此时如果直接去操作 html 的 dom 节点,一定找不到相关的元素 而在 mounted 中,由于此时 html 已经渲染出来了,所以可以直接操作 dom 节点,(此 时 document.getelementById 即可生效了)。


$nextTick的理解

用处:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
使用原理:
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。
所以为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
使用场景:
在更新完数据后,需要及时操作已经渲染好的DOM时。


v-if 和 v-show 的区别


v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和⼦组件适当地被销毁和重建。
true:渲染
false:销毁不渲染,元素就不存在了
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第⼀次变为真时,才会开始渲染条件块。
相⽐之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS 进⾏切换。
true:display: block
false: display: none
⼀般来说, v-if 有更⾼的切换开销,⽽ v-show 有更⾼的初始渲染开销。因此,如果需要⾮常频繁地切换,则使⽤ v-show 较好;如果在运⾏时条件很少改变,则使⽤ v-if 较好。

猜你喜欢

转载自blog.csdn.net/zhangwenok/article/details/125094344