Vue面试题答案

Vue

生命周期

1.vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

beforeCreate,Created,beforeMount,Mounted,beforeUpdate,Updated,beforeDestroy，Destroied

2.它的生命周期有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.beforeCreate,Created,beforeMount,Mounted

4.beforeCreate:可以在这加个loading事件，在加载实例时触发

Created：结束loading事件，调接口获取后端数据

Mounted：挂载元素，获取DOM节点

Updated：如果对数据统一处理，在这里写上相应函数

beforeDestroy：可以写一个确认停止事件的确认框

5.Created里已经渲染了data里的数据，可以对data里的数据进行操作，但不能操作dom节点

Mounted初始化页面完成了，可以对dom节点进行操作

6.Created

7.创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在Created阶段，vue实例的数据对象data有了，但el还没有，无法操作dom。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在Mounted阶段，vue实例挂载完成，data.message成功渲染

更新前/后：当data变化时，会触发beforeUpdate和Updated方法

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

---

Vue路由

1.mvvm框架是vue的设计模式，由三部分组成，modal层(模型层)、view(视图层)、view-modal层(视图模型层)，modal和view与view-modal都有交互关系，来实现数据双向绑定。

2.用来实现路由的路由模块。router-link(路由声明式跳转)、router-view(渲染路由的容器)、keep-alive(缓存组件)

3.router-link

4.params: 配置路由方式：/router/:id query：普通配置

获取传递的值：$route.params.id 获取传递的值：$route.query

5.全局前置守卫：beforeEach

全局后置守卫：afterEach

路由独享守卫：beforeEnter

组件内的守卫：beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

6.route：一条路由

routes：每条路由的集合，是个数组

router：是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到的一个全局的实例对象。

7.使用beforeRouteUpdate或watch监听参数变化

8.a.<router-link to="'/user/'+id"></router-link>

b.this.$router.push({ name:"user", params:{ id: 123 }})

c.<router-link to="{ name:'user', params:{ id: 123 }}"></router-link>

9.hash模式和history模式

10.(resolve) => require(['@/views/error/401'], resolve),

---

Vue常见面试题

1.轻量级框架：只关注视图层，对数据操作方便；

国人开发，有中文文档，学习和使用方便；

数据双向绑定，数据变化可以直接显示到视图层，不需要操作dom；

组件化思维，可以复用重复的功能；

2.props

3.this.$emit绑定方法

4.共同点：都是将标签隐藏显示的方法

不同点：v-show：一开始就创建这个标签，为true时显示

v-if：只有为true时才创建标签

5.scoped

6.缓存组件，用于保留组件状态或避免重新渲染

7.ref='user' this.$ref.user

8.v-for：数组循环显示；v-if ：显示隐藏；v-show：显示隐藏；v-on：事件；v-model：实现数据双 向绑定；v-html：将数据按照html格式进行解析；v-bind：动态绑定一个属性；

9.是预编译器，解析文件，提取其中的script、style和html代码并交给对应的loader处理。

js可以写es6，style样式可以写scss或less，template可以加jade等

10.为diff算法添加一个唯一标识符，方便diff查询虚拟dom节点。

11.用于浏览器和node.js的基于promise的HTTP客户端。

npm install --save axios vue-axios,然后在main.js中配置。

12.vue项目中在vue.config.js中设置代理

13.数据双向绑定，其实就是个语法糖，v-bind:value和v-on:input

14.npm install scss --save,<style lang="scss">

15.main.js:入口文件；assets:放静态文件；components：放公共组件；app.vue是一个应用主组件

16.computed：当一个值受多个属性影响时，---购物车商品结算

watch：当一条数据的更改影响到多条数据的时候，---搜索框

区别：

1.computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

2.computed有缓存，watch每次都执行回调。

3.computed必须有return返回，watch不是必须。

17.可以，v-on="{mouseenter: onEnter,mouseleave: onLeave}"

18.数据修改后需要调dom元素时可以使用$nextTick，

19.因为如果是对象的话，每次查数据的时候会查询全部的data，如果是函数的话，可以只查询当前组 件的内容。

20.如果方法不传参数的话，直接event调用；如果要传参数，则把$event也传过去。

21.a.通过公共bus传递；b.vuex;

22.就是可以根据自己的需要，来进一步选择使用工具

23.通过数据劫持和发布订阅模式，核心是Object.defineProperty

24.单页面是只有一个主页面，其他页面都是在这个页面进行跳转，局部刷新。

优点：用户体验好，不会整页刷新页面；

缺点：初次加载慢，不利于seo，浏览器的导航不可用，

多页面是好几个主页面，然后跳转的话会整页刷新。

优点：seo方便；

缺点：跳转整页刷新，用户体验差，页面加载慢，用户体验差。

26.v-for的优先级高于v-if

27.assets和static都存放静态资源文件，assets的文件不会被打包，static的文件会打包。

29.stop：阻止事件冒泡；prevent：阻止默认事件；once：只触发一次；trim：去空格；capture：事件监听，内部元素触发的事件先在此处理，然后交给内部；self：只当在 event.target 是当前元素自身时触发处理函数

31.Vue.set(target,key,value)；target：要更改的数据源；key：要更改的具体数据；value：赋的值

32.子：this.$emit("onButton",value) 父：<son :onButton="button">，在methods写button

33.数据双向绑定，组件系统

34.jQuery主要操作dom，vue不太操作dom

35.先创建好组件页面，然后在需要引入的地方import，然后在components注册，然后就可以使用了

36.npm run build；vue.conifg.js

38.用computed的set方法传递修改后的值

39.delete只是删除这个键对应的value，vue.delete删除了这个键值对

40.路由懒加载；公用的js库用script引入

41.区别：a.router使用pushState跳转，静态跳转，不重新加载页面；href重新加载页面

b.router使用diff算法，实现按需加载，减少dom操作

c.router是路由跳转或同一个页面跳转；href是不同页面间跳转

d.router是异步加载$nextTick回调获取url；href是同步加载

42.插槽，可以在父里的子组件标签中加入相加在内容，子组件在想要加内容的地方加slot标签

43.一个，

44.路由显示，路由跳转传参；查官方文档和网络上的视频，然后在自己实验一下就可以了

45.babel问题，安装 babel polypill插件即可

46.因为router-link当前的tag不是a标签，所以click事件无效，只需加上native修饰符即可

47.用a标签，不用button标签；使用navigate跳转

48.自动转化json格式；可以使用所有promise的API；支持请求/响应拦截器

50.props；$emit；bus；props,$emit、bus、vuex；bus

51.a.query是在url中传递，及时页面刷新了也还在；params页面刷新了就没了

b.query是用path写地址；params用name写地址

52.mock假数据，可以在后端还没写好接口的时候先自己写一写数据，

54.v-clock + [v-clock]{display:none;}

55.如果弹窗内的数据不需要滚动，则给弹窗加个事件 @touchmove.prevent

需要滚动，利用css的position:fixed来固定位置(需要获取当前的高度并赋给top),打开弹窗的时候设 置classname，关闭弹窗时去掉classname

57.element-ui；uview；vuetify；vux；vant

58.require

59.npm install sass-loader --save-dev；在module引入；在页面中设置lang='scss'

60.在vue.config.js中的assetsDir属性设置静态资源文件位置

---

Vuex

1.是专为vue.js应用程序开发的状态管理模式

在全局或单个组件引入store，然后this.$stores来进行相应的操作

购物车功能、登录状态等

2.state、getters、motations、actions、modules

3.多层嵌套的组件传参不方便；多个页面要修改数据时，无法同步

4.actions，如果是全局都需要这个数据的话就写在actions，如果是私有的则写在methods即可

6.actions异步修改state状态，通过调用mutations里的方法改变

7.mutations不能加异步操作，actions接受所有异步操作并将自己默认封装成Promise，通过提交mutations改变数据

---

vue项目实战

1.https://blog.csdn.net/weixin_41611170/article/details/114092935

思路：外层盒子监听一个滚动效果，当滚动高度大于屏幕高度时，position为fixed，否则为absolute

2.https://blog.csdn.net/weixin_29491885/article/details/100521518

3.在vue.config.js中的devServer的proxy设置代理

4.https://blog.csdn.net/weixin_34129696/article/details/91415938

思路：监听路由是前进还是后退，然后添加相应的classname，style加转场动画