前端面试vue题目

时间: 2024-10-21 10:57:46

(部分内容来自网络，其真实性存疑，为了避免对您造成误导，请谨慎甄别。)

1、Vue中的的通信方式有几种？隔代组件的通信你用那种方式解决？

props/$emit适用父子组件通信

ref与parent/children适用父子组件通信

attrs/listeners,provide/inject 适用于隔代组件通信

vuex,EventBus(事件总线)适用于父子、隔代、兄弟组件通信

slot插槽方式

2、v-show 和 v-if指令的共同点和不同点？

v-show是css切换，v-if是完整的销毁和重新创建，如果频繁切换时用v-show，运行时较少改变用v-if

3、为什么使用key？

做一个唯一标识， Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。

4、简述computed和watch的使用场景

computed:

支持缓存，数据变，直接会触发相应的操作；

监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

当一个属性发生变化时，需要执行对应的操作；即一个属性受多个属性影响，多对一或者一对一的关系；

监听的是这个属性自身的变化，且不会操作缓存

监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

是一个计算属性,类似于过滤器,对绑定到view的数据进行处理

　　　　当一个属性受多个属性影响的时候就需要用到computed

　　　　最典型的例子： 购物车商品结算的时候

watch:

1.是观察的动作，

2.应用：监听props，$emit或本组件的值执行异步操作

3.无缓存性，页面重新渲染时值不变化也会执行

watch是一个观察的动作

　　　　当一条数据影响多条数据的时候就需要用watch

　　　　例子：搜索数据