vue面试

https://blog.csdn.net/kellywong/article/details/106430977

一，js基本

1，数据类型：
JS数据类型：JS的基本类型和引用类型
基本类型（单类型）： String、Number、boolean、null、undefined。
引用类型：object。包含的 Array、function、Date。

null 和 undefined 有什么区别
undefined 是没有定义的，没有初始化，，null 是定义了但是为空，是不存在的对象。

判断数据类型：
typeof 不能区分数组和对象，和 null
instanceof 在判断数组和Data很好用。 判断是否是数组：Array.isArray(arr)。
Object.prototype.toString.call 可以判断基本类型和数组，对象

2，基本数据类型和引用数据类型区别：
1，内存的分配不一样，
2，参数传递不一样，基本类型数据值不会改变；引用数据值会改变旧对象，因为它传的值是内存引用的地址。
3，复制变量时，引用数据类型值可改变，修改新对象会改变旧对象；因为复制是内存引用地址，还是公用一块内存。
https://www.cnblogs.com/Mr-Rshare/p/11434186.html

3，闭包内存泄露解决方案，减少内存泄露

1，定时器没有清除
2，意外的使用全局变量，window 对象的数据是不会回收的
3，闭包的使用，了解闭包的预期生命周期和用途
4，减少过多的console打印，只打印必要的信息出来

4，Js垃圾回收机制

垃圾回收机制：找出那些不再继续使用的变量，然后释放其占用的内存

JS 垃圾回收机制：采用标记清除法，和引用计数

5，js面相对象的继承有哪些方法
https://www.cnblogs.com/gaosirs/p/10637609.html

6，面向对象怎么实现重写，重载
7，js怎么实现父方法一个参数调用一个方法，2个参数调用另外一个方法

JavaScript 常见的设计模式

有哪些设计模式：设计模式是解决某个特定场景下的解决方案

创建型模式：工厂模式， 单例模式，原型模式； 结构模式：组合模式， 代理模式。 行为模式：观察者模式，迭代器模式， 策略模式， 访问者模式，开发者模式

订阅发布者模式：是一种消息转递的机制，他由中间人对象，订阅者，发布者组成；订阅者接收消息，发布者发布消息。
原理：中间人对象定义一个数组，订阅方法，发布方法。订阅方法：往数组里保存回调函数；发布方法：遍历所有回调，进行调用，同时传入参数。

工厂模式：创建一个类，实现工厂方法，使用工厂方法创建对象。 工厂模式将对象的创建和实现过程分离。

单例模式：一个类只有一个实例，只能创建单个对象，单例类只有唯一的实例。 并提供一个访问它的全局访问点。

原型模式：在原型上创建对象，可以节省性能和内存空间，减少重复代码。

观察者模式：它定义了一种一对多的关系，让多个观察者同时监听一个对象，被监听的对象状态发生改变就会通知所有观察者，这样就实现自动更新。

8，组件的传值

1，父传子：通过props传值， 子传父：子组件通过 父组件传递的事件newList，把值传给父组件
2，通过在组件定义ref的引用，就可以拿到子组件数据和方法 来传值
3，跨级传递：使用useContext来传值 ；
　　 3.1 用 provide(povd) / inject 依赖注入，跨层级直接向子组件传递数据：provide定义一个变量，通过inject来接收。
　　 3.2 订阅发布者模式也可以传参
4，路由地址栏参数拼接也可以传参

5，Vue中央总线池也可以传参； vuex状态共享也可以传参。

9，react和vue的区别及优缺点

1，Vue的思想是响应式的，基于数据可变的。
1.1 模板写法不一样，vue支持在html里写Css和js, 操作Dom方便。还有指令if, v-for,

 优点: 入门容易，开源组件丰富，框架功能完善，文档较为详细，
 缺点: 插件引入不够规范，代码提示变弱，不利于维护。

2，react整体是函数式的思想，数据不可变，单向数据流。
2.2 通过js来操作一切，模板写法在js里写html和css，
优点: 框架功能强大，非常灵活，设计非常规范，开发理念清晰，
缺点: 代码有些繁琐，选择表达式，父子状态不同步，需要自己写回调同步状态。因为太灵活，容易导致项目混乱。

10，vue中 keys 的作用是什么

Keys 是唯一标识

1，在渲染的时候，会把新dom和旧dom进行对比，如果dom一致，就会直接用旧dom，方便追踪元素，比对元素。
2，使用key值可以给dom添加一个 唯一标识符，让vue强制更新dom。
所以key的作用：可以提升渲染性能，减少元素重新渲染，还可以避免数据渲染异常。

key值在哪些地方用到过，除了v-for循环遍历的时候
1,v-for语句中使用
2,相同父元素下的子元素可以使用key
3,利用 key 一旦更改元素就会销毁重新创建的特性，实现强制替换元素 或触发完整的生命周期钩子
4,在重新渲染的时候更快，可以用来控制组件刷新

11，为什么虚拟 dom 会提高性能(必考)

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 js 算法对dom进行比对，避免了没有必要的 dom 操作，从而提高性能。用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的DOM 树上，视图就更新了。

二，webpack

1，loader 是什么，有什么用：loader和plugin区别
是 webpack 用于在编译时解析各类文件格式，并输出来，比如：解析css-loader，sass-loader，babel-loader

Plugin 是什么：
是 webpack 用于在编译过程中利用钩子进行自定义函数，实现编译过程的可控，而Plugin用在解析模板文件，压缩代码，css压缩，打包zip包

2，webpack常见性能优化

.减少不必要的模块依赖

.减少不必要的loader处理

.使用cache-loader进行缓存文件,缓存loader

.开启多线程打包

.代码压缩

https://blog.csdn.net/Mr_RedStar/article/details/123462435

假如拿到一个上线项目想要优化，从什么地方开始着手

1，首屏进入添加loading，
2，html优化
删除不必要的注释，使用语义化标签，减少dom的层级，减少重排。
3,javaScript优化

  将javaScript脚本放到页面底部，合理的ajax请求，使用懒加载，代码结构优化，

4，css优化

  css文件压缩，css层级嵌套不要太多，删除无用的css，异步加载非首屏css
 

5，图片优化

       图片压缩，小图片合成雪碧图 减少http请求，采用svg和base64类型图片

6，webpack构建优化

       减少重复和不需要的依赖，减少不必要的loader处理，模块懒加载，配置压缩css和js代码。

3，webpage配置什么把es6的代码转为es5

安装babel-loader就可以

4，css工程化

CSS工程化：将代码层次化，容易看出嵌套关系；精简代码，提高效率。

一般使用SASS和LESS来实现工程化

SASS：一般使用变量，嵌套，混合，继承等功能

三，vue

1，生命周期
vue中的create(克rt)和mount的区别
create是初始化阶段，此阶段是数据观测，还没有生成dom，所以无法获取操作dom
mount挂载真实dom，可以操作dom节点

1，keep-alive作用
keep-alive可以使组件活着保留状态，避免重新渲染。一旦使用KeepAlive时mouted等生命周期钩子只会第一次进入时调用，以后就不会调用。减少重复发送请求的

2，vue之mixin的作用是什么，原理，有什么优缺点。
vue的mixin(混入)就是混入代码
vue之mixin定义：非常简单，它就是一个对象而已，对象包含vue组件常见配置，如data,created,mounted。
vue的mixins(混入)是一种将可复用代码和逻辑提取出来，哪个组件需要用时，注入到组件中的方式。通过mixins，可以将一些常见的功能和逻辑抽离出来，方便在多个组件中重复使用。
作用：避免代码重复，实现可复用功能；维护方便，只需要修改一个地方。
优点：提高代码复用，无需传递状态，维护方便。
缺点：存在同名变量和方法，会被组件里变量覆盖。 命名冲突，滥用后期很难维护，不好追溯原

替代方案： 很多时候要考虑用公共组件还是用mixin(混入)

3，vue插槽是什么，slot插糟有什么作用
插槽就是在组件标签中间， 预留了一个位置，书写dom内容，利用插槽把外面写的dom传到组件里， 并将组件里的内容替换掉 传入的dom
插槽有默认插槽， 和具名插槽；具名插槽：根据插槽名来插入内容。

作用：是为了方便给子组件传入dom。假如一个场景：有5个页面，这5个页面只有一个区域的内容不一样，你会怎么去写这个5个页面，复制粘贴是一种，在vue中插槽(slot)是更好的做法。

3.1，react组合，实现vue插槽功能
通过一个方法传入不同的参数，调用这个方法，然后把子组件当参数传进去，传入不同的子组件就显示不同html

4，自己实现过hooks吗
自定义 Hook 是一个函数，其名称以 “use” 开头，封装一些逻辑，可以复用减少代码冗余，函数内部可以调用其他的 Hook。
6.1,用于处理字符串(url)； 数据格式化(日期)； 单位转换

5，vue 数据双向绑定
https://blog.csdn.net/weixin_45410795/article/details/117636493

1.1，简单的双向绑定：定义一个数据状态值，绑定到value属性上，通过定义一个事件，如input事件，来控制改变这个数据值，当我们在input框里输入值，它的data里面的值就会变成什么

相当于使用v-model，等价于我们去绑定了:value 和 @input。

1.2，往深的说：当创建一个Vue实例时，将遍历所有 DOM 对象，并为每个数据属性添加了 get 和 set。 get 和 set 允许 Vue 观察数据的更改并触发更新。

双向数据绑定原理
第一步视图变化更新数据，用户通过input输入框触发数据的变化。
第二步数据变化更新视图，那么问题来了：data数据变化时怎么去更新相关的视图？
vue采用数据劫持的方式来做数据绑定的，通过Object. Define(滴凡)Property(怕破挺)()来劫持属性给属性设置set，get，在set和get中添加一些更新数据的方法，就能够实现数据更新到视图。
还需要几个操作:
需要一个监听器observer, 需要一个订阅器dep, 需要一个订阅者watcher

v-model数据 打印的数据跟页面显示不同步，这个怎么解决
当我们在vue中用v-model绑定一个变量时，实际上基于组件内部的value和input事件自动创建了一个双向绑定。
但是vue并不会为组件内部对象或数组自动创建响应式属性，这导致修改普通对象和数组，并不会触发v-model绑定的数据，
这时需要手动告诉vue某个属性修改了， vue提供了$set方法来解决

6，如何实现单页面应用，实现vue路由
路由有两种模式，hash哈希模式，history(histr)模式
通常url地址后面有哈希值，当哈希值改变时，利用浏览器的onhashchange()事件监听，来控制组件的显示和隐藏。就可以实现路由不刷新跳转

7，vue路由守卫
vue-router提供的导航守卫，主要对路由跳转进行监测，控制他跳转或取消。主要作用是：如果某个页面没有授权就不能进入，就要重定向到登入页面
router.beforeEach((to, from) =>{next }) 有to, from, next() 3个参数

8，vue路由实现的原理
路由是实现页面跳转，页面的显示和隐藏功能。
在vue中利用defineProperty数据劫持在原型上初始化一些getter属性，包含router信息。
当router触发setter方法时，就会通知组件。
在初始化的时候，会判断要挂载路由的模式，是hash还是history，再调用hashchange方法，更新路由重新渲染。

9，路由懒加载
作用：是首屏加载没必要加载整个项目文件，路由懒加载就可以实现只加载，当前页面所需要的组件和代码；把路由分割开来。
只需要把导入组件的方式，改为动态导入

10，vue-router的原理
1.监听url的变化， 2，匹配路由规则， 3，渲染组件。

vue-router还提供 $router.push()和 $router.replace()跳转和替换

四，

1，什么叫事件冒泡，事件捕获
vue-devtools应用

2，vue合成事件和原生事件有什么区别
合成事件机制：React并不是将click事件直接绑定在dom上面，而是采用事件冒泡的形式冒泡到document上面，
在document处监听所有事件，将事件内容封装并交由处理函数运行。这样减少了内存的消耗

3，vue diff算法, vue diff和react diff有什么不同
用 Js 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
把差异的部分构建的真正的DOM树上(patch)，视图就更新了
diff算法是通过对同层的树节点进行比较，这样复杂度就很低

5，vue2.0和 vue3.0的区别
1.性能比2.x快1.2～2倍，在vue3中，diff算法的优化，增加了静态标记，减少了虚拟dom比对
重构了响应系统：使用代理替换object.defineProperty，可以直接监听数组类型的数据变化
2,按需编译，体积比Vue2.x更小
3,组合API，将逻辑相同的代码放在一起，方便重复利用
4,更好的TS支持，vue2不适合使用ts
5,更先进的组件
vue3.0：https://juejin.cn/post/6955129410705948702

7，vue自定义指令及原理
vue.directive 定义一个指令，vue自定义指令相当于自己封装的一个函数方法，方便在其他地方调用

9，判断对象是否为空

var arr = Object.keys(data);
alert(arr.length == 0); //true 为空， false 不为空
var b = (JSON.stringify(data) == "{}");
alert(b);   //true 为空， false 不为空
 10, 对象的遍历

objet.key().map()
for(let key in obj){
 console.log(key, obj[key])
} 

for in 和 for of的区别

1.1，for in用来遍历对象，在遍历对象时还会遍历原型上的属性。会导致性能下降。遍历对象还可以用:Object.keys()
1.2，for of 用来遍历有序结构数据：数组，字符串，dom列表，map, set。不能遍历对象。
1.3，for in可以遍历数组，但是得到是下标，并不是数组元素。

const obj1 = {name:'joy',sex:'male'}
for (let key in obj1) {
  if(obj1.hasOwnproperty(key)) {
    console.log(key, obj1[key])
}
}
const arr = [1,2,3]
 for(let value of arr) {
   console.log(value)
}

ES6的高阶函数: 高阶函数，如 map ，reduce ，filter

//新的写法: filter / map / reduce
    // filter中的回调函数有一个要求：必须返回一个bollean值
        // true : 当返回true时，函数内部会自动将这次回调的n加入到新的数组中
        // false: 当返回fasle时，函数内部会过滤掉这次的n。
        let new_nums = nums.filter(function (n) {
            return n < 100
        })

    // map 映射函数
        let new_nums1 = new_nums.map(function (n) {
            return n * 3
        })

    // reduce(func(上一次结果 初始值为默认值，数组的n),默认值=0) 对数组中所有的内容进行汇总。
        let new_nums2 = new_nums1.reduce(function (prev,n){
            return prev + n
        },0)

//或者可以写成
    let new_writeNums = nums.filter(function (n){return n < 100}).map(function(n){return n * 3}).reduce(function(prev,n){return prev + n},0)

11，BFC是什么，有什么用，如何实现
BFC直译为"块级格式化上下文"。它是一个独立的渲染区域，
作用：清除浮动，实现自适应布局

12，如何实现12px以下字体
使用transform: scale(.95) 使用图片
13，如何优化scale模糊
给缩放代码加上transform:translate3d(0,0,0)

因为不够勇敢错失过什么
https://www.douban.com/gallery/topic/308797/?from=discussing&...
生活中的“I”时刻
https://www.douban.com/gallery/topic/346273/?from=discussing&...
你如何维持情绪稳定
https://www.douban.com/gallery/topic/306654/?from=discussing&...
https://www.douban.com/gallery/topic/312948/?from=discussing&...

保持高效的学习方法

https://www.cnblogs.com/xiao2shiqi/p/15401920.html