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">/deep/ .c1 .c2{
      color: green !important;} </style>

3. scss

<style scoped lang=”scss“>::v-deep .c1 .c2{
      color: green !important;} </style>

为什么要样式参透

在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped

vue的style中设置scoped属性后，组件实现样式私有化。
但是该组件又使用的其他组件库时(vant,elementui,自定义等)，
该组件的style中的样式，优先级低，不生效，这个时候需要使用样式穿透(作用得更深)。

scoped底层原理

scoped是通过在DOM以及css中加上data-v-xxx唯一标识来实现样式私有化。

参考博文

vue样式穿透

4.scope的原理

回答

如果想要组件中的样式只针对当前组件生效，就需要在style标签中加一个scoped。
它会给组件根元素的div加上一个data-v-xxx的属性。
然后组件里面所有的样式都被加上了这个属性，使得样式只作用于当前组件中的.wrapper。
如果一个页面中有很多组件，并且都有.wrapper选择器的话，
不同组件的data-v-xxx属性肯定是不一样的，所以加了scoped就可以实现只作用于当前组件的效果。

5.路由导航守卫有哪些?

回答

路由导航守卫有全局守卫,组件内守卫,路由独享守卫

1.全局守卫:router.beforeEach((to,from,next)=>{})
其中,to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。
2.组件内的守卫:
进入组件:beforeRouteEnter:(to,from,next)=>{},回调参数同上,
离开组件:beforeRouteLeave:(to,from,next)=>{}
3.路由独享的守卫:beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用

注意事项

组件内的守卫,进入组件时,注意next()函数

在Admin.vue文件中，点击转到admin路由时，执行beforeRouteEnter函数
如下例，data 组件内守卫有特殊情况，如果我们直接以
beforeRouteEnter:(to,from,next)=>{
     alert("hello" + this.name);}
进行访问admin页面，会发现alert输出hello undefined。
因为访问不到data属性,data数据还没渲染
所以这里，next()会给一个对应的回调，帮助完成。

next 的回调

<script>
export default {
    data(){
    return{
    name:"Arya"}},beforeRouteEnter:(to,from,next)=>{
    next(vm=>{
    alert("hello" + vm.name);})}
}
</script>

参考博文

Vue 路由 导航守卫(全局守卫、组件内守卫、路由独享守卫)

6.ref是什么?

回答

ref是组件的特殊属性，组件被渲染后，指向组件的一个引用。
可以通过组件的ref属性，来获取真实的组件。
因为，组件并不是真正的DOM节点，而是存在于内存中的一种数据结构，称为虚拟的DOM，
只有当它真正的插入文档之后，才变为真正的DOM节点。
所有的DOM变动都发生在虚拟DOM上，然后再将实际的部分反映到真实的DOM上,
这就是 DOM DIf

7.什么是MVVM

回答

MVVM是Model-View-VIewModel的缩写,其中,Model层代表数据模型,可以在Model中定义数据,修改和操作的业务逻辑,View代表UI组件,负责将数据模型转化为UI展现出来,VIewModel是一个同步前两个的对象
MVVM是一种设计思想,在MVVM架构下,Model和View没有直接联系,而是通过ViewModel进行交互,实现双向数据绑定,

参考

MVVM是Model-View-ViewModel的缩写。

MVVM是一种设计思想。
Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来，
ViewModel 是一个同步View 和 Model的对象

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，
Model 和 ViewModel 之间的交互是双向的，
View 数据的变化会同步到Model中，Model 数据的变化也会反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来，
而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，
因此开发者只需关注业务逻辑，不需要手动操作DOM,
不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。