1、vue-loader是什么?使用它的用途有哪些?
答:
vue-loader
是 webpack 的一个 loader,用于处理 后缀为 .vue
文件,它只是一个让浏览器认识.vue
文件的工具
用途:js可以写es6、style样式可以scss或less、template可以加jade等
2、请说出vue.cli项目中src目录每个文件夹和文件的用法?
assets
文件夹是放静态资源;
components
是放组件;
router
是定义路由相关的配置;view视图;
app.vue
是一个应用主组件;
main.js
是入口文件
3、对于MVVM的理解?
MVVM 是 Model-View-ViewModel 的缩写
Model
代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
View
代表UI 组件,它负责将数据模型转化成UI 展现出来。
ViewModel
监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
4、vue优点?
答:
轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;
简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;
双向数据绑定:保留了angular的特点,在数据操作方面更为简单;
组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;
视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
虚拟DOM:dom操作是非常耗费性能的, 不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom不过是换了另一种方式;
运行速度更快:相比较与react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。
5、分别简述computed和watch的使用场景
答:
computed:
当一个属性受多个属性影响的时候就需要用到computed
最典型的栗子: 购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用watch
栗子:搜索数据
6、$nextTick的使用
答:当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值,
你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。
7、vue组件中data为什么必须是一个函数?
答:因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。
组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
8、v-if和v-for的优先级
答:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。
9、vue常用的修饰符
答:
.stop
:等同于JavaScript中的event.stopPropagation(),防止事件冒泡;
.prevent
:等同于JavaScript中的event.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
.capture
:与事件冒泡的方向相反,事件捕获由外到内;
.self
:只会触发自己范围内的事件,不包含子元素;
.once
:只会触发一次。
10、vue的两个核心点
答:数据驱动、组件系统
数据驱动:ViewModel,保证数据和视图的一致性。
组件系统:应用类UI可以看作全部是由组件树构成的。
11、params和query的区别
答:
用法:query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.path
和this.$route.params.name
。
url地址显示:query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
注意点:query刷新不会丢失query里面的数据
params刷新 会 丢失 params里面的数据。
12、vue-router实现路由懒加载( 动态加载路由 )
答:三种方式
第一种:vue异步组件技术 ==== 异步加载,vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种:路由懒加载(使用import)。
第三种:webpack提供的require.ensure(),vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
13、什么是vue的计算属性?
答:在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采取计算属性的方式。
好处:
①使得数据处理结构清晰;
②依赖于数据,数据更新,处理结果自动更新;
③计算属性内部this指向vm实例;
④在template调用时,直接写计算属性名即可;
⑤常用的是getter方法,获取数据,也可以使用set方法改变数据;
⑥相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算。
14、绑定 class 的数组用法
对象方法 : v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
数组方法 : v-bind:class="[class1, class2]"
行内 : v-bind:style="{color: color, fontSize: fontSize+'px' }"
finally、一句话就能回答的面试题
1.css只在当前组件起作用
答:在style标签中写入scoped
即可
例如:
<style scoped></style>
2.route和router的区别
答:
route
是路由信息对象,包括path、params、hash、query、fullPath、matched、name等路由信息。
router
是“路由实例”对象包括了路由的跳转方法,钩子函数等。
3、vue.js的两个核心是什么?
答:数据驱动、组件系统
4、vue几种常用的指令
答:v-for 、 v-if、v-else 、v-bind、v-on、v-show