1.对mvvm的理解
mvvm分为model层,view层,viewmodel层
model层: 指的就是数据模型,其实就是数据和业务逻辑都在model层中定义
view层: 也就是UI视图,就是用来展示数据的
viewmodel 层:其实就是将view层和model层联系起来,把model对象封装成界面可以展示的数据对象,也就试数据的双向绑定。
2.vue中数据双向绑定的原理
通过数据劫持结合发布者订阅者的模式和object.defineproprety()来劫持各个属性的setter,getter,数据又变化的时候,就发布消息给订阅这触发监听。
3.vue的生命周期
beforecreate 什么都没有
created 有data没有el
beforemount 有data没有el
mounted 全部都有
1.进入到页面或者组件 会先执行 以上4个生命周期
- 如果加入了keep-alive 会多俩哥哥生命周期
activated,deactivated,第一次进入组件执行activated
3.如果加入 了keep-alive,第二次或者第N次进入组件或页面会执行一个生命周期,activated
beforeupdate
updated
beforedestroy
destroyed
4.keep-alive的理解
1.vue系统自带的一个组件,主要的作用是为了缓存组件,从而提升页面的性能。
2.场景:针对的是相同的页面反复的进入,不需要请求多次,请求一次直接缓存起来就可以,不同页面的话就需要重新请求。
5.v-if和v-show的区别
v-if:反复的创建和销毁dom节点
v-show:css的display:none,block,
两者的优缺点:
v-if: 适合在页面第一次进入的时候
v-show:频繁的切换,显示和隐藏的开销小,创建和销毁的开销大。
6.v-if和v-for的优先级
v-for的优先级大于v-if,主要体现在源码中的function genElement
7.ref是什么
是用来获取dom的
8.nextTick是什么
主要用来获取更新后的dom
9.scoped的原理
主要就是用来做样式隔离的,让样式只在当前的组件里面生效
原理:给节点新增自定义属性,然后css根据属性选择器添加样式
10.vue中 如何做样式穿透
stylus: 用 >>>
sass和less:/deep/
通用::v-deep
11.Vue组件间的传值
父---子: 子组件通过props接收传过来的属性。
子---父:子组件通过$emit触发父组件的时间去修改父组件的属性值
兄弟组件:采用事件总线bus进行传值
12.computed,methods和watch的区别
computed:监听的是值得变化,值变了,就会返回新的值,是有缓存的。
methods:单纯的方法,没有缓存
watch:监听数据或者路由发生了改变相应 ,然后去干其他的事情
13.props和data优先级?
props===>methods===>data===>computed===>watch
14.vuex有哪些属性?
vuex是单向数据流
state: 主要是用来存储数据
getters: 类似于组件中的computed
mutations:同步修改state里面的值
actions:异步修改state的值,用来提交mutations的
modules: 仓库结构化
15.vuex如何做持久化的存储?
1.使用 localstorage 自己写
2.采用 vuex-persist插件
16.vue的路由形式
1.hash:默认模式都带#,使用url的hash值来作为路由,支持所有的浏览器, 缺点:只能改变#后面的来实现跳转。
history: 通过HTML5和HistoryAPI和服务器配置 缺点: 怕刷新,如果后端没有处理这个情况的时候前端刷新就是实实在在的请求服务器这样消耗的时间比较长。
17.介绍一下spa以及有什么优缺点?
单页面应用 :只有一个页面,在应用程序交互时,动态更新该页面的web应用程序
优点:
1.减少了请求体积,加快了页面响应速度,降低对服务器的压力
2.更好的用户体验,让用户在webapp感受nativeapp的流畅。
缺点:
- seo优化不好 2.性能不是特别好
18.vue中的路由守卫都有哪些?
全局守卫:
beforeEach,beforeResolve,afterEach
路由独享守卫:
beforeEnter
组件内:
beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
使用的场景:
一般用在判断是否登录,如果登录就next否则就跳转到登录页面