Vue2 的生命周期钩子有哪些?
1.create 2 (before+ed) -SSR
2.mount 2
3.update 2
- destroy 2
还有三个写在钩子列表里
1.activated
2.deactivated
3.errorCaptured
请求放在mounted里面,因为刚在其他地方都不合适(xjb扯)
Vue2 组件间通信方式有哪些?
1.父子组件:使用【props和事件】进行通信
2.爷孙组件:
a.使用两次父子组件间通信来实现
b.使用【project+inject】来通信
3.任意组件:使用eventBus=new vue()来通信
a.主要API 是eventBus. emit
b.缺点是时间多了就很乱,难以维护
4.任意组件:使用Vuex通信(Vue3可用Pinia代替Vuex)
Vuex用过吗?怎么理解
1.Vuex是一个专为Vue.js 应用程序开发的状态管理模式+库
2.核心概念的名字和作用:store/State/Getter/Mutation/Action/Module
a.store是个大容器,包含以下内容
b.State用来读取状态,带有一个maoState辅助函数
c.Getter用来读取派生状态,附有一个mapMutations辅助函数
d.Mutation用于同步提交状态变更,附有一个mapMutations辅助函数
e.Action 用于异步变更状态,但它提交的是mutation,而不是直接变更状态
f.Module 用来给store 划分模块,方便维护代码
Module 和Action 为什么要分开?
答:为了让代码更易于维护(可是Pinia就把Mutation和Action合并了)
VueRouter用过嘛?
1.VueRouter 是vue的官方路由 ,VueRouter 是用于单页面应用的
2.核心名字作用:router-link router-view嵌套路由。Hash模式和History模式导航守卫,懒加载
3.常见追问:
a.Hash模式和History模式的区别?
i.一个用的Hash,一个用的History API
ii.一个不需要后端nginx配合,一个需要
b.导航卫士如何实现登录控制?
router.beforeEach((to,from,next)=> {
if(to.path === '/login') return next ()
if(to是受控页面&&没有登录) return next('/login?return_to='+encodeURIC..(to.path))
next()
})
Vue 2是如何实现双向绑定的?
1.说明一般使用v-model实现,‘v-model’是v-bind:value和v-on:input的语法糖
a.v-bind:value 实现了data=>UI的单向绑定
b.v-on:input实现了UI=>data的单向绑定
c.加起来就是双向绑定了
2.这两个单向绑定是如何实现的?
a.前者通过Object.defineProperty API给data创建getter和setter,用于监听data的改变,data一变就会安排改变UI
b.后者通过template compiler 给DOM添加时间监听 ,DOM input的值 变了就会修改data