vue前端面试题

1.computed 和 watch 的使用

1. computed 具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数，watch 无缓存性，页面重新渲染时值不变化也会执行
2. computed 是计算值，watch 是观察的动作，
3. computed 应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值watch应用：监听props，$emit或本组件的值执行异步操作
4. watch属性可以用来监听data属性中数据的变化 computed属性的作用与watch类似，也可以监听属性的变化

2. action和mutation的使用（视图触发Action，Action再触发Mutation。）

1. action的功能和mutation是类似的，都是去变更store里的state
2. mutations在请求数据的时候是同步的;而actions是异步的
3. ction主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作
4. action改变状态，最后是通过提交mutation

3. vue组件通信

1. 父子传值：
   在父组件中给子组件标签上绑定一个属性，属性上挂载着需要传递的值，在子组件中通过props:[“自定义属性名”]来接接收。

2. 子父传值：
   在父组件中给子组件上绑定一个自定义事件方法，给这个事件挂载需要调用的方法，在子组件中通过this.$emit(“自定义事件名”)来调用这个方法

3. 兄弟通信：

   • 创建一个空的vue实例eventBUS
   • 通过BUS.$emit(“事件名”)传到空的vue实例中
   • 通过BUS.$on(“事件名”,(参数)=>{挂载传来的数据})来接收

4. 自定义v-model

在vue中，v-model是用来进行数据双向绑定的一个语法糖，比如说用在input上，输入框数据变化，v-model绑定的对应的值也会跟着变化，无需单独获取。

其实v-model还可以在自定义组件中使用，可以被拆解为props:value和event：input，也就是说组件必须接收一个value值以及名为input的自定义事件，就可以在自定义组件上使用v-model了。

5.eventloop

事件循环：先运行macroTask（宏任务）队列中的一个，然后运行microTask（微任务）队列中的所有任务。接着开始下一次循环。

宏任务

• setTimeout
• setInterval
• setImmediate (Node)
• requestAnimationFrame (浏览器)

微任务
微任务包括Promise的回调函数，DOM发生变化等，微任务需要尽可能快地，通过异步方式执行，同时不能产生全新的微任务。

• process.nextTick (Node)
• Promise.then()
• catch
• finally
  Promise.then() 与 new Promise(() => {}).then() 是不同的，前面的是一个微任务，后面的 new Promise() 这一部分是一个构造函数，这是一个同步任务，后面的 .then() 才是一个微任务

JS是单线程的，它是通过事件循环机制来实现异步的。
首先是主线程执行当前栈中的任务，遇到同步任务继续执行，遇到异步任务会将其放入Event Tables的事件队列中。Event Tables的事件队列又分为两类，一类是宏任务，一类是微任务。
当主线程的任务执行完毕后，回去任务队列中取出任务来执行。此时会优先选取任务队列中的为任务，执行完微任务后，才会去取宏任务执行。

6.http缓存

7.浏览器输入url到页面渲染过程

		DNS解析：把域名解析成IP地址
		TCP 建立连接：TCP三次握手
		发送HTTP请求
		服务器处理并响应报文
		浏览器解析并渲染页面
		断开连接：TCP 结束连接

8. http请求

9. 箭头函数和普通函数的区别

10.父子组件生命周期执行顺序

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。

11. 组件注册

三种方法

• 全局注册
• 局部注册
• 扩展实例

12. 路由配置

13. keep-alive

14.vue生命周期函数

15.cookie、session、token