Vue常见面试题--简书01

时间:2022-06-26
本文章向大家介绍Vue常见面试题--简书01,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
  1. 为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是一个对象? 因为组件是用来复用的,JS 里对象是引用关系,这样作用域没有隔离,而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。
  2. vue路由跳转的方式 一般有两种 <router-link to='home'> router-link标签会渲染为<a>标签,咋填template中的跳转都是这种; 另一种是编程是导航 也就是通过js跳转 比如 router.push('/home')

3.如何让CSS只在当前组件中起作用?

将当前组件的<style>修改为<style scoped>

4.vue响应式原理?

在实例化的过程中,通过Object.defineProperty()会对a.b添加getter和setter,同时Vue.js会对模板做编译,解析生成一个指令对象(这里是v-text指令),每个指令对象都会关联一个Watcher,当对a.b求值的时候,就会触发它的getter,当修改a.b的值的时候,就会触发它的setter,同时会通知被关联的Watcher,然后Watcher就会再次对a.b求值,计算对比新旧值,当值改变了,Watcher就会通知到指令,调用指令的update()方法,由于指令是对DOM的封装,所以就会调用DOM的原生方法去更新视图,这样就完成了数据改变到视图更新的一个自动过程

5.Vue对比其他框架原理

Vue相对于React,Angular更加综合一点。AngularJS则使用了“脏值检测”。

React则采用避免直接操作DOM的虚拟dom树。而Vue则采用的是 Object.defineProperty特性(这在ES5中是无法slim的,这就是为什么vue2.0不支持ie8以下的浏览器)

Vue可以说是尤雨溪从Angular中提炼出来的,又参照了React的性能思路,而集大成的一种轻量、高效,灵活的框架。

详见Vue官网...

6.vue的优点是什么?

  1. *低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  2. *可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
  3. *独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。
  4. *可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写.

7.vue如何实现按需加载配合webpack设置?


webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入,改为const定义的方式进行引入。
不进行页面按需加载引入方式:import  home   from '../../common/home.vue'
进行页面按需加载的引入方式:const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))