vue面试题200+详解（持续更新）

谁借莪１个温暖的怀抱￠ 2022-09-08 03:46 253阅读 0赞

.  
**在vue中watch和created哪个先执行？为什么？**

> 在wacth监控数据时，设置immediate：true；会优先执行watch,created后执行;反之则反

**vue中mixins和extends有什么区别？**

> extend用于创建vue实例  
> mixins可以混入多个mixin，  
> extends只能继承一个,mixins类似于面向切面的编程（AOP），extends类似于面向对象的编程,  
> 优先级Vue.extend>extends>mixins

**vue中mixins有什么使用场景？**  
[vue mixins应用场景][vue mixins]

**在vue中created与activated有什么区别？**

> created(): 在创建vue对象时，当html渲染之前就触发，但是全局vue.js不强制刷新或者  
> 重启时只创建一次，也就是说，created()只会触发一次  
> activated():在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入  
> 页面就触发；可用于初始化页面数据

**在vue项目如何引入异步组件？**

**1.传统引入方式，即最常见的引入方式**

import leftLine from "@/views/admanage/components/stepline";
    components: {
        leftLine
      }

**2.import方式**（懒加载）

components: {
        leftLine：() => import('@/views/admanage/components/stepline'）
      },

**在vue项目中scss scoped穿透符>>>无效的解决方案有哪些？**

**为什么在v-for中的key不推荐使用随机数或者index呢？那要怎么使用才比较好呢？**

> 当数据进行更改的时候，会通过key来判断虚拟dom树是否进行了更改。如果发现了相同的dom-key就可以直接复用。减少了渲染的性能损耗

**vue-loader在webpack编译流程中的哪个阶段？**

> 以后补充

**预渲染和SSR(服务端渲染)有什么区别？**

> 服务端渲染比预渲染，多了一步执行JS的过程。  
> 服务端渲染是指将客户端渲染的过程放到了服务端，直接吐渲染后的页面（即用户看到的页面）给浏览器。  
> 预渲染直接吐真正的页面给浏览器。  
> .  
> 总结：  
> 服务端渲染的过程为：解析执行JS => 构建HTML页面 => 输出给浏览器  
> 预渲染：直接输出HTML页面给浏览器

**你有用过预渲染技术吗？怎么做的？**

[Vue 预渲染实现方案][Vue]

**使用vue如何判断页面是否编辑及编辑页面未保存离开时，给出弹窗提示**

[vue实现判断页面是否编辑及编辑页面未保存离开弹窗提示][vue]

**vue的.sync修饰符可以用表达式吗？为什么？**

[vue中的.sync修饰符用法及原理详解][vue_.sync]

**v-if和v-show哪个优先级更高？**

> v-if=“true” v-show=“false” v-if=“false” v-show=“true”  
> 不管那种，都为false，只要有false就不显示
> 
> 上面两种if是用来判断得，如果为if为true，那么v-show就会出现并执行隐藏，元素还在只是不显示，是由if进行的初始化渲染，当if为false得时候，v-show不执行，在所在元素都不显示当前得标签，不进行初始化渲染。
> 
> 当：
> 
> v-show=“false” v-if=“true”
> 
> v-show=“true” v-if=“false” 当show在前，if在后时，也是判断if，v-show=“false”  
> v-if=“true”， 当前所使用的标签还在，有进行初始化渲染。在dom中可以找到。
> 
> 当v-show=“true” v-if=“false” 也是判断if，此时if为false，所以当前标签没有被初始化渲染。
> 
> 所以if>show

[摘自：面试哥][Link 1]

**如何批量引入组件？**

[vue批量注册全局组件][vue 1]

**vue的v-for如何倒序输出？**

<div id="app">  
        <ul>  
            <template v-for="i in items">  
                <li>Index is {
       {$index}}</li>  
                <li>Content is {
       {i}}</li>  
            </template>  
        </ul>  
    </div>  
    <script>  
        var vm = new Vue({  
            el: '#app',  
            data: {  
                items: {  
                    a: "1",  
                    b: "2",  
                    c: "3"  
                }  
            }  
        })  
    </script> 
    
    当data的某个属性是一个数组时，用v-for可以遍历，但显然数组是可能变动的，因此对以下变动也进行数据绑定；
    
    push()         数组末尾添加
    
    pop()           数组末尾取出
    
    shift()          数组开头取出
    
    unshift()      数组开头添加
    
    splice()        删除并插入
    
    sort()           排序
    
    reverse()     数组顺序颠倒
    
    当利用以上方法变更数组时，被渲染的内容会实时更新；

[vue mixins]: https://blog.csdn.net/weixin_30341745/article/details/99284938?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162986091116780265482175%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162986091116780265482175&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-3-99284938.pc_search_download_positive&utm_term=vue%E4%B8%ADmixins%E6%9C%89%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF&spm=1018.2226.3001.4187
[Vue]: https://blog.csdn.net/huangjianfeng21/article/details/92421738?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162986354716780274142417%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162986354716780274142417&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~hot_rank-6-92421738.pc_search_download_positive&utm_term=vue%20%E9%A2%84%E6%B8%B2%E6%9F%93%E6%8A%80%E6%9C%AF%E6%80%8E%E4%B9%88%E5%81%9A&spm=1018.2226.3001.4449
[vue]: https://blog.csdn.net/lfcss/article/details/96485019?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162986371016780262554894%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162986371016780262554894&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v29_ecpm-1-96485019.pc_search_download_positive&utm_term=vue%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E9%A1%B5%E9%9D%A2%E6%98%AF%E5%90%A6%E7%BC%96%E8%BE%91%E5%8F%8A%E7%BC%96%E8%BE%91%E9%A1%B5%E9%9D%A2%E6%9C%AA%E4%BF%9D%E5%AD%98%E7%A6%BB%E5%BC%80&spm=1018.2226.3001.4187
[vue_.sync]: https://blog.csdn.net/liushijun_/article/details/92426854?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E7%9A%84.sync%E4%BF%AE%E9%A5%B0%E7%AC%A6%E5%8F%AF%E4%BB%A5%E7%94%A8%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%90%97%EF%BC%9F%E4%B8%BA%E4%BB%80%E4%B9%88%EF%BC%9F&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-.pc_search_download_positive&spm=1018.2226.3001.4187
[Link 1]: http://www.mianshigee.com/question/30751mcx/
[vue 1]: https://blog.csdn.net/Future1994/article/details/115249671?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0.essearch_pc_relevant&spm=1001.2101.3001.4242