前端面试练习24.2.29

一.关于Vuex说法

Vuex可以���来管理数据

（）

Vuex也可以实现组件间的传值

mutation中的方法按照规定最好不要涉及异步方法

（）

Vuex的属性有

state 存储状态

mutations 同步函数

actions 异步函数，并且调用的事mutations

getters 派生状态，类似与vue中的computed

module 组件，可以包含state，mutations，actions，getters，甚至module

二.关于Vue模块化开发的描述

高内聚，低耦合，可重复利用，便于维护

Vue实例没有执行DOM挂载，所以不会执行mounted钩子函数

三.关于客户端渲染和服务器端渲染的描述

服务器端渲染有利于SEO，且首页加载快

客户端渲染节省后端资源，但可能会加载慢出现白屏

服务器端渲染耗费流量，局部页面的变化也需要重新请求完整的页面

客户端首屏渲染时首先拿到空的html模板，之后继续发起数据请求。而服务器端渲染只需要请求一次，服务器会将请求的数据放在html模板中一起返回。

四.关于数组的操作不会触发视图的更新

push()在该数组最尾添加新的元素，然后返回更新后的数组长度，方法将改变原始数组的长度；

shift()删除该数组第一个元素，并且把该数组剩下的元素索引往前挪一位，然后返回删除的元素，方法将改变原始数组的长度；

reverse()反转该数组中元素的顺序，方法将改变原始数组。

concat()把两个以上的数字连接起来，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

push(),shift(),reverse()改变原数组，会触发视图跟新；

concat()不更改数组，会返回新数组，因此没有替换原数组，不触发视图更新，要用新数组替换原数组才能实现视图更新。

concat，filter，slice都不会引起更新

五.关于Vue组件间通信说法

Vuex可以实现任何关系的组件间的通信

①props传过来的，改数字，改字符串会报错，改数组，对象里面的值不会报错

②context是用在react中进行组件间的传值，Vue组件间传值可以通过props，$emit,Vuex,事件总线。

六.关于v-model的说法

v-model如果为不同元素绑定数据，则使用不同的元素property， 并抛出不同的事件

v-model本质上是语法糖，它负责监听用户的输入事件以更新数据

对input使用v-model，实际上是指定其 :value和input事件

v-model是内置指令，能用在自定义组件上

七.关于Vue2和Vue3的描述

Vue3中Template支持多个根标签，Vue2不支持

Vue3中的生命周期的挂载钩子是onMounted，需要引入才能使用

Vue3引入了tree-shaking，以模块的方式引入api，减小打包体积

Vue3的组合API中的setup()方法包含了所有的基本内容，包括生命周期，可以在setup()中使用生命周期钩子函数。

八.关于$nextTick说法

在组件内使用vm.$nextTick()实例方法特别方便，因为它不需要全局Vue，并且回调函数中的this将自动绑定到当前的Vue实例上

$nextTick()返回一个Promise对象

需要使用$nextTick()原因是Vue是异步渲染

在created等虚拟DOM没有完成挂载的钩子函数中，避免操作DOM报错可以把操作语句放在$nextTick的回调函数中

九.vue指令

v-html指令 使标签内html语法渲染

v-on 指令 事件绑定

v-bind 指令 绑定DOM

v-model 指令 数据的双向绑定

十.关于Vue的描述

当给某个组件修改某个值时，该组件不会立即重新渲染

$nextTick()返回一个Promise对象

$nextTick()可以配合async/await使用

当环境不支持Promise.then、MutationObserver和setImmediate时，Vue使用setTimeout(fn, 0)代替。