关于vue常问的面试题

关于vue常问的面试题 专栏收录该内容
0 篇文章 0 订阅

1、用vue做的项目,用了vue的全家桶吗?vue里面为什么不用jq?

vue+vue-router+vuex+axios+es6+sass

减少dom操作

 

2、vue如何进行性能优化?怎么做vue的兼容?

1. 慎用deep watch

2. 尽可能的减少watcher的数量

  在上面16000个素材的情况,vue至少会创建16000个watcher,实际情况下会多得多,这样的后果就是操作时js执行会特别耗时,这里我优化的办法是把素材数据单独保存到一个js变量中,只把需要展示给用户的那一屏数据拿出来给vue监听,这样大大减少了wather的数据,原理同2,现在16000个素材无论是操作还是滑动滚动条一点都没有卡顿的感觉了。

结语:之前在哪看过一句话,大意是不要老想着从技术的角度去解决问题,要试着从设计上从方式上去规避问题,挺有感触的

 

3、vue做微信小程序,和小程序有什么不一样?


 

1、在页面加载请求数据时,两者钩子的使用有些类似,vue一般会在created或者mounted中请求数据,而在小程序,会在onLoad或者onShow中请求数据。

2、vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号:,例:

<img :src="imgSrc”/>

小程序绑定某个变量的值为元素属性时,会用两个大括号括起来,如果不加括号,为被认为是字符串。例:

<image src="{{imgSrc}}"></image>

3、列表渲染,两者还是有些相似

4、vue中,使用v-if 和v-show控制元素的显示和隐藏

  小程序中,使用wx-if和hidden控制元素的显示和隐藏

5、vue:使用v-on:event绑定事件,小程序中,全用bindtap(bind+event)

6、vue中,只需要再表单元素上加上v-model,小程序通过this.setData({key:value})

7、vue中<button @click="say('明天不上班')"></button>可传参,小程序中绑定到元素上的data-属性上,然后在方法中,通过e.currentTarget.dataset.*的方式获取,

8、在vue中,需要:

1. 编写子组件

2. 在需要使用的父组件中通过import引入

3. 在vue的components中注册

4. 在模板中使用

  在小程序中,需要:

(1). 编写子组件

(2). 在子组件的json文件中,将该文件声明为组件

{

  "component": true

}

(3). 在需要引入的父组件的json文件中,在usingComponents填写引入组件的组件名以及路径

"usingComponents": {

    "tab-bar": "../../components/tabBar/tabBar"

  }

(4). 在父组件中,直接引入即可

9、在vue中

父组件向子组件传递数据,只需要在子组件通过v-bind传入一个值,在子组件中,通过props接收,即可完成数据的传递

  在小程序中

父组件向子组件通信和vue类似,但是小程序没有通过v-bind,而是直接将值赋值给一个变量,在子组件properties中,接收传递的值

4、什么是MVC和MVVM? 

 

 

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

 

MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model,必须通过Controller来承上启下

 

ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller

 

5、vue的优点是什么呢?
 

MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好

数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。

 

6、父子组件传值?

1、父组件往子组件中传值

 

2.子组件往父组件传值

 

 

 

3、子组件不要直接修改父组件的值

 

 

7、非父子组件传值?

通过bus进行实现,首先bus.js如下:



const bus = new Vue()

export default bus

 

 

通过vuex进行实现

 

8、vuex是什么?哪种功能场景使用它?有哪几种特性?不用会有什么问题吗?

vue框架中状态管理。在main.js引入store,注入。新建了一个目录store,….. export 。加入购物车

 

9、vue的指令有哪些?

v-text,v-html, v-once, v-show,v-if, v-for,v-bind,v-model,自定义指令

10、v-if和v-show的区别?

v-show适合频繁操作

11、vue如何搭配其他技术使用

12、computed和watch的区别


在数据未发生变化时,优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性,当相关数据没有变化是,它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数,

set 方法在设置值是触发。

get 方法在获取值时触发。
watcher,在数据变化时来执行异步操作,这时watch是非常有用的。

 

13、虚拟DOM是什么,怎么实现的?

14、vue里面定义组件模板除了单文件还有什么方法吗?

 

 

15、render函数使用过吗?怎么用?


使用Render函数将template里面的节点解析成虚拟的dom。

 

16、vue的生命周期,分别描述一下?

 

 

 

17、vue的双向绑定原理?

 

 

18、v-for中为什么使用key?



使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;(因为Virtual DOM 使用Diff算法实现的原因)

19、路由的底层原理?


通过改变浏览器地址URL,在不重新请求页面的情况下,更新页面视图

1.一种是# hash   ,    在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航

2.一种是h5的history  ,     使用URL的Hash来模拟一个完整的URL

 

20、vue为什么是异步的?


虚拟dom,通过异步的方式延迟执行队列中的所有渲染的操作并清空队列,当同一轮事件循环中反复修改状态时,并不会反复向队列中添加相同的渲染操作。所以我们在使用Vue时,修改状态后更新DOM都是异步的。

21、聊聊你对Vue.js的template编译的理解?


简而言之,就是先转化成AST树(语法树),再得到的render函数返回VNode(Vue的虚拟DOM节点)

 

22、请说下封装 vue 组件的过程?


使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。

 

23、导航钩子有哪些?它们有哪些参数?

答:导航钩子有:a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave



有to(去的那个路由)、from(离开的路由)、next(一定要用这个函数才能去到下一个路由,如果不用就拦截)常用就这几种

 

24、vue-router是什么?它有哪些组件?

 

vue用来写路由一个插件。router-link、router-view

 

 

 

 

 

 

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

小斯不斯

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值