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 destroyedactived 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 兄弟组件传值

$emit 分发

$on 监听

$off 取消监听

$once 一次性监听一个事件

在js文件中定义一个中央事件总线Bus，并暴露出来

具体的实现方式：

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。

应用场景：“退出登录” ->①点击退出登录；②修改密码后自动退出登录

11.组件跨级传值

$attrsa->b->c

$listeners监听

12.vue事件修饰符有哪些？

.stop .prevent .self .once .passive .sync

13.箭头函数中的this？

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

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只在当前组件中起作用？

事情经过是这样的，前几天上班路上，跟往常一样拿起手机看头条、逛知乎、刷掘金嘛。

过程中，看到以下这个面试题：

其实，这题很简单，不就是类似 [0, 1, 2].filter(Boolean) 这种变形题目嘛，但我却没能马上说出答案。

我知道 parseInt() 的第二个参数跟进制数相关，但由于平常多数是缺省第二个参数，平常写项目也会启用 ESLint 的 radix 规则，但规则启用时也几乎是填写 10 作为实参，因为涉及其他进制数的情况确实很少很少...

所以，趁机再熟悉下 parseInt(string, radix) 这个函数，也是挺不错的。

回到上面的题目，分解一下，就是返回以下三个运算结果组成的数组嘛：

对于 parseInt() 函数，仅接收两个参数，所以第三个参数实际上没有任何作用，因此 ['1', '2', '3'].map(parseInt) 结果就是：

但这篇文章的重点并非是答案，我们应该关注 parseInt(string, radix) 函数本身。

如果常用 ESLint 的同学，应该知道它有一个规则 radix 是跟 parseInt() 相关的。

看个例子，它们分别打印什么结果？

我为什么写成 57 呢？是写错了吗？明明在浏览器中 parseInt('071') 都是打印出 71 呢！

先别急，我们知道在「严格模式」下，是不允许使用以 0 开头的八进制语法的。

但我想，你有可能不知道的是，其实在 ES6 标准发布之前，ECMAScript 是没有八进制语法的，至于类似 071 这种八进制表示法它只是被所有浏览器厂商支持罢了。 就好比如 Object.prototype.__proto__ 从来就不是 ECMAScript 的标准语法一样，但所有浏览器都支持罢了，标准语法是 Object.getPrototypeOf() 。

回到 parseInt(string, radix) 与八进制的话题上，

本着求真的态度，拿出了上古神器去验证并得出结果： 在 IE8 及以下浏览器 parseInt('071') 打印结果为 57 （下图），而 IE9 及以上则为 71 。

随着 JavaScript 的飞速发展，浏览器厂商们都向标准靠近了，不再肆意我行我素了。至于浏览器 parseInt('071') 打印结果是 71 ，原因正是现在的浏览器 JS 引擎是以 10 为基数进行解析了。

尽管 2022 年了，但仍要兼容旧版（远古）浏览器，所以显式指定 radix 参数是非常有必要的。本节用一个比较典型的案例来说明，使用 parseInt 函数时，应当指定 radix 参数。

在 JavaScript 中，有四种进制数的表示语法：

解析一个字符串并返回指定基数的「十进制整数」或者 NaN 。

但请注意，并不是所有的字母开头的都返回 NaN 。比如 parseInt('a11', 12) 返回值为 1453 。因为超过十进制之后，字母也可能用于表示相应的进制数的。

所以，在使用 parseInt 处理 BigInt 类型的时候，最终的返回值总是为 Number 类型（过程中会失去精度），其中 BigInt 类型的拖尾的 n 是会被丢弃的。

原因非常的简单，前面也提到过的。当 parseInt 的第一个参数不是 String 类型时，会调用 BigInt.prototype.toString() 方法先转换为字符串，即 1024n.toString() ，结果为 1024 。

回到文章开头的题目：

这时候，是不是就可以快速说出答案了： [1, NaN, NaN] 。

借机彻底弄懂了 parseInt() 的方法，可以满意地离开了，The end.