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

.
在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中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穿透符>>>无效的解决方案有哪些？

<style lang="scss" scoped>
将
.a >>> .b {
  font-size: 24px;
}
</style>

改为：
<style lang="scss" scoped>
.a /deep/ .b {
  font-size: 24px;
}
</style>

或者：
<style lang="scss" scoped>
.a ::v-deep .b {
  font-size: 24px;
}
</style>

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

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

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

以后补充

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

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

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

Vue 预渲染实现方案

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

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

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

摘自：面试哥

如何批量引入组件？

vue批量注册全局组件

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()     数组顺序颠倒

当利用以上方法变更数组时，被渲染的内容会实时更新；