vue概念总结

    1- v-show 与 v-if 的区别
        1- 操作
            v-if：向DOM树添加或者删除DOM元素    
            v-show：控制css中display属性 进行元素的显示与隐藏
        2- 编译过程    
            v-if:局部编译卸载的过程：在切换过程中，销毁或者重建 组件中的事件与子组件
            v-show:执行css的切换
        3- 编译条件
            v-if:惰性，只有条件为true的时候才会编译解析组件
            v-show:任何情况下都会自动加载，然后控制元素的显示与隐藏
        4- 性能消耗
            v-if:切换消耗高
            v-show:只有初始渲染消耗
        5- 使用场景
            v-if:改变频率不频繁
            v-show:频繁切换

2- 为什么列表渲染时要单独绑定key值
1- 唯一标识
2.因为虚拟 dom 有一个 diff 算法,key 是唯一的,不会让数据产生混乱,可以高效更新的虚拟
dom
不建议使用索引作为 key,可以使用唯一 id 作为 key
原因：如果在一个数组中插入某一个值，vue 识别后会从新分配后续索引，速度变慢, 当
删除一条数据时,他的索引也会发生变化,会让数据产生混乱

3- vue双向绑定的原理
        
        1- 观察者模式：当属性发生改变时，使用该数据的地方也会发生改变
        2- 数据劫持：object.defineproperty:给属性赋值时，程序可以感知到，从而改变属性值
v-model双向数据绑定的原理  
        1- 通过接收v-bind绑定的值
        2- 通过v-on绑定input事件来从而修改data中的数据

4- data为什么必须是函数？
    vue组件中data值不能为对象，因为对象是引用类型，每个组件的data都是内存的同一个地址，如果修改一个对象里面的数据，其他的也会被影响到，
    data 如果是一个函数，每一个函数都有自己的局部作用域，他改变的话不会影响到其他的数据。
    
5、什么虚拟DOM？

概念：
虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。
相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM

虚拟dom原理流程：
模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM

vuejs通过编译将模板（template）转成渲染函数（render），执行渲染函数可以得到一个虚拟节点树
在对 Model 进行操作的时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。

虚拟 DOM 的实现原理主要包括以下 3 部分：
用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

6- computed:计算属性
            1- 自身需要依赖另一个值得改变而使当前所在DOM更新
            2- 计算属性不可以与data中的数据重名 
            3- 计算属性的方法不需要加括号调用，方法需要单独加括号调用 因为 计算属性 不属于方法 属于属性
            4- 计算属性具有缓存机制
                当计算属性第一次获取到响应式数据时，会缓存，在后期渲染视图时，会观察响应式数据是否改变，如果改变会调用计算属性，如果没有改变会读取存储的数据，方法只用更新就会重新调用
            5- 当获取计算属性时会触发getter ，当设置修改计算机属性是会触发setter
            注意：计算属性不可以使用箭头函数，否则this不会指向这个组件的实例
7- watch:监听属性
            1- 当检测的值发生改变时，那么对应的方法会自动执行
            2- deep 开启深度监视
                发现对象内部值得变化，可以在选项参数中指定deep：true 作为深度监视，但是监听数组的变更则不需要使用
            3- immediate
                在选项参数中指定immediate：true将立即以表达式的当前值触发回调
8- computed 与 watch 的区别

1、computed擅长处理的场景：一个数据受多个数据影响；watch擅长处理的场景：一个数据影响多个数据。 
2、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
3、是否调用缓存：computed支持缓存，只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存，数据变,直接会触发相应的操作。
4、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
5、computed不支持异步 ，当computed内有异步操作时无效，无法监听数据的变化;而watch支持异步。
6、computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）

9.介绍一下Vue的响应式系统

        1、任何一个 Vue Component 都有一个与之对应的 Watcher 实例

        2、Vue 的 data 上的属性会被添加 getter 和 setter 属性

        3、当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)

        4、data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新

10.Vue的生命周期有哪些，每个生命周期函数的作用是什么
    beforecreate：
        实例已经初始化，但不能获取DOM节点。(没有data，没有el)
    created:
        实例已经创建，仍然不能获取DOM节点。(有data，没有el)
        载入阶段：
    beforemount：
        模板编译完成，但还没挂载到界面上。(有data，有el)
    mounted：
        编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
        更新阶段：
    beforeupdate：
        数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
    updated：
        更新结束后执行，此时data中的值和页面上的值都是最新的。
        销毁阶段：
    beforedestroy：
        当要销毁vue实例时，在销毁之前执行。
    destroy：
        在销毁vue实例时执行。
    actived  
        在keep-alive中使用，缓存组件激活
    deactived 
        在keep-alive中使用，缓存组件不激活

11.- 项目结构说明
        |---node_moudule            == 项目中安装的依赖模块
        |---src                        == 源码位置 开发目录
        |---|---main.js                    == 打包编译的入口文件
        |---|---App.vue                    == 项目页面入口文件、vue组件
        |---|---components                == 当前项目的公共子组件目录
        |---|---views                    == 路由组件 -- 当前项目的其他组件
        |---|---assets                    == 资源文件夹 一般放一些静态资源
        |---|---router                    == 当前项目的路由文件
        |---|---store                    == 当前项目的状态文件
        |--- public                    == 纯静态资源    
        |---|---index.html            == 入口模块文件
        |--- babel.config.js        == babel配置文件
        |--- gitnore                == 用来过滤一些版本控制的文件
        |--- package.json            == 项目文件，记载一些命令和依赖还有简要的项目描述信息
        |--- README.md                == 介绍自己项目 ，可参照github 中star多的项目
        |--- vue.config.js            == vue实例配置文件
12.
注意：库、组件、插件、框架的区别
        库    :jquery、zepto            --- 提供项目常用的方法、相当于工具包
        组件:bootstrap、swiper        --- 多个插件的集合体，提供js 结构 样式 可以快速构建页面
        插件:iScroll                    --- 把项目中某一个功能进行封装
        框架:angular（MVC）、vue（MVVM）、react、uni-app    --- 库+组件的集合体
13.- v-text v-html {{}} 的区别
        v-text 与 {{}} 区别
            1- 相同点  设置文本
            2- 不同点  插值存在页面闪烁问题 v-text 不存在闪烁
            解决办法：
                给设置插值的父标签 添加指令v-cloak  在样式中设置 [v-cloak]{display:none}    
        v-text 与 v-html 区别
            1- 相同点 设置文本
            2- 不同点 v-text 不能解析html元素，v-html可以

14、如何获取dom
        1在我们的vue项⽬中，难免会因为引⽤第三⽅库⽽需要操作DOM标签，vue为我们提供了ref属性。 ref 被⽤来给元素或⼦组件注册引⽤信息。
引⽤信息将会注册在⽗组件的 $refs 对象上。如果在普通的 DOM 元素上使⽤，引⽤指向的就是 DOM 元素；如果⽤在⼦组件上，引⽤就指向组件实例
    2.通过event事件对象
    3.通过自定义指令：directive(el)的参数el

15、简单描述每个周期具体适合哪些场景

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这⾥，如在这结束loading事件，异步请求也适宜在这⾥调⽤
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统⼀处理，在这⾥写上相应函数
beforeDestroy : 可以做⼀个确认停⽌事件的确认框
nextTick : 更新数据后⽴即操作dom

16、使用箭头函数应注意什么？

用了箭头函数，this就不是指向window，而是父级（指向是可变的）
不能够使用arguments对象
不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
不可以使用yield命令，因此箭头函数不能用作 Generator 函数
17.、介绍下 Set、Map的区别？
应用场景Set用于数据重组，Map用于数据储存
Set:

成员不能重复
只有键值没有键名，类似数组
可以遍历，方法有add, delete,has

Map:

本质上是健值对的集合，类似集合
可以遍历，可以跟各种数据格式转换

18- 数据代理
    通过一个对象代理另一个对象中属性的操作（读get、写set）
    vue中的数据代理：
        通过 vm 来代理 data对象中属性的操作
    为什么使用数据代理：
        更加方便的操作data中的数据
    数据代理的工作原理：
        Object.defineproperty()把data对象中所有属性添加到vm上，为每添加的每一个属性都制定了getter和setter，
        可以通过getter和setter对data对象中属性执行读与写的操作
19.请简述你对 vue 的理解
Vue 是一套构建用户界面的渐进式的自底向上增量开发的 MVVM 框架，
核心是关注视图层，vue 的核心是为了解决数据的绑定问题，为了开发大
型单页面应用和组件化，所以 vue 的核心思想是数据驱动和组件化，这
里也说一下 MVVM 思想，MVVM 思想是 模型 视图 vm 是 v 和 m 连
接的桥梁，当模型层数据修改时，VM 层会检测到，并通知视图层进行相
应修改

20. Vue 单页面的优缺点
单页面 spa
优点：前后端分离 用户体验好 一个字 快 内容改变不需要重新加载整
个页面
缺点：不利于 seo， 初次加载时耗长（浏览器一开始就要加载 html css
js ，所有的页面内容都包含在主页面中） ，页面复杂度提高了，导航不
可用    
21.、 为什么使用Vue？

优点：轻量级的框架、双向数据绑定、组件化开发、单页面路由、学习成本低、虚拟dom、渐进式框架、数据和结构的分离、运行速度快、插件化
缺点：不支持ie8以下、社区没有angular和react丰富、缺乏高阶教程和文档、单页面应用不利用seo优化、首次加载时耗时多

22、vue常⽤的修饰符

.stop:等统⼀JavaScript中的event.stopPropagation(),防⽌事件冒泡
.prevent:等同于JavaScript中的event。preventDefault(),防⽌执⾏预设的⾏为(如果事件可取消，则取消该事件，⽽不停⽌事件的进⼀步
传播)；
.capture:与事件冒泡的⽅向相反，事件捕获由外到内
.self:只会触发⾃⼰范围内的事件，不包含⼦元素；
.once:只会触发⼀次。

23.Let 与 var 与 const 的区别
Var 声明的变量会挂载在 window 上，而 let 和 const 声明的变量不会
Var 声明的变量存在变量提升，let 和 const 不存在变量提升
同一作用域下 var 可以声明同名变量，let 和 const、不可以
Let 和 const 声明会形成块级作用域
Let 暂存死区
Const 一旦声明必须赋值，不能用 null 占位，声明后不能再修改，如果
声明的是复合类型数据，可以修改属性

24.数组方法有哪些请简述
push() 从后面添加元素，返回值为添加完后的数组的长度
arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素
arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素
arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度
arr.splice(i,n) 删除从 i(索引值)开始之后的那个元素。返回值是删除的元
素
arr.concat() 连接两个数组 返回值为连接后的新数组
str.split() 将字符串转化为数组
arr.sort() 将数组进行排序,返回值是排好的数组，默认是按照最左边的数
字进行排序，不是按照数字大小排序的
arr.reverse() 将数组反转,返回值是反转后的数组
arr.slice(start,end) 切去索引值 start 到索引值 end 的数组，不包含 end
索引的值，返回值是切出来的数组
arr.forEach(callback) 遍历数组,无 return 即使有 return，也不会返回
任何值，并且会影响原来的数组
arr.map(callback) 映射数组(遍历数组),有 return 返回一个新数组 。
arr.filter(callback) 过滤数组，返回一个满足要求的数组

25、ES6 的新特性有哪些，举例说明。
1.新增了块级作用域（let，const）
2.提供了定义类的语法糖（class）
3.新增了一种基本数据类型（Symbol）
4.新增了变量的解构赋值
5.函数参数允许设置默认值，引入了 rest 参数，新增了箭头函数。
6.数组新增了一些 API，如 isArray / from / of 方法；数组实例新增了 entries()，keys() 和 values()
等方法。
7.对象和数组新增了扩展运算符
8.ES6 新增了模块化（import / export）
9.ES6 新增了 Set 和 Map 数据结构。
10.ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例
11.ES6 新增了生成器（Generator）和遍历器（Iterator）

26
组件通信
          1.父传子  父组件 v-bind  
                 子组件 props
                    props - 对象【详细、简单】、数组
                        props:{
                            属性名:类型,
                            属性名:类型
                        }
                        props:['属性名'，'属性名']
                        props:{
                            属性名:{
                                type:类型，
                                required：必填项  true - 必填 false反之
                                default：默认值
                            }
                        }
            
          子传父
            子组件：this.$emit("事件名",参数) 触发事件
            父组件：v-on：自定义事件名=“事件处理函数”  @自定义事件名=“事件处理函数” 监听事件 绑定事件
            
         2. 任意组件 全局事件总线\vuex\pubsub
            添加：
                全局配置：main.js
                    beforeCreate(){
                        Vue.prototype.$bus=this
                    }
                子组件：this.$bus.$emit("事件"，参数)触发事件
                父组件：this.$bus.$on监听事件
                        this.$bus.$off("事件名") 销毁之前 销毁绑定的事件
         3. 依赖注入：跨代传参
            可以跨代传参 也可以父子传参
            依赖：provide(){return{arr:[]}}: 函数 对象  返回的的都是对象  依赖当前所在组件的属性向其他组件注入
            注入：inject:['arr']
            
            4组件通行：ref $refs  
            5.$attrs与 $listeners
            Attrs接收没有被props接收的属性   不接受 class id key等属性
            $listeners获取父作用域内传入的自定义事件
            6.vuex
            7$children / $parent

27.本地存储与cookie区别
Cookie，localStorage，sessionStorage

三者的异同
      1.特性
Cookie
localStorage
sessionStorage
      2. 数据的生命期
Cookie：一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默认是关闭浏览器后失效
localStorage，sessionStorage：除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除
      3.存放数据大小
Cookie：4K 左右
localStorage，sessionStorage：一般为 5MB
      4.与服务器端通信
Cookie：每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题
localStorage，sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信
      5.易用性
Cookie：需要程序员自己封装，源生的 Cookie 接口不友好
localStorage，sessionStorage：源生接口可以接受，亦可再次封装来对 Object 和 Array 有更好的支持

5.箭头函数与普通函数的区别
箭头函数是匿名函数，不能作为构造函数，不能使用 new
箭头函数不能绑定 arguments，要用 rest 参数解决
箭头函数没有原型属性
箭头函数的 this 永远指向其上下文的 this，
箭头函数不能绑定 this，会捕获其所在的上下文的 this 值，作为自己的
this 

28.什么是MVVM?
    MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。
    View层是视图层，也就是用户界面。前端主要由HTML和CSS来构建；
    Model层 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端的提供的API接口；
    ViewModel层是视图数据层，一个同步View和Model的对象。

    在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。
    ViewModel通过双向数据绑定把View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

  

29.ref/$refs通信方式与获取dom
    .ref可以作为父子组件通信的一种方式，通信形式为父组件引用子组件。
  特殊属性ref
    1.在vue中，组件或原生标签上的ref属性用于注册引用信息。

    2.通过ref我们可以获取
        （1）原生标签的dom对象
        （2）组件实例，
    3.通过获取的原生标签的dom对象，我们可以使用
        （1）dom对象上的属性
        （2）dom对象的方法
    4.通过组件实例我们可以使用组件的
        （1）数据（定义的data，props，computed等等）
        （2）方法。
    5.组件实例属性$refs
        1.每一个组件都有一个实例属性$refs，用于获取该组件下所有注册的引用信息
        2.通过获取的引用，父组件可以直接访问该引用子组件的数据和方法，从而实现通信。
    注意事项
        1.$refs 只会在组件渲染完成之后生效，且有时就算写在mounted生命周期里都访问不到

31.什么是vue框架、Vue的优点和缺点分别是什么
    01.Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，
       并提供了一套声明式的、组件化的编程模型，帮助高效地开发用户界面。
    02.优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开
       缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长

32. 什么是组件？组件化和模块化的区别？
    01.组件的出现就是为了拆分Vue实例的代码量 能够让我们以不同的组件来划分不同的功能模块 
       需要什么功能就去调用对应的模块即可 局部功能界面
    02.模块化是从代码的逻辑角度去划分的 方便代码分层开发 保证每个功能模块的职能单一
          组件化是从UI界面的角度进行划分的 前端的组件化方便UI组件的重用

33.请简述 vue 的单向数据流
    父级 prop 的更新会向下流动到子组件中，每次父组件发生更新，子组件
    所有的 prop 都会刷新为最新的值
    数据从父组件传递给子组件，只能单向绑定，子组件内部不能直接修改
    父组件传递过来的数据，（可以使用 data 和 computed 解决）

34.vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？
    01.
       看实际情况，一般在 created（或 beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。
    02.在 created 的时候，视图中的 html 并没有渲染出来，所以此时如
       果直接去操作 html 的 dom 节点，一定找不到相关的元素
       而在 mounted 中，由于此时 html 已经渲染出来了，所以可以直
       接操作 dom 节点，（此时 document.getelementById 即可生效了）。

35 vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享
并以相应的规则保证状态以一种可预测的方式发生变化(响应式的)。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)

36.vuex优点
  1. 能够在 vuex 中集中管理共享的数据，便于开发和后期进行维护

  2. 能够高效的实现组件之间的数据共享，提高开发效率

  3. 存储在 vuex 中的数据是响应式的，当数据发生改变时，页面中的视图也会同步更新

  4.vuex中的数据操作可以在开发阶段通过开发调试工具来进行追踪，便于开发
简单来说，vuex 就是为了实现组件间通信的。使用 vuex 的好处：可以跨层级进行通信；vuex 中的所有操作都有记录；vuex 独立于组件系统，是专门用来管理数据的框架。

37.“单向数据流”理念
状态，驱动应用的数据源；
视图，以声明方式将状态映射到视图；
操作，响应在视图上的用户输入导致的状态变化

38什么是多个组件共享状态
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

39.vuex的五个核心
  1. state：存放状态(全局状态数据) 必填项

  2. mutations：对于 state 成员进行同步修改操作（也可以支持异步操作）

  3.getters：获取 state 中的数据，类似于组件中的计算属性

  4. actions：进行异步操作，异步得到结果后通知 mutation 修改 state 成员

 5. modules：模块化状态管理，多状态文件管理时使用，开发项目时多为多模块项目
在多模块 vuex 中会有配置namespaced:true开启命名空间

40.mapState 辅助函数
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

41.Vuex和单纯的全局对象有什么区别？
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

42、说说你对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

基于上面一点，SPA 相对对服务器压力小；

前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

43各模块在流程中的功能：
Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
dispatch：操作行为触发方法，是唯一能执行action的方法。
actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。可以定义异步函数，并在回调中提交mutation,就相当于异步更新了state中的字段
commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
mutations：状态改变操作方法，由actions中的commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。
state：state中存放页面共享的状态字段
getters：相当于当前模块state的计算属性

44.Vuex中 action 和 mutation 的区别
Action 可以包含任意异步操作。
Action 提交的是 mutation，而不是直接变更状态。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

45什么是路由
Vue Router 是 Vue.js 官方的路由管理器，或者说是SPA（单页应用）的路径管理器。再通俗的

说，vue-router就是WebApp的链接路径管理系统。

它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则

是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关

系。

46为什么不能用a标签
为什么不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行npm run build时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。

47.vue包含的功能
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

48 Axios 是什么
Axios 是一个基于 promise 网络请求库
特性
    1.从浏览器创建 XMLHttpRequests
  2. 从 node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求和响应数据
  6. 取消请求
  7. 自动转换JSON数据
  8. 客户端支持防御XSRF

49、说一说你对 promise 的理解。
promise 是异步编程的一种方案，解决了地狱回调的问题，是一种链式调动的方式
Promise 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结
果。
promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。
Promise 是一个构造函数，对外提供统一的 API，自己身上有 all、reject、resolve 等方法，原型上
有 then、catch 等方

50、路由中，query 参数和 params 参数的区别？ 至少列举两条
1、query 传参配置的是 path，而 params 传参配置的是 name，在 params 中配置 path 无效
2、query 在路由配置不需要设置参数，而 params 必须设置
3、query 传递的参数会显示在地址栏中
4、params 传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
5、接收参数使用 this.$router 后面就是搭配路由的名称就能获取到参数的值

51、详细说明$route 和$router 的区别？(至少 20 字以上，可得分)
$route：获取路由信息 指当前路由实例跳转到的路由对象
包括：
$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews
$route.name 当前路由的名字，如果没有使用具体路径，则名字为空
$route.router 路由规则所属的路由器
$route.matchd 数组，包含当前匹配的路径中所包含的所有片段所对象的配置参数对
象
$route.query 对象，包含路由中查询参数的键值对。会拼接到路由 url 后面
$route.params 对象，含路有种的动态片段和全匹配片段的键值对，不会拼接到路由
的 url 后面
$router：获取路由整个实例 指整个路由实例，可操控整个路由
通过‘$router.push’往其中添加任意的路由对象 钩子函数等

52、Vue 中，导航守卫各自有什么特点，以及自带的参数各自的作用。
全局前置守卫：beforeEach
全局解析守卫：beforeResolve
全局后置钩子：afterEach
路由独享守卫：beforeEnter
组件内---进入：beforeRouteEnter
组件内---更新：beforeRouteUpdate
组件内---离开：beforeRouteLeave
里面的三个参数：
to : 即将要进入的目标 路由对象
from : 当前导航正要离开的路由
next() 通过调用 next 方法 才会进入到目标路由对象
Next()默认参数为：
True:允许跳转，
False: 拒绝跳转，
路由路径: 跳转到该路径
函数：在跳转前进行逻辑处理，从而决定是否跳转。
函数内的参数可以获取到组件的实例

53、Vue2与vue3的区别
1、双向数据绑定原理不同

vue2：vue2的双向数据绑定是利用ES5的一个API：Object.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。

vue3：vue3中使用了ES6的Proxy API对数据代理。相比vue2.x，使用proxy的优势如下：

defineProperty只能监听某个属性，不能对全对象监听

可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)

可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2、是否支持碎片

vue2：vue2不支持碎片。

vue3：vue3支持碎片（Fragments），就是说可以拥有多个根节点。

3、API类型不同

vue2：vue2使用选项类型api，选项型api在代码里分割了不同的属性：data,computed,methods等。

vue3：vue3使用组合式api，新的合成型api能让我们使用方法来分割，相比于旧的api使用属性来分组，这样代码会更加简便和整洁。

4、定义数据变量和方法不同

vue2：vue2是把数据放入data中，在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。

vue3：，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：

从vue引入reactive；

使用reactive() 方法来声明数据为响应性数据；

使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。

5、生命周期钩子函数不同

vue2：vue2中的生命周期：

beforeCreate 组件创建之前

created 组件创建之后

beforeMount 组价挂载到页面之前执行

mounted 组件挂载到页面之后执行

beforeUpdate 组件更新之前

updated 组件更新之后

vue3：vue3中的生命周期：

setup 开始创建组件前

onBeforeMount 组价挂载到页面之前执行

onMounted 组件挂载到页面之后执行

onBeforeUpdate 组件更新之前

onUpdated 组件更新之后

而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外，vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

6、父子传参不同

vue2：父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和对象。

vue3：父传子，用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、指令与插槽不同

vue2：vue2中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

vue3：vue3中必须使用v-slot的形式；vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；vue3中移除v-on.native修饰符；vue3中移除过滤器filter。

8、main.js文件不同

vue2：vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数。

vue3：vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。

关键词：

组合式api；proxy；支持碎片；组合式api；composition；生命周期；

54、ref的理解：
1）、功能：接受一个内部值，返回一个响应式的、可更改的 ref 对象，ref对象只有一个属性：value。
2）、使用ref对象：模板上不需要写 .value 属性（会自动解构），在js中，使用 .value 来完成数据的读写。
3）、ref接收基本类型和引用类型
ref可以接收基本类型。当接收的值为引用类型是，会自动将一个ref对象转为proxy对象
关键词：value，响应式，

了解：
shallowRef 
 -- 只处理了value的响应式，不进行对象的reactive处理【此类操作我们可以理解为浅响应式】
-- 当一个对象数据后面会产生新的对象替代 可以使用shallowRef

55、setup是什么，作用、执行时机、返回值函数的参数
setup是什么，作用
1、新的选项，所有的组合api函数都在此使用，只在初始化时执行一次
2、函数如果返回对象，对象中的属性与方法，在模板中可以直接使用
执行时机：
1、在beforeCreate之前执行一次，此时组件对象还没有创建
2、This的值为undefined，不能通过this操作 data、computed、methods、props
3、所有的composition api 都不能使用this
返回值：
1、一般都返回一个对象，用于向模板返回数据，返回的数据模板可以直接使用
2、返回的对象的属性与data返回的数据 在组件对象中属性合并
3、返回的对象的方法与methods返回的数据 在组件对象中方法合并
4、切记：
(1)    如遇相同名字 setup优先
(2)    Methods可以访问setup中属性与方法，setup不可以访问data与methods ，此方式不推荐使用
(3)    Setup不能是一个异步函数，如果设置为异步函数返回的是一个promise，模板不能获取到return返回的对象

参数:setup(props, context) / setup(props, {attrs, slots, emit})
props：接收组件的属性，

context：上下文对象，包括 slots，attrs，emit，expose
(1) attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
(2) slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
(3) emit: 用来分发自定义事件的函数, 相当于 this.$emit

56、reactive的理解：
答案：
1）功能：
接收普通对象数据，返回一个响应式代理对象，这个普通对象可以是多个数据
2）使用：
操作属性时，可以直接使用，不需要通过.value获取
3）注意：
a.    响应式转换是“深层的”会影响对象内部多有嵌套的属性
b.    通过代理对象，源对象的内部数据也是响应式的

关键词：对象、proxy、深层、数组、Map
了解：
ShallowReactive 只处理了对象内外层的响应式【也可以理解为是浅响应式】
当一组数据变化时只需要修改最外层数据，不需要调整内部时，可以使用此方法

57、vue3和vue2生命周期的变化，以及compositionApi中的生命周期钩子函数
答案：

1、Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

beforeDestroy改名为 beforeUnmount

destroyed改名为 unmounted

2、Vue3.0也提供了 Composition API 形式的生命周期钩子，Option API形式的钩子对应关系如下：

beforeCreate===>setup()

created=======>setup()

beforeMount ===>onBeforeMount

mounted=======>onMounted

beforeUpdate===>onBeforeUpdate

updated =======>onUpdated

beforeUnmount ==>onBeforeUnmount

unmounted =====>onUnmounted

58、Vue3.X和vue2.X中的响应式原理分别是什么，区别是什么？
答案：

1、vue2.x的响应式

实现原理：

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

数组类型：通过重写更新数组的一系列方法（如：push，pop等）来实现拦截。（对数组的变更方法进行了包裹）。

存在问题：

新增属性、删除属性, 界面不会更新。

直接通过下标修改数组, 界面不会自动更新。

Vue3.0的响应式

实现原理:

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。

通过Reflect（反射）: 对源对象的属性进行操作。

59、reactive与ref的区别：
答案：

定义数据角度：

ref用来定义：基本类型数据。

reactive用来定义：对象（或数组）类型数据。

备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

原理角度：

ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。

reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

使用角度：

ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。

reactive定义的数据：操作数据与读取数据：均不需要.value。

60、computed
答案：

功能：computed是计算属性。和选项式api中的计算属性实现的功能一样。

参数：

可以接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。

也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

61、watch
答案：

功能：侦听数据的变化，和选项式api中的watch实现的功能一样，组合式api中watch功能更加强大，灵活。默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

参数：

第一个参数：侦听器的源，可以是以下几种：

一个函数（返回一个值的函数）

一个 ref

一个响应式对象

...或是由以上类型的值组成的数组

第二个参数：在（第一个参数的值）发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如：等待中的异步请求。

当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

第三个参数：可选的， 是一个对象，支持以下这些选项：

immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。

deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。参考深层侦听器。

62、watchEffect
答案：

功能： watchEffect也是监听数据，但是它会立即运行一个函数，而不是懒侦听。watchEffect的侦听（依赖）的数据：watchEffect里使用了哪个数据，哪个数据就是watchEffect的依赖。

参数：

第一个参数：要运行的副作用函数。这个副作用函数的参数也是一个函数，注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如：等待中的异步请求。（和watch的第二个参数中回调函数的第三参数一样）。

第二个参数：可选的选项，可以用来调整副作用的刷新时机或调试副作用的依赖。因为，侦听默认是在vue组件更新前调用，如果你希望组件更新后调用，可以把第二个参数传入：{ flush: 'post' }

返回值：用来停止该副作用的函数。

63、watch和watchEffect的区别
答案：

与 watchEffect() 相比，watch() 使我们可以：

懒执行副作用：watch是懒侦听执行的；watchEffect是首次就会执行

触发侦听器的来源：watch是明确知道由哪个依赖引起的侦听，watchEffect不明确

可以访问所侦听状态的前一个值和当前值：watch可以，watchEffect不可以。