一、生命周期(80%)
1.1、说一下生命周期
beforeCreate();
created();
beforeMount();
mounted();
beforeUpdate();
updated();
beforeDestroy();
destroyed();
1.2、页面(组件)加载会执行哪些生命周期
beforeCreate()(什么都没有);
created()(没有节点,有数据);
beforeMount()(没有节点,有数据,dom就绪中,如果加载网络请求可能会造成阻塞);
mounted()(有节点,有数据)
1.3、生命周期都怎么用,你用哪些?
created():发送网络请求
mounted():写入插件与DOM相关better-scroll一些插件需要操作dom必须在mounted中使用,
如果在create中可能会报错,可能是null
二、路由(40%)
2.1 路由传值(显示、隐式)
显示:query:{ key: '电视' } 接收: this.$route.query.key
隐式:必须加上路由的name params:{ name: '小林'} 接收: this.$route.params.name
***需要加name
this.$router.push({
path: '/about',
name: 'About',
params: {
names: '小林'
}
})
2.2 路由的模式和区别
a. hash http://localhost:8080/
b. history http://localhost:8080/about
2.3 路由导航守卫(拦截)
to ==> 去哪个路由了 [现在进行时]
from ==> 之前是哪个路由 [过期]
next ==> 保安拦截 带路由就跳转到某个路由下 比如 订单管理 如果没有登录就不能进入订单管理
全局
router.beforeEach((to, from, next) => {})
router.afterEach((to, from, next) => {})
组件内守卫
beforeRouteEnter((to, from, next)=> {})
beforeRouteUpdate((to, from, next)=> {})
beforeRouteLeave((to, from, next)=> {})
路由独享
beforeEnter:((to, from, next) =>{})
2.4 动态路由和子路由
子路由是方便维护,统一管理路由
动态路由: 名称/:id
场景: a==>新闻页 b==>多商品详情页
三、keep-alive(40%)
a.是什么:缓存组件
b.场景:性能优化
c.初次进入时:created > mounted > activated;退出后触发deactivated
再次进入:会触发activated;事件挂载的方法等,只执行一次的放在mounted中去执行的方法放在activated中
四、ref(40%)
获取dom元素 <h1 ref='xxxxsb'></h1> this.$refs.xxxxsb
五、nextTick(50%)
a.当dom加载完毕执行内部代码
b.场景:在做商品里面有分类(左右列表切换),要用到better-scroll插件
六、axios二次封装(50%)
a. 每次请求数据都会有加载中有数据后就关闭加载中
b. 验证token,如果没有token,就需要push跳转到login(登录页)
总结: 方便,后面使用简单,好维护
七、vuex(60%)
7.1 vuex有哪些属性
state, getters, mutations, actions, modules
7.2 vuex你在什么情况下用,为什么用vuex
a.管理数据方便,地址,用户,购物车
b.为什么要用modules 当state数据比较多,不好管理,也不知道哪一个属性是在哪个地方用的?
7.3 vuex中mutaions和actions的区别
a.使用不同:mutaions是可以直接改变state数据的(当然actions也可以),但是actions他的工作是提交 mutations
b.mutaions必须是同步的,actions可以包含任意异步操作
c.actions比mutaions调试更方便
八、computed和methods和watch区别(80%)
a.computed:有缓存,进入组件会执行一次,当值发生变化才会执行
b.methods:template改变,methods内所有方法都会执行
c.watch:是监听数据,当值发生变化才会执行(状态[当前状态和上一次状态])
九、组件传值(80%)
父==>子 props 子==>父 $emit 兄弟 event.bus vuex
十、v-model双向绑定原理(70%)
Object.defineProperty()
十一、v-if和v-show区别(60%)
a.v-if先创建和删除
b.v-show是显示和隐藏(有盒子只不过隐藏)
c.场景:页面当加载的时候v-show的性能不如v-if 频道切换情况v-if不如v-show
十二、mvvm(8%)
m:模块层,methods,data...,通过模块来定义内容,让view层展示出来
v:视图,网页展示出来的内容,把数据展示效果,内容,dom
vm:是vue.js底层逻辑自动实现的,不需要我们操作例如v-model,注意这里v-m
十三、样式穿透(8%)
/deep/
十四、scoped原理(5%)
在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,
它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,
可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。
十五、v-if和v-for优先级(10%)
a.v-for优先级大于v-if,一般v-if和v-for不会写在同一个标签上,如果写在一起