大家好，我是有用就扩散，有用就点赞。

1.Vue中组件间有哪些通信方式？

父子组件通信：

（1）props | $emit （接收父组件数据 | 传数据给父组件）

（2）ref | $refs（给普通的DOM元素或者子组件注册引用信息 | 获取通过ref注册的引用）

（3）$parent | $children（获取当前组件的父组件实例 | 获取当前组件的子组件实例）

多层级组件通信：

（1）provide | $inject（提供子组件要使用的数据 | 子组件获取父组件定义的数据）

（2）$attrs |

l

i

s

t

e

n

e

r

s

（获取一个组件没有声明

p

r

o

p

时所包含的数据，搭配

i

n

h

e

r

i

t

A

t

t

r

s

:

f

a

l

s

e

使用，设置继承

listeners（获取一个组件没有声明prop时所包含的数据，搭配inheritAttrs:false使用，设置继承

listeners（获取一个组件没有声明prop时所包含的数据，搭配inheritAttrs:false使用，设置继承attrs默认行为关闭 | 获取包含父作用域中的事件监听器）

非关系组件通信：

（1）（利用vue注册自定义事件）$emit | $on（发送数据 | 获取数据）

（2）Vuex 数据全局状态管理

state单一状态树（mapState获取多个状态，state获取数据）

mutation 更改Vuex的store中的状态的唯一方法（commit设置数据）

getter接受state作为其第一个参数

actions处理异步逻辑

（3）ocalstorage和sessionstorage用作存储数据

2.Vue中v-show和v-if的区别是什么？

v-show：是渲染组件，然后改变组件的display为block或none

v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。

如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

3.keep-alive组件有什么作用？

1）keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染。

2）对于keep-alive组件来说，它拥有两个独有的生命周期钩子函数，分别为activated和deactivated。用keep-alive包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行deactivated钩子函数，命中缓存渲染后会执行actived钩子函数。

3）keep-alive几个重要的属性：

include - 只有名称匹配的组件会被缓存exclude - 任何名称匹配的组件不会被缓存max - 最多可以缓存多少组件实例

4.说下Vue生命周期钩子函数？

beforeCreate 组件实例刚被创建，组件属性计算之前

created 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在

beforeMount 模板编译/挂载之前$el还不存在

mounted 模板编译/挂载之后（不保证组件已在DOM中）

beforeUpdate组件更新之前

updated组件更新之后

beforeDestory 组件销毁前调用

destoryed 组件销毁后调用

Vue3支持多个相同生命周期

setup是围绕beforeCreate和created生命周期钩子运行，在setup()内部调用生命周期钩子

在Vue2生命周期钩子前面加上”on“来访问组件的生命周期钩子

5.Vue中computed和watch区别？

computed是计算属性，依赖其他属性计算值，并且computed的值有缓存，只有当计算值变化才会返回内容。

watch监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。

6.v-if和v-for为什么不能连用？

1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。在vue3中v-if优先于v-for被解析。

2）如果同时使用，每次渲染都会先执行循环在判断条件，无论如何循环都避免不了，浪费了性能。

3）要避免出现这种情况，可以采用多层包裹来解决性能损耗问题。例如外层给标签绑定指令v-if或者是内层标签绑定v-if。

7.单页面应用和多页面应用区别及优缺点？

SPA优点：

（1）用户体验好、快，内容的改变不需要重新加载整个页面，基于这一点SPA对服务器压力较小

（2）前后端分离

（3）页面用户体检比较好

SPA缺点：

（1）不利于SEO

（2）导航不可用，需要自己实现导航

（3）初次加载耗时长

（4）页面复杂度提高

MPA优点：

（1）多页面应用对于SEO更加友好

（2）更容易扩展

（3）更易的数据分析

MPA缺点：

（1）程序开发成本高

（2）增加服务端压力，多页面会不停的加载

（3）用户体验相对较差

8.v-model该如何实现？

v-model本质上是v-on和v-bind的语法糖。v-model在内部为不同元素抛出不同的事件，如：

（1）text和textarea元素使用value属性和input事件

（2）checkbox和radio使用checked属性和change事件

（3）select字段将value作为prop并将change作为事件

（4）v-model作用在普通表单上

<code><input v-model="myvalue" />code>

//等同于

<input

v-bind:value="myvalue"code>

v-on:input="myvalue=$event.target.value"code>

/>

（5）v-model作用在组件上

<code>//html

<mycom v-model="myvalue"/>code>

//等同于

<mycom :value="myvalue" @input="(e)=>{myvalue=e}"/>code>

//mycom

<template>

<div>

<input :value="value" @input="$emit('input',$event.target.value)"/>code>

</div>

</template>

<script>

export default {

props:['value'],

}

</script>