vue复习
MVVM理解
- Model：代表数据模型，数据和业务逻辑都在Model层中定义；
- View：代表UI视图，负责数据的展示；
- ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
vue的理解
- vue中的computed，watch，methods的区别
- computed：
- 缓存数据，如果属性依赖没有变化，不会重新计算
- 一个数据手多个数据的影响
- watch：
- methods：
vue的深入式响应原理
- 非侵入性的响应式系统
- 数据模型是普通的js对象，修改时，视图回进行更新
- 原理：
- 把一个普通的js对象传入vue实例作为data，vue将便利此对象的所有的property，并使用Object.defineProperty把这些property全部转换为getter，setter；
- getter，setter用户不可见，但是内部vue可以追踪依赖，在proerpty被访问和修改时通知变更。
- 每个组件实例都对应一个watcher实例，会在组件渲染的过程中把接触过的数据property记录为依赖
- 之后当依赖项的setter触发时，会通知watcher，从而使关联的组件重新渲染。
vue的proxy原理
- Proxy基本语法
const obj = new Proxy(target, handler);
参数说明如下：
target: 被代理对象。
handler: 是一个对象，声明了代理target的一些操作。
obj: 是被代理完成之后返回的对象。
但是当外界每次对obj进行操作时，就会执行handler对象上的一些方法。handler中常用的对象方法如下：
1. get(target, propKey, receiver)
2. set(target, propKey, value, receiver)
3. has(target, propKey)
4. construct(target, args):
5. apply(target, object, args)
vue的生命周期
- 创建vue实例，Vue（）；
- 在创建vue实例，执行init（），调用beforeCreate（）；
- 同时监听data数据，初始化内部事件，进行属性，方法计算；
- 以上干完了调用created钩子函数；
- 模版编译
- 编译模版完成，调用beforeMount函数
- Mounted： el被vm.$el替换，并挂载实例上之后调用该钩子函数
- beforeUpdate：数据更新时调用，发生在虚拟Dom重新渲染和打补丁之前，再次钩子中可以进一步更新状态，不会出发附加render过程；
- updated：数据更新导致的虚拟Dom重新渲染，打补丁，被调用时，组件dom已更新；
- activated： keep-alive组件激活时调用
- deactivated： keep-alive组件停用时调用
- beforeDestory： 实例销毁之前
- destoryed：vue实例销毁后调用
vue的父子组件的生命周期的顺序
- 父beforeCreate ----》父 crated ----》父beforeMount ----》子 beforeCreate -----》子 created ------》 子 beforeMount -----》 子 mounted -----》 父 mounted
keep-alive的用法
- keep-alive是什么？
- 抽象组件，自身不会渲染Dom，也不会出现在父组件中，包裹动态组件，缓存不活动的组件，不是销毁组件
- 应用
- 动态组件中 ---------》 inclued（缓存） exclued（不缓存）
- vue-router中使用
vue的父子组件通信
- props/emit方法
- 父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。
- emit/on
- 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。
- 方法： var Event = new Vue();
- vuex方法
- vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更改 State 中的数据时，必须通过 Mutation 进行，Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action，但 Action 也是无法直接修改 State 的，还是需要通过 Mutation 来修改 State 的数据。最后，根据 State 的变化，渲染到视图上。
- vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在 vuex 里数据改变的时候把数据拷贝一份保存到 localStorage 里面，刷新之后，如果 localStorage 里有保存的数据，取出来再替换 store 里的 state。
- attrs/listeners
- attrs：包含了父作用域中不被prop所识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v−bind="attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
- listeners：包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on="listeners" 传入内部组件
- provide/inject
- 祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量
- provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
vue的优点和缺点
- 优点：组件化开发，单页面路由，丰富的api方法，单项数据流，易于结合第三方库；
- 缺点： 指令太多滥用指令，
vue的路由的懒加载原理，import和require区别？
- 原理：
- vue的异步组件，webpack的代码分割功能实现懒加载
- 区别：
- require： 是AMD方式 ----》 运行时调用（赋值过程）
- import： 是es6的语法 ----》 编译时调用（解构过程）
- 优点
- 更好的用户体验，首屏组件家在速度更快，解决白屏，懒加载将页面划分，需要时家在，分担首页所承担的家在压力，减少首页加载用时
