1.vue的生命周期
vue的生命周期有一下几个阶段:
beforeCreate:Vue实例创建之前,此时data不可访问,为undefined;
created:Vue实例已经创建,此时data可以访问,但是el为undefined;
beforeMount:Vue实例挂载之前,此时el中的数据使用{{}}占位;
mounted:Vue实例已经挂载,此时el中的数据已经是真实数据;
beforeUpdate:Vue实例更新之前,此时虚拟dom已经更新;
update:Vue实例以及更新,此时虚拟dom渲染到真实dom中去;
beforeDestory:Vue实例销毁之前调用,此时Vue实例依然可用;
destoryed:Vue实例已经销毁,Vue实例中的所有东西都会销毁,所有事件监听器都会移除,所有子实例也都会被销毁。
详细的解释请查看:https://www.jianshu.com/p/a6a730f5cdce
2.v-if与v-show的区别
两者的相同点都是判断dom节点是否显示
不同的是v-if是惰性的,如果判断条件是假则什么都不做,只有为真才进行编译,而v-show不管条件真假都会进行编译,然后被缓存,dom节点始终保留;两者的切换也是不同的v-if是局部编译和卸载的结果,而v-show是基于css的display属性的切换,因此v-if有着更高的切换消耗,v-show有着更高的初始渲染消耗。
3.vue中key值的作用
vue中key的作用是为了更高效的更新虚拟dom,原理是vue在patch过程中可以根据key精确判断两个节点是否为同一个,避免频繁更新相同元素。使得整个patch过程更高效,减少dom操作,提高性能。
4.vue组件的data为什么必须是函数,而Vue根实例则没有此限制
因为一个组件可能存在多个实例对象,如果把data定义成一个对象,这样所有的实例共用同一个data对象,那么状态变更将会影响到所有实例,这样显然是不合理的,采用函数形式定义,在initdata时会将其作为工厂函数返回全新的data对象,避免了多实例间的污染问题。而Vue的根实例只能有一个,所以不存在该问题。
5.v-for与v-if谁的优先级高
通过打印render函数的打印结果,可以知道v-for优于v-if被解析,如果同时出现会先执行循环再判断条件,这样浪费了性能。可以通过在最外层嵌套template,在template上调用v-if,在内部进行v-for循环
6.谈一谈对vue设计原则的理解
vue是一个渐进式的js框架,被设计为可以自底向上逐层应用。如果应用足够小,我们可能仅需要vue的核心库就可以完成,随着应用规模的不断扩大,我们就可以按需引入vuex,路由,脚手架等库和工具。vue也是易用的,声明式的模板语法和数据响应式,基于配置的组件系统等核心特性,使我们只需要关注应用的核心业务即可。vue也是高效的,其拥有超快的虚拟dom以及diff算发使应用性能更高效,而且vue3.0引用了proxy对数据响应式进行改进,会让vue越来越高效
7.谈一谈mvvm框架模式
mvvm框架可分解为model,view,viewmodel;viewmodel通过事件监听响应用户在view中的操作,修改model中的数据;viewmode通过实现一套数据响应机制自动响应model中数据的变化,同时通过实现一套自动更新策略,把model中数据的变化转化为视图的更新。
mvvm框架的好处是降低了model与view之间的耦合性,也同时解决了维护view与model之间映射关系的繁杂代码和dom操作代码,让用户只需要专注于业务逻辑,兼顾了开发效率和可维护性
8.vue性能优化
1.路由懒加载
2.图片懒加载(页面未出现图片先不加载,滚动到可视区域再加载,使用v-lazy)
3.v-for遍历与v-if避免同时使用
4.使用keep-alive缓存页面
5.第三方插件的按需引入(如element-ui可按需引入Button)
important {Button,Select} from 'element-ui';
Vue.use(Button);
Vue.use(Select);
9.Vuex的使用和理解
vuex是vue的状态管理模式,对vue所有组件的共享状态进行集中式管理。vuex是一个单向数据流,在全局拥有一个State存放数据,如果组件需要更改State中的数据,需要通过Mutation提交修改信息,而异步操作和批量的同步操作需要Action,Action也无法直接修改state中的数据还是需要通过mutation来修改,最后更据State中数据的变化渲染到视图上
state:vuex中唯一的数据源,可以通过this.$store.state.属性获取,如果获取多个可以再computed里使用...mapState
getters:可以理解为计算属性,可以通过this.$store.getters.方法获取,getter里的值依据它的依赖缓存起来,依赖变化才重新计算,获取多个可以使用..mapGetters
mutation:更改State的唯一方法通过Mutation提交修改信息(this.$store.commit(mutation名,参数)
action:action修改状态需要调用mutation.action支持异步,可以通过this.$store.dispatch触发,多个Action可以使用..mapAction
model:允许vuex将store分割成模块,每个模块都有自己的state,getters,mutation,actions
vuex存储的数据是响应式的,但是数据并不会被存储,刷新之后就回到初始状态,具体做法是在vuex里数据改变时把数据拷贝一份到localStorage中,刷新之后,如果localStorage中有数据则从localStorage里取出来替换vuex中的state
具体的使用参考:https://www.jianshu.com/p/8134c98cac64
10.Vue-route的导航钩子有哪些
1.全局钩子beforeEach(to,from,next)和afterEach(to,from)
2.路由配置钩子beforeEnter(to,from,next)
3.组件配置钩子
beforeRouteEnter(to,from,next) 此时实例还未创建
beforeRouteUpdate(to,from,next)实例可以访问了
beforeRouteLeave(to,from,next)
可以在watch监听中进行路由监测
watch:{
$route(to,from) {
}
}