Vue 的知识点

1.1 什么是vue⽣命周期?

答：所谓的vue⽣命周期就是vue实例从创建到销毁的整个过程我们称之为vue的 ⽣命周期,通过vue的⽣命周期我们可以在不同的阶段进⾏不同的逻辑 *** 作。

1.2 vue⽣命周期都有哪些钩⼦函数?

答：vue⽣命周期常⽤的钩⼦函数⼀共有8个，分别对应的钩⼦函数为beforeCreate 创建前、 created创建后、beforeMount 挂载前、mounted挂载后、beforeUpdate 更新前、updated更新后、beforeDestory 销毁前、 destoryed销毁后

这些钩⼦函数如何触发?

答：⻚⾯⼀开始加载的时候就会触发创建前后和挂载前后的钩⼦函数, ⽽更新的钩⼦函数需要当我们改变data的时候才能触发，销毁的钩⼦函数必须得当组件进⾏切换的时候就会进⾏销毁.

1.3 项⽬开发过程中,在⽣命周期⾥⾯都分别做过什么功能?

答：在created进⾏数据请求,或者获取本地存储的数据,还有⼀些其他的 *** 作. 除了created还有mounted,我们经常在mounted⾥⾯获取dom元素 (有时候也存在获取不到dom元素的情况,这个时候我们⼀般⽤$nextTick⽅法来解决). 以上就是我对⽣命周期的理解

.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?

答:限执行父组件的 beforeCreate => created => beforeMount => 然后执行子组件的 => beforeCreate => created => beforeMount => mounted => 父组件的mounted

2.1 什么是vuex?使⽤vuex能够解决什么问题?

答:所谓的vuex其实就是vue官⽅给我们提供的⼀个状态管理⼯具,通过vuex我们可以组件之间数据共享的问题

2.2 vuex的五⼤核⼼是什么?

答： vuex⼀共有5⼤核⼼, state,⾥⾯保存的是状态, getters 他们⽤来获取state⾥⾯的状态，有点类似于vue的计算属性 mutations 他的作⽤主要是⽤来修改state⾥⾯的数据，只能进⾏同步的 *** 作 actions可以一步修改state的数据 modules将多个状态抽离到对应js⽂件⾥⾯,最后在modules进⾏合并,这样后期就⽅便维护了

2.3 在组件⾥⾯如何调⽤五⼤核⼼的属性和⽅法?

获取state⾥⾯的状态,我们可以通过this.$store.state 获取getters状态，我们可以通过 this.$store.getters 调用mutation方法 在组件中通过 this.$store.commit('要提交的mutation的名字', 要传递的参数) 调用action方法 在组件中通过this.$store.dispacth('要触发的actionh函数名') 通过辅助函数的⽅式来进⾏调⽤和触发(mapState, mapMutation,mapAction, mapGetter）

2.4 vuex的执⾏机制是什么?

如果要改变state的状态,我们⼀般是在组件⾥⾯调⽤this.$store.dispatch⽅式来触发actions⾥⾯的⽅法,在actions⾥⾯的⽅法通过commit来调⽤mutations⾥⾯定义的⽅法来改变state,同时这也是vuex的执⾏机制

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

不过vuex也有⼀些弊端,⽐如浏览器刷新的时候,vuex的数据会丢失,我们⼀般结合本地存储来解决,在修改数据的时候通过localstorage / sessionStorage将数据存储在本地, 或者使用固化工具vuex-persist/vuex-persistedstate

3. vue路由有⼏种模式?

hash模式和history模式

路由模式的区别有什么区别?

他们的区别是hash模式不会包含在http请求当中,并且hash不会重新加载⻚⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会 报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.

原理是什么?(必问）

history的原理就是利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的

4. vue路由守卫?

vue⼀共给我们提供了三种路由守卫 第⼀种全局路由守卫, beforeEach(全局前置守卫)、beforeResolve（全局解析守卫） 、afterEach(全局后置守卫) 第⼆种是组件内路由守卫 beforeRouteEnter beforeRouteUpdate beforeRouteLeave 第三种路由独享守卫 beforeEnter 除了afterEach之外的路由守卫有三个参数,分别是to,from,next,分别对应的是要进⼊的路由、离开之前的路由,以及进⼊写⼀个路由

5. v-if与v-show的区别?(90%)

v-if 通过删除和新增dom控制内容的显示和隐藏 v-show通过css样式控制元素的显示和隐藏

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

v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断. v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯

7. methods、computed和watch的区别?(90%)。

methods是⽤来定义⽅法的区域,methods定义的⽅法需要调⽤才能触发. 不具备缓存⾏为 computed是计算属性，具有缓存性,依赖属性值的变化⽽变化 watch主要是⽤于监听,不具备被缓存性.依赖于数据变化⽽触发.

8. vue组件通信?

父传子：在父组件中给⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受 子传父：⼦组件通过this.$emit("⾃定义的事件",要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来接收传递的数据 非父子：通过中央事件总线,我们也称之为eventBus，我们需要创建⼀个空的js⽂件,在这个⽂件⾥⾯创建空的vue实例,然后导出这个空的vue实例,通过实例对象调⽤.on⽅法进⾏接收,通过emit⽅法来进⾏发送,以上就是⾮⽗⼦组件通信的⽅式

9. $nextTick⽅法有什么作⽤?(80%) 讲解

⾸先呢$nextTick也叫做异步更新队列方法 而$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 v-show v-html v-text v-on v-bind v-model v-for

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

.trim 去除⾸尾多余的空格 .stop 阻⽌事件冒泡 .once 只渲染⼀次 .self 事件只作⽤在元素本身 .number 将值转化为number类型 .capter 组件之间捕获 .prevent 阻⽌元素的默认⾏为 .native 事件穿透,让我们可以在⾃定义组件上定义事件和⽅法

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

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

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

keep-alive是vue内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，被keep-alive包裹的组件在组件切换时不会销毁，会保留组件的离开时状态 通过include设置白名单（也就是需要被缓存的组件） 通过exclude设置黑名单(也就是不需要缓存的组件)

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

所谓的vue过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据 vue的过滤器分为两种,第⼀种是全局过滤器,通过vue.filet来进⾏定义,第⼆种是局部过滤器,需要定义在组件内部 项⽬中我们通过过滤器将后台返回的状态0 和1 转化为⽀付或者未⽀付

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

插槽就是⼀个占位符,他可以将在组件标签内写入的组件或者内容显示出来 插槽分别具名插槽和匿名插槽、以及作⽤域插槽 具名插槽需要在slot标签上指定name属性,⽽在对应标签上添加v-slot属性

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

本地跨域是通过在vue.config.js⽂件⾥⾯的devServer属性⾥⾯的proxy属性⾥⾯配置target属性为我们需要跨域的域名 线上跨域是在nginx.conf⽂件⾥⾯配置, 代理名称是通过location 代理名称。proxy_pass 代理地址

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

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

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

在request.js内引⼊axios

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

在创建请求拦截器和响应拦截器

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

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

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

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

在src⽂件内创建api⽂件夹

在api⽂件夹内创建对应模块的js⽂件

在对应的⽂件⾥⾯引⼊request.js⽂件

封装api⽅法

最后通过export default 导出封装的api⽅法

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

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

22. 说⼀下vue和jquery的区别?(50%)（重要行较小）

⾸先呢jquery他是⽤js封装的⼀个类库,主要是为了⽅便 *** 作dom元素,⽽vue他是⼀个框架,并且呢,他会从真实dom构建出⼀个虚拟的dom树,通过di!算法渲染只发⽣改变的dom元素,其他的相同的dom元素不⽤在重新渲染. ⽽使⽤jquery去改变dom元素的时候,即使有相同的dom元素也会重新渲染,以上就是我对vue和jquery区别的理解.

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

通过this.$set强制更新试图 $set的第一个参数时要更改的数据 第二个参数时要更改的属性 第三个参数时要改成的值

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

如果data是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数据空间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，就会造成⼀个变了全都会变的结果

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

mvc 中 Controller演变成 mvvm 中的 viewModel，mvvm 通过数据来显示视图层⽽不是节点 *** 作。mvvm主要解决了:mvc中⼤量的DOM *** 作使⻚⾯渲染性能降低，加载速度变慢，影响⽤户体验。

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

数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解，如果实在要改变⽗组件的 prop 值 可以再 data ⾥⾯定义⼀个变量 并⽤ prop 的值初始化它 之后⽤$emit 通知⽗组件去修改

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

在vue中将真实的DOM节点抽离成⼀个虚拟的DOM树,这个虚拟的DOM树就是虚拟DOM. 优点：1.保证性能下限 2.⽆需⼿动 *** 作 DOM 3.可以进⾏更更⽅便地跨平台 *** 作 缺点：1.⽆法进⾏极致优化 2.⾸次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢

28. Vue的diff算法原理是什么？

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

29.组件写name有啥好处？

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