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="content"></slot>
        </template>

        //父组件
        <Child>
            <template v-slot:content>具名插槽内容</template>
        </Child>
        3）作用域插槽（数据插槽）：在子作用域中 使用 v-bind 属性绑定子组件中定义的数据，在父级作用域中使用 slot-scope  属性访问子组件插槽上绑定的数据，使子组件的模型数据可以作用到父组件
            // 子组件
            <template id="myA">
                <div>
                    <slot v-bind:aaa="title" ></slot>
                    <slot :data="arr" name='Arr'></slot>
                </div>
            </template>
            // 注意：如果使用多个作用域插槽，最后一个会覆盖上边的，所以下边的那个，我又配合使用了具名插槽。
            
            
            // 父组件
            <div id="app">    
                // 使用子组件
                <my-a>
                    <p slot-scope="xyz">{{xyz.aaa}}</p>
                    <ul slot-scope="abc" slot='Arr'>
                        <li v-for="a in abc.data">{{a}}</li>
                    </ul>
                </my-a>
            </div>
            <script>
                new Vue({
                    el:'#app',
                    components:{
                        'my-a':{
                            template:'#myA',
                            data(){
                                return {
                                    title:'A组件',
                                    arr:[1,2,3,4,5,6]
                                }
                            }
                        }
                    }
                })
            </script>

11.什么是过滤器？

    1）过滤器是用来过滤数据的
    2）在vue中使用filters来过滤数据，filters不会修改数据，而是过滤数据，改变用户看到的输出
    3）分类：分为全局过滤器和组件内过滤器
    4）使用场景：处理时间、价格等数据格式的输出/显示

12.如何实现一个过滤器？

    1）在组件内或组件外 定义一个过滤器
    // 组件内
    <script>
       export default {
         filters: {
           filterPrice: function (price) {
             return price? ('￥' + price) : '--';
           }
         }
       }
    </script>
    // 组件外（需要全局注册）
    Vue.config.filters = {
         filterPrice: function (price) {
           return price? ('￥' + price) : '--';
         }
       };
    2）用在插值表达式 {{ }} 和 v-bind 表达式 中，然后放在操作符“ | ”后面进行指示
    <li>商品价格：{{item.price | filterPrice}}</li>

13.事件修饰符是什么？常见的有哪些？

    1）是vue.js中用于改变事件行为的特殊属性
        <a href="https://www.example.com" @click.prevent="handleClick">阻止默认事件</a>
    2）常见的有：
        .stop 阻止冒泡事件   
        .prevent 阻止默认行为
        .self 只有event.target是当前操作元素时才触发，不包含子元素
        .once 事件只能触发一次
        .cupture 使用事件的捕获形式
        .passive 事件的默认行为直接执行，无需等待事件回调执行完毕

14.v-model 如何实现的？

    是 Vue.js 提供的一个指令
    用于在表单输入元素和组件数据之间建立双向数据绑定
    它的实现原理是基于vue内部的数据劫持机制：
      1）当使用 v-model 指令时，Vue 会创建一个侦听器，该侦听器会监听输入元素的 input 事件
      2）当用户在输入元素中输入内容时，input 事件会被触发，侦听器就会捕获输入的内容并将其传递给 Vue 实例，Vue 实例会将输入的内容与组件数据进行比较，并更新组件数据
      3）当组件数据发生变化时，Vue 实例会触发一个 update:modelValue 事件，该事件会被传递给输入元素，输入元素会将新的组件数据应用到自身的值上。
    

15.admin后台管理系统的登录和菜单权限是怎么实现的？

    前端有一份路由表，规定了每一个路由可以访问的权限
    当用户登录后，获取到自己对应的角色
    动态根据用户的角色算出其对应的权限路由，并通过router.addRoute动态挂载路由
    最后再对于不同权限的用户显示不同的侧边栏板块和限制其所能进入的页面、所能执行的操作（按钮）
    
    1）登录
        用户填写完账号和密码后，向服务端验证是否正确
        验证通过后，服务端会返回一个token
        我们前端拿到token后，先将token存储到本地localStorage中
        然后，我会根据token再去拉取一个userInfo的接口来获取用户的详细信息（包括用户权限、用户名等）
    2）权限验证思路
        通过token获取用户对应的角色权限
        动态算出其对应的权限路由
        通过 router.addRoute 动态挂载这些路由 

16.说说vue动态权限 如何 绑定渲染列表？

    首先 请求服务器，获取当前用户的权限数据 如：this.$http.get('rights/list')
    获取到权限数据之后，在列表中使用v-if v-else-if v-else 的组合来渲染展示不同的内容

17.vue中如何获取dom? 操作dom? 更新dom?

    1)获取dom: 在vue中给dom加上了个ref属性，我们可以通过 this.$refs.元素名字 来获取dom元素
    2）操作dom: 通过refs.名字拿到对应的dom之后，就可以用原生JS进行操作和更新
    VUE框架本身就不需要操作dom,本来就实现了视图模型双向数据绑定
    

18.说说vue3的生命周期    

19.说说 Vue3 的响应式设计原理？

    Vue 3 的响应式设计原理与 Vue 2 基本相同，也是基于数据劫持和观察者模式实现的。
    Vue3 的响应式设计原理基于以下几个核心概念：
        1）Proxy 对象：Vue3 使用 JavaScript 的 Proxy 对象来拦截对数据的操作。当你访问或修改一个响应式属性时，Proxy 对象会捕获这些操作，并触发相应的响应式更新。
        2）依赖收集：在响应式系统中，Vue3 会自动收集依赖。当一个属性发生变化时，它会遍历所有使用该属性的组件，并记录它们对该属性的依赖关系。
        3）Watcher 机制：依赖收集完成后，Vue3 会创建 Watcher 对象来监听属性的变化。Watcher 对象会在属性变化时触发更新回调函数，从而更新组件的视图。
        4）模板渲染：在 Vue3 的模板中，使用指令和表达式来绑定数据和展示视图。当数据发生变化时，Vue3 会根据更新后的数据重新渲染模板。

 

20.单点登录系统？

    单点登录（SSO)是一种身份验证机制，允许用户在一次登录后，就可以访问多个不同的应用程序
    典型案例就是 CAS单点登录系统 下面是工作原理：
    1）用户访问A
    2）重定向到CAS服务器登录页面
    3）CAS登录
    4）返回令牌给用户A
    5）A拿到令牌存储在本地，通过令牌请求用户信息
    6）访问其它应用B时，CAS直接返回令牌给B
    7）B再发起令牌验证,拿到用户信息
    8）用户再访问其它应用

21.是否做过可视化项目？

    是的，做过一个设备生产公司的设备智能看板，用原生js,jquery和echarts写的
    看板内容包含 销售的统计（年季月周的），各个地点的设备台数，监控设备异常和故障等
    也在pc端应用echarts做过数据分析图表。

22.怎么用Echarts做开发

    1.初始化 echarts 实例对象
        js原生：
        var myChart = echarts.init(document.querySelector(".pie"));
        vue示例：
        <div ref="myDiv" class="radar-echart" />
        const myChart = echarts.init(this.$refs.myDiv)
    2.指定图表的配置项和数据
        option = { 在ECHARTS官网定制的js内容 }
    3.将配置项和数据给我们的实例化对象。
        myChart.setOption(option);
    *4.当我们浏览器缩放的时候，图表也等比例缩放。（在vue外场景使用的 resize 方法）
        window.addEventListener("resize", function () {
            // 让我们的图表调用resize这个方法。
            myChart.resize();
          });

23.怎么做移动适配的

    用scale
    通过scale,就是css的一个属性
    设置一个宽高比例
    如果宽度过长，以高度为基准
    如果高度过长，以宽度为准

24.微信支付sdk怎么实现的？

    1）首先，需要在项目中导入微信支付 SDK 相关的依赖。这允许我们在代码中使用微信支付的功能。
    2）接下来，通过微信支付 SDK 提供的方法获取微信支付实例。这个实例将用于后续的支付操作。
    3）然后，配置微信支付参数，如 appId、partnerId、prepayId、nonceStr 和 sign 等。这些参数是与微信支付服务器进行通信和验证的关键。
    4）最后，使用微信支付实例的相关方法发起微信支付请求。这可能涉及到与微信支付服务器的连接、传输参数和处理支付结果。

25.前端设计文档模板：    

    需求文档
    设计视觉稿
    服务端IDL
    第三方服务/SDK文档
    测试Case
    埋点文档
    运营资源列表
    走查及验收文档

26.当在浏览器中输入网址并且按下回车之后发生了什么？

    1）URL 解析： 浏览器会解析输入的 URL，并提取出其中的协议（如 HTTP 或 HTTPS）、域名和路径等相关信息。
    2）DNS 解析： 浏览器将解析出的域名发送到本地 DNS 解析器或者系统预配置的 DNS 服务器，以获取目标服务器的 IP 地址。
    3）建立 TCP 连接： 浏览器会通过 IP 地址建立与目标服务器的 TCP 连接。这个过程涉及三次握手，即客户端与服务器之间的连接协商。
    4）发送 HTTP 请求： 在建立 TCP 连接完成后，浏览器会发送一个 HTTP 请求到目标服务器，其中包括请求方法（如 GET、POST）、路径和 HTTP 版本等。
    5）服务器处理请求： 目标服务器接收到请求后，会进行相应的处理，可能涉及动态生成页面、查询数据库等操作。
    6）服务器发送 HTTP 响应： 服务器根据请求进行处理后，会生成一个 HTTP 响应，其中包括状态码、响应头和响应体等。
    7）接收响应： 浏览器接收到来自服务器的 HTTP 响应。
    8）渲染页面： 浏览器根据接收到的响应，开始解析 HTML、CSS 和 JavaScript 等文件。它会构建 DOM 树、CSSOM 树并执行 JavaScript 代码，最终将页面渲染在用户的屏幕上。
    9）关闭连接： 页面渲染完成后，浏览器会关闭与服务器的 TCP 连接，释放资源。

27.http 与 https 区别

    HTTP（Hypertext Transfer Protocol）和 HTTPS（Hypertext Transfer Protocol Secure）是用于在客户端和服务器之间传输数据的两种协议。
    它们之间的主要区别在于安全性和数据传输方式。
    1）安全性： HTTP 是明文传输的协议，数据在传输过程中不进行加密，容易被中间人窃听和篡改。而 HTTPS 使用 SSL/TLS 协议进行加密，能够确保传输的数据在网络上的安全性，使得中间人无法窃听、篡改或伪造网站。
    2）默认端口： HTTP 使用 80 端口进行通信，而 HTTPS 使用 443 端口进行通信。
    3）加密方式： HTTP 不涉及数据加密，而 HTTPS 使用 SSL/TLS 协议对数据进行加密。SSL/TLS 协议使用公钥加密来保护数据的机密性，并使用数字证书来验证服务器的身份。
    4）证书： HTTPS 使用数字证书来验证服务器的身份，并确保连接的安全性。证书由可信的第三方机构（如 CA）签发，用于证明服务器是可信的。HTTP 没有使用证书进行身份验证。
    5）连接建立过程： 在 HTTP 中，客户端与服务器之间建立连接后，数据的传输是不加密的。而在 HTTPS 中，客户端与服务器之间建立安全的 SSL/TLS 握手连接，然后使用加密通道进行数据传输。
    6）性能： 由于 HTTPS 需要进行加密和解密的过程，相比 HTTP 而言，HTTPS 会对服务器的性能产生一定的影响。但是随着硬件性能的提升和优化的算法实现，这种性能影响已经大大减少。

----.HTTP 协议的优点和缺点

    优点：
        1）简单和易于理解：HTTP 协议使用简单的文本格式，在设计上非常直观和易于理解。这简化了开发人员编写 HTTP 请求和处理 HTTP 响应的过程。
        2）平台无关性：HTTP 协议是独立于操作系统和编程语言的，可以在不同平台之间进行通信。这使得 HTTP 成为互联网上广泛应用的通信协议。
        3）跨平台和跨语言支持：HTTP 协议可以被几乎所有的编程语言和应用程序库支持，因此可以轻松地实现跨平台的数据交换和通信。
        4）可扩展性：HTTP 协议使用灵活的请求-响应模式，可以通过添加、修改和删除标头字段等方式进行功能的扩展和定制。
        5）安全性：HTTP 协议支持通过 TLS/SSL 协议进行数据的加密传输，以确保敏感信息在网络传输过程中的安全性。
    缺点：
        1）无状态性：HTTP 协议是无状态的，每个请求和响应之间是相互独立的，服务器无法直接识别某个请求和之前的请求之间的关系。这导致无法在单个连接上保持会话状态，需要使用会话管理机制（如 Cookies）来解决。
        2）性能较低：由于 HTTP 协议在每个请求和响应都需要建立和关闭连接，若频繁地进行请求和响应，会导致较高的延迟和性能问题。这对于一些需要实时性和低延迟的应用来说可能是一个缺点。
        3）明文传输：HTTP 协议默认以明文方式传输数据，这意味着数据在网络上可能会被窃听和篡改。虽然可以通过 TLS/SSL 对 HTTP 进行加密，但是这需要额外的计算和网络资源。
        4）可伪造性：由于 HTTP 的请求和响应是以明文方式进行传输的，攻击者可以轻易地伪造或篡改请求和响应，从而可能引发安全风险。    
    尽管 HTTP 协议有一些缺点，但它仍然是应用程序之间进行通信的重要协议，特别是在 Web 开发中。为了解决一些 HTTP 协议的缺点，有时候会使用其他协议（如 WebSocket）或结合其他技术和机制（如 HTTP/2、HTTPS）来提高性能、安全性和开发效率。

28.说一下 HTTP 3.0

    HTTP/3.0 是基于 QUIC（Quick UDP Internet Connections）协议的新一代 HTTP 协议。QUIC 是一种基于 UDP 的传输协议，相比于 TCP 协议，QUIC 具有更低的延迟和更好的性能。
    HTTP/3.0 相对于 HTTP/2.0 的主要改进包括：
        1）传输协议：HTTP/3.0 使用 QUIC 作为传输协议，而不是 TCP。QUIC 可以提供更低的延迟和更好的拥塞控制，从而提高了性能和效率。
        2）多路复用：HTTP/3.0 继承了 HTTP/2.0 的多路复用特性，可以在同一个连接上同时发送多个请求和响应。
        3）0-RTT 握手：HTTP/3.0 支持 0-RTT 握手，可以在第一次连接时就发送数据，从而减少了握手的延迟。
        4）错误恢复：HTTP/3.0 引入了更好的错误恢复机制，可以更快地恢复连接中断或丢失的数据。    

29.css清除浮点的5个技巧？

    1)直接设置父元素高度
        优点：简单粗暴，方便
        缺点：有些布局中不能固定父元素高度
    2)额外标签法
        操作：
        1、在父元素内容的最后添加一个块级元素
        2、给添加的块级元素设置clear:both
        缺点：会在页面中添加额外的标签，让结构变复杂
    3)单伪元素清除法
        操作：用伪元素替代了额外标签
        优点：项目中使用，直接给标签加类即可清除浮动
    4)双伪元素清除法
        优点：
        1、项目中使用，直接给标签加类即可清除浮动
        2、解决外边距塌陷
    5)给父元素设置overflow
        操作：直接给父元素设置overflow:hidden
        优点：方便，可解决外边距塌陷

30.什么是跨域？

    同源：指两个URL的协议、域名、端口一致，反之，则是跨域
    出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互。

31.浏览器对跨域请求的拦截实现？

    浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到!

32.如何实现跨域请求？

    方案一 JSONP
        1）出现早，兼容性好（IE浏览器）
        2）是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案
        3）缺点是只支持GET请求，不支持POST请求
    方案二 CORS
        1）出现的较晚，它是W3C标准，属于Ajax请求的根本解决方案
        2）支持GET和POST请求
        3）缺点是不兼容某些低版本的浏览器