2021-12-24 面试题:vue(一) v-if和v-show的区别,nextTick,vue样式穿透,scoped的原理,路由导航守卫,ref,MVVM

1.v-if和v-show的区别

回答:
v-show只值编译一次,v-if则是重复销毁和创建
v-show的本质是给标签设置display:none,是在控制css,v-if是通过添加和删除DOM元素来控制显示隐藏的
因此v-show的性能好一些

2.this.$nextTick 是如何设计的？nextTIck是什么?

回答

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。
然后Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

使用场景

mounted中并不会保证所有子组件都被挂载完成后再触发，
当用户希望视图完全渲染完成后再做某些事情时，需在mounted中使用$nextTick。

3.vue是如何做样式穿透的?

回答:

想在一个组件中覆盖插件的样式，就需要用到样式穿透。
vue中针对不同的样式类型(css,less,scss)有不用的样式穿透方法。

css 使用 >>>
less 使用 /deep/
scss 使用 ::v-deep

1. css

<style scoped>
    >>> .c1 .c2{
     
        color: green !important;
    }
</style>

2. less

<style scoped lang="less">