9月27日

1.什么叫dom树

dom树是一种结构是由dom元素和属性节点组成是将html转化成js可识别的树模型元素就是html标签属性节点是html的属性有了树模型层级结构更加清晰

2.dom树怎么比较

例如旧节点ul里面有两个小li 分别是a和b 如果新的虚拟节点是 ol里面的两个小li 分别也是a和b 就会先比较最外面的ul和ol是否节点一样在这里一定是不一样的那么就直接暴力删除旧节点创建新节点

因为dom树是html标签和html属性组成的如"

<ol class='a'></ol>"和
<ul class='b></ul>
转化成 {结构：ol，属性：'.a' . 子节点：无}  {结构：ul，属性：'.b' . 子节点：无}

两个结构不是一个标签这里用的是if判断如果是同一个标签就会比较子节点如果不是同一个标签，就会暴力拆除旧的

3.Vuex中的mutaitons和actions区别异步可以用mutations嘛

因为vuex中所有的状态更新都在mutations中进行也就是说所有的状态都会经过mutations处理每个mutation执行完成后都会对应到一个新的状态变更这时候我们就用到devtools devtools会把每个步骤就会记录下来如果mutation支持异步操作就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难

4. 如何让CSS只在当前组件中起作用

将当前组件的`<style>`修改为`<style scoped>`

5.什么是递归组件？

递归组件就是组件内部调用自己使用场景管理系统的菜单栏使用递归组件
必须加上name属性实现调用自身我们要非常注意递归结束的条件千万不要写成死循环

6.`<template></template>`有什么用？

template渲染的时候渲染成一个空标签减少不必要的DOM元素，整个结构会更加清晰

7、 methods的方法用箭头函数定义可以吗

不可以因为methods里面写的都是函数函数里面要this 如果把methods写成箭头函数就没有this实例了箭头函数没有this，this其实是外部的this

8. v-on 如何绑定多个事件？

可以通过 v-on 传入对象来绑定多个事件：

<!--单事件绑定--> 
<input type="text" @click="onClick">
<!--多事件绑定--> 
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur }">

9.created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

10.如何在组件中批量使用Vuex的getter属性

使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters(['total','discountTotal'])
    }
}

11. 如何在组件中重复使用Vuex的mutation

使用mapMutations辅助函数,在组件中这么使用

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations({
        setNumber:'SET_NUMBER',
    })
}

然后调用this.setNumber(10)相当调用this.$store.commit('SET_NUMBER',10)

12.Vue-Router 的懒加载如何实现

非懒加载

import List from '@/components/list.vue' 
const router = new VueRouter({
    routes: [
        { 
            path: '/list',
            component: List 
        } 
    ] 
})

懒加载
（1）方案一(常用)：使用箭头函数+import动态加载

const List = () => import('@/components/list.vue') 
const router = new VueRouter({
      routes: [ 
          { 
              path: '/list',
              component: List
          } 
      ] 
 })

（2）方案二：使用箭头函数+require动态加载

const router = new Router({
    routes: [ 
        { 
            path: '/list',
            component: resolve => require(['@/components/list'], resolve) 
        } 
    ]    
 })

方案三：使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

// r就是resolve 
const List = r => require.ensure([], () => r(require('@/components/list')), 'list'); // 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({ 
    routes: [ 
        { 
            path: '/list', 
            component: List,
            name: 'list' 
        } 
     ] 
 })

9月28日

1 Vue的事件绑定原理

原生 DOM 的绑定：Vue在创建真实DOM时会调用 createElm ，默认会调用 invokeCreateHooks 。会遍历当前平台下相对的属性处理代码，其中就有 updateDOMListeners 方法，内部会传入 add（） 方法

2 createElm方法

该函数主要是生成真实DOM元素，然后插入文档中

3.invokeCreateHooks 方法

就是负责执行每种数据的处理函数,很简单,就是一个单纯遍历执行的过程其中就包括处理 DOM 事件的函数,

4.updateDOMListeners 方法

主要作用就是绑定事件和解绑事件

5 add 方法

add函数的作用就是给实际的DOM节点添加原生事件

6 组件绑定事件，原生事件，自定义事件

组件绑定之间是通过Vue中自定义的 $on 方法实现的。（可以理解为：组件的 nativeOnOn 等价于普通元素on 组件的on会单独处理）

7 v-model中的实现原理及如何自定义v-model

v-model 可以看成是 value+input 方法的语法糖（组件）。原生的 v-model ，会根据标签的不同生成不同的事件与属性。解析一个指令来。
自定义：自己写 model 属性，里面放上 prop 和 event

8 常用的修饰符

表单修饰符

lazy: 失去焦点后同步信息
trim: 自动过滤首尾空格
number: 输入值转为数值类型

事件修饰符

stop：阻止冒泡
prevent：阻止默认行为
self：仅绑定元素自身触发
once：只触发一次

鼠标按钮修饰符

left：鼠标左键
right：鼠标右键
middle：鼠标中间键

9 讲讲JS的数据类型

最新的 ECMAScript 标准定义了 8种数据类型:

6 种原始类型
- Boolean
- Undefined
- Number
- BigInt
- String
- Symbol
null
Object
Function

10.浅拷贝和深拷贝的区别

浅拷贝浅拷贝只复制某个对象的引用，而不复制对象本身，新旧对象还是共享同一块内存
深拷贝深拷贝会创造一个一模一样的对象，新对象和原对象不共享内存，修改新对象不会改变原对对象

11 `ajax` 是什么?有什么优缺点

ajax 是一种创建交互网页应用的一门技术。

优点：

实现局部更新(无刷新状态下)，
减轻了服务器端的压力

缺点：

破坏了浏览器前进和后退机制(因为 ajax 自动更新机制)
ajax 请求多了，也会出现页面加载慢的情况。
搜索引擎的支持程度比较低。
ajax 的安全性问题不太好(可以用数据加密解决)。

12.`promise.all` 和 `async/await` 有什么区别?

Async Await 是基于 promise 实现，是改良版的 promise，使代码看起来更加简洁，异步代码执行像同步代码一样。

13 块级作用域解决了ES5中的两个问题：

内层变量可能覆盖外层变量
用来计数的循环变量泄露为全局变量

14 var let和const区别

变量提升 var有 let和const没有
作用域 let和const有块级作用域 var没有
变量常量 var let定义的都是变量而const定义常量常量是不能改变的
给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。简单来说就是var可以作为全局变量而const和let不行
在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

vue面试题第三期