vue面试总结
1.vue生命周期
1、beforeCreate():组件实例刚刚被创建 (el和data并未初始化)
2、created():组件创建完成,属性已绑定,但DOM还未生成,$el属性还不存在 (完成data数据的初始化)
3、beforeMount():模板编译/挂载之前 (完成了el和data初始化)
4、Mounted():模板编译/挂载之后 (完成挂载)
5、beforeUpdate():组件更新之前
6、updated():组件更新之后
7、beforedestroy():组件销毁之前
8、destroyed():组件销毁之后
9、 activated keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。用于性能优化缓存dom和数据。
deactivated keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。
适应场景:
beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom
语言阐述:
那么我最常用的:created、mounted、destroyed、activated
created通常在初始化数据的时候使用,比如说:我们获取异步的ajax,初始化ajax获取的数据放在created里面
mounted挂载元素,跟dom相关的 比如说触发获取dom的操作,
destroyed 比如说我在这个页面做了一个定时器,那么离开页面的时候,要做一个clear,要不然就会出现内存泄露,因为是单页面应用,跳转之后不会自动销毁。
再比如监听一些事件,比如滚动事件,离开的时候也要给它卸载,不然造成内存泄露;
activated 需要配合keep-alive才能生效,比如首页这种存量大更新不频繁的地方,可以给它做一个缓存,再第一次访问的时候把它缓存下来。用于性能优化缓存dom和数据。
使用:套到路由的外边,整个页面就会被它缓存起来,但是之后你会发现,在后台数据更新的时候,第一次访问过后再刷新的时候,还是之前的数据,dom就不再更新了。如果想要继续更新的话,就需要把初始化数据,也就是created里面的数据放到activaed里面,这样就会解除缓存。
2.vue的传值
1.路由带参数进行传值:
a.通过query把orderId 从A组件传递给B组件,
this.$router.push({path:'/conponentsB',query:{orderId:123}}) //跳转到B
b.在B组件中获取A组件传递过来的参数
this.$route.query.orderId
2.通过设置 session Storage缓存的形式进行传递
3.父子组件传值
父传子 props
子传父 子组件用$emit触发事件,父组件用$on监听子组件的事件
兄弟传值 定义一个新的vue实例eventBus.js,
然后a组件用 eventBus.$emit,
b组件用 evrntBus.$on
父链 this.$parent 子组件使用可以直接访问该组件的父实例或组件
this.$children 父组件也可以使用它访问所有的子组件
子组件索引 用ref来为子组件指定一个索引名称,就是在子组件标签上ref指定一个名称,然后在父组件通过this.$refs访问指定名称的子组件
vuex传值
vuex有state、mutations、action、getters
state存放属性、变量
mutations用于同步,改变state的值
action 用于调取异步,如获取ajax, 并传递给mutations
Getters 可以对state进行计算操作,
modules 主要用来拆分state
常用的是mutations 对应的方法是 commit
actions 对应的方法是 dispatch
3.computed、watch的区别
computed计算属性本身具有缓存特性,界面刷新,计算属性有限读取缓存,判断是否有相关值的改变,相关值改变才会计算属性
(举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择。)
而watch方法调用没有,
每次刷新,方法都会执行,类似于事件监听+事件机制;
watch的方法默认是不会执行的,只有依赖的属性发生变化才会执行。
watch无法监听数组的情况,以及解决方案
无法监听数组的情况
1. 利用索引直接设置一个数组项时,例如:arr[indexOfItem] = newValue;
2. 修改数组的长度时,例如:arr.length = newLength;
3. 解决方案 1.this.$set(arr, index, newVal); 2.使用数组 splice 方法
4.MVVM模式(前后端分离的模式)
(注:react、vue都不是MVVM框架,只是有借鉴MVVM的思路)
View :用户看到的视图
Model :本地数据和数据库中的数据
ViewModel:视图和数据库之间的桥,它就像是一个中转站,负责转换Model中的数据对象来让数据变得更容易管理和使用,
该层向上 与视图层进行双向绑定,
向下与Model层通过接口请求进行数据交互,
通常我们写产品:
1.通过接口从数据库中读取数据,然后将数据经过处理展现到用户看到的视图层
2.从视图上读取用户的输入,然后又将用户的输入通过接口写入到数据库中,