Vue2 知识点总结

2022-11-26 0 972

1. Vue 2 的开发周期钳子有什么样?统计数据允诺放到别的钳子?

一共 11 个钳子分别是 8个常见的

beforeCreate | created:SSR(server-side render,服务端图形):前端和前端均会继续执行一场,不合乎市场预期beforeMount | mountedbeforeUpdate | updatedbeforeDestroy | destroyed

还有四个写在钳子条目里

activated:被 keep-alive 内存的组件转化成时初始化。deactivated:被 keep-live 内存的组件凋亡时初始化,该钳子在服务端图形期间不被初始化errorCaptured:当组件或是后裔组件发生严重错误时被初始化

统计数据允诺放到 mounted 原因:

不容放到 beforeCreate | created,这个钳子在SSR(server-side render,服务端图形)中会继续执行一场created,此为期前端和前端均会继续执行一场,不合乎市场预期,而mounted 不会在前端继续执行统率在前端继续执行合乎市场预期;不容放到 beforeUpdate | updated,此钳子促发的过分频密,统计数据请求放到该处难造成无穷循环式不容放到 beforeDestroy | destroyed,组件忽然封存的时候展开统计数据允诺片面

2. Vue 2 组件间通讯方式有什么样?

兄弟二人组件:采用「props 和该事件」展开通讯,eg.父组件传两个 props 相等于向女儿展开了一场通讯,子组件初始化该事件,emit 两个 click相等于向父组件展开了一场通讯母子组件:a. 采用三次兄弟二人组件间通讯来实现 b. 采用倚赖转化成「provide + inject」来通讯(在奶奶那里provide,侄子inject 转化成)任一组件:采用 eventBus = new Vue() 来通讯

a. 主要 API 是 eventBus.$on 和 eventBus.$emit ,用以 收 发 通告 b. 优点是该事件多了就很乱,无法保护

任一组件:采用 Vuex 通讯(Vue3 需用 Pinia 替代 Vuex)

3. Vuex 所用吗?怎么认知?

Vuex 是两个专为 Vue.js 应用领域软件开发的状况区域化 + 库

Vuex有五个重要的核心理念基本概念:store/State/Getter/Mutation/Action/Module

store 是个大罐子,包涵下列所有内容State 用以加载状况,暗含两个 mapState 远距表达式Getter 用以加载衍生(排序)状况,附上两个 mapGetter 远距表达式Mutation 用作同步递交状况更改(并行写状况),附上两个 mapMutations 远距表达式Action 用作促发器更改状况(促发器写状况),但它递交的是 mutation,而不是直接更改状况Module 用以给 store 分割组件,方便快捷保护标识符

Mutation 和 Action 为什么要分开?为了让标识符更易于保护

Vue 3 中 Pinia 为什么把 Mutation 和 Action合并了啊?这样的话会减少两个基本概念,让标识符更难认知

4. VueRouter 所用吗?怎么认知?

(1)Vue Router 是 Vue.js 的官方路由,它与 Vue.js 核心理念深度集成,让用 Vue.js 构建单页面应用领域变得轻而易举

(2)核心理念基本概念有:

router-link:用以做点击跳转的 router-view:用以容纳路由的视图嵌套路由:路由可以加两个child属性,路由里面还可以有路由,子路由图形在 router-view 中Hash 模式和 History 模式导航守卫:每个路由都可以设置两个钳子,进入这个路由离开这个路由以及在这个路由解析的时候做什么懒加载:import() 是懒加载,import后面不加括号就不是懒加载

(3)Hash 模式和 History 模式的区别?

a. Hash 模式用的是 url 里的 Hash,History 模式用的是 html5 的 History API

b. Hash 模式不需要前端 nginx 配合,History 模式需要前端配合(把所有的是 html 允诺都重定向到 index )

(4)导航守卫如何实现登陆控制?

router.beforeEach((to,from,next)=>{ if(to.path === /login) return next() if(to是受控页面 && 没有登录) return next(/login? return_to = + encodeURlComponent(to.path) //登录后回到当前页面 next() })

5. Vue 2 是如何实现双向绑定的?

(1)一般采用 v-model / .sync 实现,v-model 是:绑定 value v-bind:value 和监听 input 该事件 v-on:input 的语法糖

v-bind:value 实现了 data => UI 的单向绑定v-on:input 实现了 UI => data 的单向绑定加起来就是双向绑定了

(2)这两个单向绑定是如何实现的呢?

v-bind:value 通过 Object.defineProperty API 递归的给 data 创建 getter 和 setter,用作监听 data 的改变,data 一变就会安排改变 UI

v-on:input 通过 template compiler 给 DOM 根元素添加该事件监听 ,DOM input 的值变了就会去修改 data

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务