史上最全前端vue面试题

1. 为什么会形成跨域？
   不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。
   解决方法：安装插件
   Pip install django-cors-headers

2. vuex的工作流程？
   ① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。
   ② 然后再通过actions的commit来出发mutations来修改数据。
   ③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
   ④ 最后由store触发每一个调用它的组件更新。

3. vuex是什么？怎么使用？
   vuex是一个专为vue.js应用程序开发的状态管理模式。
   使用:store,getters,mutations,actions,modules
   详细使用写法请见：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502

4. vuex中的数据在页面刷新后数据消失怎么解决？
   使用sessionStorage或localStorage存储数据;
   也可以引入vuex-persist插件

5. 在vue中，如何阻止事件冒泡和默认行为？
   在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为

6. 深拷贝与浅拷贝？
   假设B复制A，修改A的时候，看B是否变化：
   B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。
   浅拷贝只是增加了一个指针指向已存在的内存地址，
   深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。
   深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。

7. vue的生命周期？
   beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
actived deactived （keep-alive）组件是否激活调用

8. keep-alive: 组件缓存
   https://juejin.cn/post/6844903624099758094

   router.js中:
   meta: {keepAlive:true} // 需要被缓存
   钩子执行顺序：created -> mounted -> actived
   include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。
   应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。

9. vue传值方式？
   props $emit() $on() $parent $children $listener $attr

10. $on 兄弟组件传值

    var event = new Vue(); // 定义一个空的vue实例
    a组件：event.$emit('data-b', this.age);
    b组件：event.$on('data-b', age=>{
        this.age = age;
    })
    

    $emit 分发
    $on 监听
    $off 取消监听
    $once 一次性监听一个事件
    在js文件中定义一个中央事件总线Bus，并暴露出来
    具体的实现方式：

    • 在utils下新建eventBus.js

    // eventBus.js
    import Vue from 'vue';
    export default new Vue();
    

    • 在需要使用的组件中引入

    import Bus from '@/untils/eventBus.js';
    // 方法触发
    handleBus(){
        Bus.$emit('tryBus');
    }
    
    // 方法定义及实现
    Bus.$on('tryBus', ()=>{
        console.log('点着我了');
    });
    
    // 若不是全局使用，记得清除方法
    beforeDestroy(){
        Bus.$off('tryBus');
    }
    

    使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。
    应用场景：“退出登录” -> ①点击退出登录；②修改密码后自动退出登录

11. 组件跨级传值
    $attrs a->b->c
    $listeners 监听

    // a
    
    
    // b
    
    
    // c
    props:['toCVal'],
    this.$emit('fromSon');
    

12. vue事件修饰符有哪些？
    .stop .prevent .self .once .passive .sync

13. 箭头函数中的this？
    不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。

14. vue中watch与computed使用及区别？
    computed:
    支持缓存。只有依赖数据变化才会重新计算；
    不支持异步，无法监听数据变化；
    会默认走缓存，是基于响应式依赖进行缓存的，及通过data声明过或props数据计算得到；
    属性值为函数，默认走get方法；数据变化走set方法。
    watch:
    监听器，不支持缓存，数据变化直接出发；
    支持异步；
    接收两个参数，新值与旧值；
    监听数据必须是data中声明过或父组件传递props中的数据。

15. 为什么vue组件中data必须是一个函数？
    如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。

16. v-if 和 v-show区别？
    v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；
    v-if 是惰性的；v-show 做的仅是简单的css切换。

17. v-text 与 v-html区别？
    v-text 用于普通文本，不能解析html；
    v-html 反之。

18. v-for key的作用？
    使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。
    key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。

19. Scss是什么？在vue-cli中安装步骤？有哪几大特性？
    npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;
    特性：可以用变量，可以用混合器，可以嵌套等。

20. vue获取dom？
    ref

21. vue初始化页面闪动问题？
    webpack、vue-router
    v-cloak css:[v-cloak]:display:none

22. 什么是vue-router？
    vue router 是官方路由管理器。
    主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。

23. vue路由传参，接收？
    传： this.$router.push({path:'', query(params):{}})
    接：this.$router.query.xxx

24. 防抖和节流？
    节流是一定时间内执行一次函数，多用在scroll事件上；
    防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。

25. 如何让scss只在当前组件中起作用？