【VUE】-（小撒）

VUE大概基础以下：

/1. vue⽣命周期?

1.1、什么是生命周期？

vue实例从创建到销毁的过程。vue给不同的生命周期都提供了不同的函数，这给了用户在不同阶段添加自己代码的机会。

1.2、生命周期的钩子有哪些？触发时机是什么？

1. beforeCreate 创建前 data中的数据是不能使用的  

2. created 创建完成 data中的数据能用了 这是最早可以使用data数据的钩子

3. beforeMount 挂载之前 在内存中已经形成dom树，还没有渲染到页面上  

4. mounted 挂载完成 内存和页面的数据已经同步是最早可以操作dom元素的钩子

5. beforeUpdate data中的数据被修改的时候调用 执行这个钩子的时候内存数据是新的页面是旧的

6. updated 修改完成 页面和内存已经同步

7. beforeDestroy 销毁之前 data中的数据还可以执行 

8. destroyed 销毁之后

1.3、在项目的开发过程中，在生命周期中都做过哪些功能？

1. 我们可以在created中获取页面参数  

2. 在mounted中获取接口数据 给元素设置事件监听  

1.4、页面第一次加载时父子组件生命周期的执行顺序是什么 ?

父的beforeCreate->父的Created->父的beforeMount->子的四个钩子->父的mounted

/2. vuex的理解?  讲解

2.0、在什么地方用到vuex？

在项目中做 购物车或者 登录时候的token的时候用到的

2.1、什么是vuex？使用vuex能解决什么问题

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理程序的所有组件的状态。

1.解决多个组件共享状态时，单向数据流的简洁性很容易被破坏的问题

2.解决多个视图依赖同一状态的问题

2.2、Vuex的5大核心是什么

1. state 存储数据状态 死嘚他

2. mutations 里面定义可以直接操作state数据的方法  

3. actions 定义异步方法 啊课神

4. getters 对state中的数据做逻辑处理 类似于计算属性

5. modules 对项目中的状态值分模块存储

2.3、在组件中怎么调用vuex的五大核心的属性和方法

有两种方式，第一种可以使用挂载在原型上的属性和方法

第二种可以使用映射函数

挂载在原型上的属性和方法

1. state --this.$store.state.属性名

2. mutations--this.$store.commit("方法名",参数)  

3. actions this.$store.dispatch("方法名",参数)  

4. getters this.$store.getters.方法名

5. modules this.$store.state.模块名.属性

映射函数 

state --mapState 挂载computed上

mutations --mapMutations 挂载到methods中 曼色死

actions --mapActions 挂载到methods中

getters --mapGetters 挂载到computed中

2.4、vuex的执行机制 

在vue的组件中通过dispatch调用actions中的方法，在actions中通过commit调用mutations中的方法，mutations中的方法可以直接操作state中数据，只要state中的数据发生改变就会立刻响应到组件的视图中

2.5 vuex的弊端是什么?怎么解决? vuex的优缺点?

优点：

1. 能够在vuex中,集中管理共享的数据,易于开发和后期维护

2. Vuex 的状态存储是响应式的

3. 解决多层组件通信之间的麻烦

缺点：

1. 适合大型项目--不太复杂的通信我们可以使用组件通信

2. 页面刷新数据丢失--做数据持久化

\3. vue路由有⼏种模式?有什么区别?原理是什么?讲解

⾯试官您好,接下来我给您介绍⼀下vue的路由模式,vue的路由模式⼀共有两种,分别是哈希和history. 他们的区别是hash模式不会包含在http请求当中,并且hash不会重新加载⻚⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.

history的原理就是利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的. 以上就是我对vue路由模式的理解.

\4. vue路由守卫? 讲解⻚⾯权限 

⾯试官您好,接下来我给您介绍⼀下vue路由守卫,⾸先呢,所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数,我们把它称之为vue路由守卫. vue⼀共给我们提供了三种路由守卫,第⼀种全局路由守卫,第⼆种是组件内路由守卫,第三种路由独享守卫, 不管是全局,还是组件以及独享,都会有beforeEach、beforeResolve 、afterEach 分别表示路由跳转前会触发的钩⼦函数以及进⼊路由之后会触发的钩⼦函数. 这⼏个钩⼦函数⾥⾯都有⼀个回调函数,这个回调函数⾥⾯会有三个参数,分别是to,from,next,分别对应的是要进⼊的路由、离开之前的路由,和进⼊写⼀个路由

在项⽬中我们经常使⽤路由守卫实现⻚⾯的鉴权. ⽐如:当⽤户登录之后,我们会把后台返回的token以及⽤户信息保存到vuex和本地,当⻚⾯进⾏跳转的时候,我们会在路由守卫⾥⾯获取vuex⾥⾯的token,如果token存在,我们使⽤next让他进⼊要跳转的⻚⾯,如果token不存在我们使⽤next⽅法让他回到登录页

\5. v-if与v-show的区别? 

1、v-if是通过dom的节点添加或者删除来实现显示隐藏的，

2、v-show是通过css的display:none来实现显示隐藏的

3、如果为false，v-if是惰性的

4、最频繁使用是v-show

\6. v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决? 

v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,v-if还⽆法进行判断. v-for和v-if不能同时使⽤，项目需要我们可以利用计算属性过滤符合条件的数据，然后再输出

\7. methods、computed和watch的区别? 讲解

首先呢,methods是⽤来定义⽅法的区域,methods定义的⽅法需要调⽤才能触发. 不具备缓存性 ⽽computed是计算属性,他依赖于属性值的变化,当属性发⽣改变的时候,计算属性⾥⾯定义的⽅法就会触发,computed具有缓存性,依赖属性值的变化⽽变化. ⽽watch主要是⽤于监听,不具备被缓存性.依赖于数据变化⽽触发. 在项⽬中,⽐如我们获取state的状态的时候我们会把它放到computed⾥⾯,或者在写购物⻋数量计算的时候也会使⽤计算属性.。 ⽽watch也在项⽬经常使⽤,⽐如我们封装编辑和新增弹窗组件的时候会通过watch来进⾏判断是否要清空表单数据. 以上就是我对computed和watch的理解.

\8. vue组件通信?eventBus 讲解

• 父传子

  1. 父组件:在子组件标签上自定义属性，值为传递的数据 子组件:通过props接收，然后直接使用

• 子传父

  1. ⼦组件通过this.$emit("⾃定义的事件",要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来接收数据

• 兄弟组件通信

  1. 通过中央事件总线eventBus, 我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空的vue实例,通过实例对象调⽤.on⽅法进⾏接收,通过emit⽅法来进⾏发送,以上就是⾮⽗⼦组件通信的⽅式

\9. $nextTick⽅法有什么作⽤?讲解

⾸先呢, 也叫做异步更新队列方法 而 方法的主要作用就是等待 元素加载完毕之后才会执行的回调函数 我们经常会在$nextTick⽅法⾥⾯获取dom元素

\10. 说⼀下什么是mvvm模式?

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。 View 的变化会⾃动更新到 ViewModel ，ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动 同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作

\11. vue双向数据绑定原理?

vue.js 则是采⽤数据劫持结合 发布者-订阅者模式的⽅式， 通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，  在数据变动时发布消息给订阅者，触发相应的监听回调。 这个时候就可以实现数据的双向绑定

\12. vue常⽤的指令有哪些?

v-if 控制dom元素的创建或者删除 v-show 相当于displey:none里的显示隐藏 v-html 可以解析HTML代码 v-text 设置标签文本值 v-on 事件绑定 v-bind 绑定自定义动态属性 v-model 双向数据绑定 v-for 循环遍历

\13. vue常⽤的修饰符有哪些?

1. trim 去除⾸尾多余的空格

2. .stop 阻⽌事件冒泡

3. .once 只渲染⼀次 

4. .self 事件只作⽤在元素本身 

5. .number 将值转化为number类型

6. .capter 组件之间捕获

7. .prevent 阻⽌元素的默认⾏为

8. .native 事件穿透,让我们可以在⾃定义组件上定义事件和⽅法 

\14. vue如何封装可复⽤的组件?以及请举例说明你封装过的组件?讲解

\15. vue中key的作⽤是什么?

避免dom元素重复渲染. 我们⼀般在设置key的时候⾸先尽量会设置为id,或者index下标

\16. 说⼀下你对keep-alive的理解?以及在项⽬中如何使⽤?

keep-alive是vue内置的⼀个组件，⽽它的作⽤就是能够缓存不活动的组件，我们能够知道，⼀般情况下，组件进⾏切换的时候，默认会进⾏销毁，如果有需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态，⽐如说刚刚填好的表单数据。那么就可以利⽤keep-alive来实现

\17. 说⼀下什么是vue过滤器? 有⼏种?项⽬中如何使⽤,请举例说明?

所谓的vue过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据

vue的过滤器分为两种,第⼀种是全局过滤器,通过vue.filet来进⾏定义,第⼆种是局部过滤器,需要定义在组件内部

项⽬中我们通过过滤器将后台返回的状态0 和1 转化为⽀付或者未⽀付

\18. 说⼀下你对slot插槽的理解? 

插槽就是在子组件中用<slot>标签括起来的一块区域，用来展示父组件传递的结构。插槽分为匿名插槽 具名插槽和作用域插槽。

匿名插槽也是默认插槽，如果不指定名字所有的数据都会展示在匿名插槽上

具名插槽是我们常用的插槽，可以在父组件中通过v-slot:name来指定数据在哪个插槽上

作用域插槽使用子组件中的数据可以使用作用域插槽来拿,语法就是通过在子组件标签上的slot绑定一个自定义属性，然后在父组件中通过v-slot:name="变量"来拿到子组件传递的作用域数据，这个数据仅限于这个插槽中

\19. 说⼀下vue中本地跨域如何解决?线上跨域如何解决?

本地跨域是通过在vue.config.js⽂件⾥⾯的devServer属性⾥⾯的proxy属性⾥⾯配置,⼀共配置三个属性,分别是代理名称 代理

地址 开启跨域 重写路径

线上跨域是在nginx.conf⽂件⾥⾯配置, 代理名称是通过location 代理名称。proxy_pass 代理地址

\20. 说⼀下如何对axios进⾏⼆次封装?以及api如何封装?

1. 在src⽂件夹内创建utils⽂件夹
   

2. 在utils⽂件夹内创建request.js⽂件 

3. 在request.js内引⼊axios

4. 使⽤axios.create⽅法创建axios的实例,在axios.create⽅法⾥⾯可以配置请求的公共地址和超时时间以及其他的⼀些配置

5. 再创建请求拦截器和响应拦截器

6. 再请求拦截器⾥⾯可以获取vuex的token,并通过config.header.token = vuex的token,将token发送给后台

7. 在请求拦截器⾥⾯我们配置loading加载 

8. 在响应拦截器⾥⾯我们可以结束loading加载以及token的过期处理,以及错误响应信息的处理

9. 最后通过export default 导出axios的实例对象

\21. 说⼀下axios的拦截器的作⽤?应⽤场景都有哪些?

⾸先呢,axios拦截器是axios给我们提供的两个⽅法,通过这两个⽅法我们可以对请求发送之前以及响应之后进⾏逻辑的再次处理(拦截). 这两个拦截器不需要⼿动触发,只要发送http请求的时候就会⾃动触发. 我在项⽬中经常通过请求拦截器发送token, 对token进⾏过期处理,以及⼀些其他的操作

\22. 说⼀下vue和jquery的区别?

jquery他主要是⽤js封装的,主要是为了⽅便操作dom元素,⽽vue他是⼀个框架,他会从真实dom构建出⼀个虚拟的dom树,通过diff算法渲染只发⽣改变的dom元素,其他相同的dom元素不⽤在重新渲染. ⽽使⽤jquery去改变dom元素的时候,即使有相同的dom元素也会重新渲

\23. vue中data发⽣变化,视图不更新如何解决?

因为Vue实例中的数据是响应式的，⽽我们新增的属性并不是响应式的，由于受现在JavaScript的限制，Vue⽆法检测到属性的新增或删除。所以有时⽆法更新到视图上。

所以我在项⽬中遇到这类问题的时候⼀般是通过this.$set方法去解决 this.$set⽅法⼀共有三个！,分别是⽬前属性,新增属性,新增的值.以上就是我对视图不更新的理解. 【赛特】

\24. 为什么vue中data必须是⼀个函数?

如果data是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的空间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，就会造成⼀个变了全都会变的结果。所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计⽆关

\25.MVVM模式的优点以及与MVC模式的区别?

MVVM模式的优点：

1、低耦合： 视图（View）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 2、可重⽤性： 你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多 view 重⽤这段视图逻辑。 3、独⽴开发： 开发⼈员可以专注于业务逻辑和数据的开发（ViewModel），设计⼈员可以专注于⻚⾯设计。 4、可测试： 界⾯素来是⽐较难于测试的，⽽现在测试可以针对ViewModel来写。 MVVM 和 MVC 的区别： mvc 和 mvvm 其实区别并不⼤。都是⼀种设计思想。 主要区别 (肯戳了) mvc 中 Controller演变成 mvvm 中的 viewModel， mvvm 通过数据来显示视图层⽽不是节点操作。 mvvm主要解决了: mvc中⼤量的DOM 操作使⻚⾯渲染性能降低，加载速度变慢，影响⽤户体验。

\26. 怎样理解 Vue 的单向数据流?

数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。这样会防⽌从⼦组件意外改变⽗组件的状态，从⽽导致你的应⽤数据流向难以理解。 注意：在⼦组件直接⽤ v-model 绑定⽗组件传过来的 prop 这样是不规范的写法 开发环境会报警告 如果实在要改变⽗组件的 prop 值 可以再 data ⾥⾯定义⼀个变量 并⽤ prop 的值初始化它 之后⽤$emit 通知⽗组件去修改

\27. 虚拟 DOM 是什么? 有什么优缺点?

在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 所以在vue中将真实的DOM节点抽离成⼀个虚拟的DOM树,这个虚拟的DOM树就是虚拟DOM.

优点：

1. 保证性能下限 框架的虚拟 DOM 需要适配上层 API 可能产⽣的操作，它的⼀些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的

2. ⽆需⼿动操作 DOM： 我们不再需要⼿动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定

3. 跨平台： 虚拟 DOM 本质上是 JavaScript 对象,⽽ DOM 与平台强相关，相⽐之下虚拟 DOM 可以进⾏更⽅便地跨平台操作

缺点：⾸次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢

\28. Vue的di!算法原理是什么？

Vue的diff算法是平级⽐较，不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式+双指针⽅式⽐较 1、先⽐较两个节点是不是相同节点 2、相同节点⽐较属性，复⽤⽼节点 3、先⽐较⼉⼦节点，考虑⽼节点和新节点的情况 4、优化⽐较：头头、尾尾、头尾、尾头 5、⽐对查找，进⾏复⽤

\29.组件写name有啥好处？

1、增加name属性，会在components属性中增加组件本身，实现组件的递归调⽤。 2、可以表示组件的具体名称，⽅便调试和查找对应的组件。