前端必备面试题 之vue (必备 q1)

目录

1.通信之间的传值方式有哪些?

2.为什么使用vuex ( 或者是和某种方式对比为什么选择用vuex)?

3.vuex的作用是什么呢!  

4.    使用   vuex 的有什么优势呢!

5.什么是单项数据流?    

6.单项数据流的使用场景是什么?

7.父传子组件的通信方式?

8.子传父的组件通信方式?

9.ref 的作用是什么?

10.computed 和watch 之间的区别 是什么? 

11.computed 和methods 的区别是什么?  

12.$nexttick 是什么?

13.$router 和$route 之间的区别是什么 ?

14.你在vue 项目当中,做过哪些性能优化呢!

   代码层的优化

 webpack 层

web技术层

15.keep-alive 的作用是什么?


1.通信之间的传值方式有哪些?

1. 父子组件之间的传值    props 和 $emit (常用的方式)    

2.  多层嵌套的时候,使用   provide 和 inject 的方法  

3. 中央事件总线 eventbus

4. 跨级传输通信方式     chilrden 和parents      

5. vuex 传输更方便或者更加便捷,

6 , v-model 双向数据绑定

2.为什么使用vuex ( 或者是和某种方式对比为什么选择用vuex)?

1产生的原因(或者解决了vue 的什么痛点):

          vuex 设计的初衷就是为了解决vue 单向数据流的问题;   就是只有父子组件之间才能进行通信传值,这样复杂的通信过程会变得繁琐 

3.vuex的作用是什么呢!  

作用: 可以完成组件之间的复杂通信,做到状态统一管理

4.    使用   vuex 的有什么优势呢!

1.易通信 ; 相对纯父子组件的通信方式,避免了祖孙组件和兄弟组件带来的麻烦    

2.响应式。相对于全局变量式的状态管理,vuex 的存储状态是响应式的。store 中状态发生改变,相应地组件也会高效的发生更新;    

3. 易 追踪;    store中的状态不能直接更改,唯一的途径,也就是显示的提交(commit )mutation 。 这样可以更方便的跟踪状态变化,从而实现我们能够实现一些工具帮助我们 更好的解决我们的应用

5.什么是单项数据流?    

单项数据流的方式使用一个上传数据流和一个下传数据流进行双向通信,两个数据流之间相互独立,单项数据流指只能从一个方向来修改状态。

        与单项数据流对应的就是双向数据流(也叫做双向数据绑定)。在双向数据流中,model (可以理解为状态的集合)中可以更改自己或者其他model的状态,用户的操作(如在输入框中输入内容)也可以更改状态

6.单项数据流的使用场景是什么?

多个组件会共享状态时,共享状态和组件间(兄弟组件)通信变得不容易。我们把共享状态抽取出来,用单项数据流变得很容易

7.父传子组件的通信方式?

1.把父组件中 数据绑定到自定义属性中                                            

 2.在子组件中用props接受

8.子传父的组件通信方式?

1.   子组件中事件触发一个函数fna                                            

2.fna , this.$emit("fnb",子数据)                                                  

3. fnb 和父组件中方法进行绑定                                            

4. 父组件方法可以取数据

9.ref 的作用是什么?

1.可以获取vue 框架的页面dom 元素                                          

2.还可以拿到注册的组件实例,也是父组件 获取子组件的值和方法

10.computed 和watch 之间的区别 是什么? 

computed 是计算属性,当某些数据依赖于其他数据的时候,可以使用computed的方法; watch 是监听属性或者观察属性,当它需要进行异步操作的时候或者比较大的开销的时候,那么watch 为最佳的选择

11.computed 和methods 的区别是什么?  

我们可以将同一个函数定义为一个methods 或者计算属性。对于最终的结果,两种方式是相同的;

 computed :计算属性,基于依赖进行缓存的,当它的依赖发生改变的时候,则它的值也会跟着改变;

 methods 当进行重新渲染的时候, 则开始执行该函数

12.$nexttick 是什么?

nextTick 是当下次Dom 循环完之后,执行延迟回调,当修改数据的时候,则可以使用$nextTick 这个方法,使用nextTick 则可以拿到更新后的Dom ;

13.$router 和$route 之间的区别是什么 ?

 $router 是vueRoute的实例,想要导航到不同的URL,则使用this.$router  push 的方法

$route 表示当前路由可以获取对象里的 路径 path,query ,parmers 等等

14.你在vue 项目当中,做过哪些性能优化呢!

   代码层的优化

1. v-if 和v-show 的区分场景

2. computed 和watch 的区分场景

3. 每个v-for 必须添加 key,方便精确查找到每个数据;

4.长列表性能优化, 使用object.freeze() 冻结 每一个对象,一旦冻结,不能进行修改;

5,图片懒加载

6.路由懒加载

7,keep alive  的适当使用

8.防抖节流

 webpack 层

1.图片进行压缩

2.将ES6 转化为ES5

3.提取公共代码

web技术层

1.开启zip 压缩

2.CDN   的使用

3.浏览器缓存

15.keep-alive 的作用是什么?

keep-alive 是vue内置的一个组件,可以使被包含的组件保留状态避免重新渲染,其中,有以下特点:   一般结合路由和动态组件一起使用,用于缓存组件

       用来对组件抽象的缓存,从而节省性能,出于一个抽象的组件,所以在vue页面渲染完毕后,不会被渲染成一个DOM 元素; 

keep-alive 有两个属性    include (根据组件名称缓存)                

                                    exclude (根据组件名称不缓存)

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值