总结关于vue和js的面试题【持续更新】

一、vue

1. vue 双向数据绑定原理

Vue通过Object原型上面的defineProperty方法，
对每个Vue文件里面的data数据进行遍历，
为每一个变量或者属性通过defineProperty进行数据重写，实现双向绑定

2. 如何解绑双向数据绑定

第一定义全局的变量，然后通过json.stringify去拷贝给data里面的数据
第二就是使用v-once实现第一次以后的数据更改不会触发视图
第三自己调用defineProperty去重新写一下
通过json转换的方式，用JSON,对对象进行深拷贝
仅限于对象和数组 单个属性没办法解除
this.viewModel ={data:11 }
ps:这个问题其实面试官问的也不够严谨

3. 父子组件单向数据流

3.1、父传子：prop，slot
prop只是一个传值，子组件在script的prop中声明后可以直接进行使用
注意：
prop传递值不能在子组件进行修改，不然浏览器会报错，需要通过赋值给子组件自身申明的元素才能进行修改；
slot（插槽）:与prop不同，插槽支持html语句插入以及组件插入，只要在子组件同样写上slot就能成功展示；
注意: slot传值在父组件传值之后，在子组件进行使用需要用slot-scope属性进行声明；

3.2、子传父：emit
父组件需要写一个方法用来接收子组件传递出来的数据，而子组件则可以通过$emit(‘方法名’，数据)的方式进行父组件方法的触发和传值
注意：现在新增了一个传值的后缀.sync，通过这个后缀对于简单的状态修改，父组件可以不写方法，直接更新；
<parent :title.sync="title" ></parent>
<children @click="$emit('update:title',新数据)"></children>
如上所示：子组件只要通过updata: 拼接属性名，然后跟着新数据就可以成功更新状态
注意：新的后缀.sync不能与v-bind一起使用，也不能拼接表达式；但是你可以传一个数组进入

4. scoped的原理

scoped的解释为：让该css作用于当前组件
原理：vue通过在DOM结构以及css样式上加上唯一的标记，保证唯一，达到样式私有化，不污染全局的作用

5. vuex的有哪些属性？用处是什么？

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

二、js

1.cookies，sessionStorage 和 localStorage 的区别？

localStorage：
						存储持久数据；
						浏览器关闭后数据不丢失除非主动删除数据；
						只能本地保存；
						数据大小5M+；
sessionStorage：
						数据在当前浏览器窗口关闭后自动删除；
						只能本地保存；
						数据大小5M+
cookie：
						设置的cookie过期时间之前一直有效；
						即使窗口或浏览器关闭；
						但是cookie的数据大小不能超过4k；

2.函数防抖和节流是什么？他们之间的相同点和不同点分别是？

其实函数防抖和节流是为了优化高频率的去执行某段js代码的一个手段，因为有一些事件操作会一直频繁的去调用绑定在该事件上面的回调函数，这样会极大的浪费资源，需要对这类事件进行一个次数的限制，从而提高前端的性能

函数防抖：

在该事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，以此类推。

函数节流：

每隔一段时间，只执行一次函数，如果在这n秒内又被触发，也不会重新执行一次。

相同点：
1.都可以通过使用 setTimeout 实现
2.目的都是为了降低回调频率，从而节省计算资源。
不同点：
函数防抖：
在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现；
一定时间连续触发的事件只在最后执行一次；
函数节流：
在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能；
一段时间内只执行一次；

关于函数防抖的应用场景
连续的事件，只需触发一次回调的场景有：

搜索框搜索输入。只需用户最后一次输入完，再发送请求 手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

间隔一段时间执行一次回调的场景有：

滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交

3.关于堆和栈

简单来说，堆是引用数据存放的地址（Object 【对象、数组、函数,正则表达式】），栈是普通数据存放的地址 （Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型可以直接操作保存在变量中的实际值。）
但是有一个点要注意，当我们调用引用数据的时候，会先第一时间找栈里面的内存地址，再通过这个内存地址去堆里面拿到对应的代码

为什么基础数据可以存放再栈里？
因为它数据大小确定，内存空间大小可以分配，所以可以直接按值存放的再栈里，可以直接按值访问