VUE面试题总结

1.vue是什么？

    vue是一套用于构造用户界面的渐进式JavaScript框架，简化dom操作。
    vue是一套前端框架，免除了原生javascript中的dom操作，简化书写
    vue基于mvvm思想，实现双向数据绑定

2.什么是MVVM？

    MVVM是一种软件设计模式。
    M（model)：模型层。就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model
    V(view)：视图层。就是展现出来的用户界面
    VM(viewModel)：视图模型层。它是中间层，是连接view和model的桥梁，它将模型中的数据转换成视图可以使用的形式，并处理用户与视图的交互。

3.mvvm和mvc的最大区别是什么？

    mvvm实现了view和model的自动同步，也就是使用mvvm我们不用再手动操作dom来改变view的显示

4.怎样快速创建一个vue页面？

    1）新建html页面，引入vue.js文件 （引入CDN上的地址）
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    2）在js代码区域，创建vue核心对象，进行数据绑定
        const vm = new Vue({
            el: 'app',
            data() {
                return{
                    username: 'zs'
                }
            }
         })
    3）编写视图层
    <div id='app'>
        { {zs}}
    </div>

5.v-if 和 v-show 区别？
    

    都能控制页面原始的显示和隐藏
    v-if 是通过控制dom节点的渲染实现的
    v-show 是通过 display 属性控制的

6.什么是自定义指令？

    1）vue官方提供了常用的指令，如 v-model、v-for、v-if等
    2）还允许开发者自定义指令
    3）是一种扩展vue语法的方式，可以在模版中添加自定义的功能
    4）可以在vue实例上注册，并在模版中使用
    5）包含局部指令和全局指令，局部指令在组件中就可以注册使用，而全局则是将指令注册到全局，通常在main.js中注册
        <template>
          <div v-highlight>这是一个带有黄色背景的文本</div>
        </template>

        <script>
        // 定义局部指令
        Vue.directive('highlight', {
          bind(el, binding, vnode) {
            el.style.backgroundColor = 'yellow';
          }
        });
        </script>

7.你用自定义指令做过哪些功能？

    1）用户头像处理，通过绑定自定义事件渲染当前用户的头像，在指令中获取当前用户头像图片的src,如果没有头像图片则显示提前设置好的默认图片
    2）权限控制，通过绑定自定义事件传入控制当前元素的权限字段，在指令中获取到当前元素并根据权限字段来控制该元素的状态（显示、隐藏等）

8.说说v-for和v-if的 优先级

    1）v-if用于条件性渲染，v-for是基于一个数组来渲染一个列表
    2）vue2中，v-for的优先级更高,就是说如果写在一起，每次渲染都会先循环再进行判断，会带来性能方面的浪费，
      为了避免性能浪费，不能放在同一个标签中，在外部加一个<template>标签先写v-if判断，再内部进行v-for循环
    3）vue3中，v-if的优先级更高，写在一起会报错，因为v-if判断时还没拿到这个数组，这时v-if需要写在循环的内部

9.vue插槽是什么？

    1）可以理解成子组件为父组件预留的位置
    2）当使用一个子组件时，组件标签里面的对应内容就会替换掉子组件中的slot标签

10.插槽分类？

    1）默认插槽：子组件中用slot标签确认渲染位置，父组件直接在子组件标签内写入内容即可
    2）具名插槽：有名字的插槽，在子组件中用 name 属性对插槽进行命名，父组件通过配置 template 中的 v-slot:name 或者 #name 来对应上子组件中要写入内容的位置
        //子组件
        <template>
          <slot name=