Vue知识点汇总

Q:什么是mvvm

mvvm是一种设计思想
m->model 数据层
v->view 视图层
vm->viewmodel 控制层，自动更新，渲染视图，双向绑定
优点：实现了修改数据和模板自动渲染，解放了开发者，只需要关注View和Model，不用手动的操作DOM，效率和性能提高，低耦合度，独立开发，可复用性高

Q:mvvm和mvc的区别

mvvm是MVC 演化而来的
其中 用 vm 替换了 c
c也是控制层，是单向循环的，v-c-m-v 手动渲染，视图渲染在 model层
mvvm控制层是vm,实现数据双向绑定，同步渲染视图

Q:vue的优点是什么（mvvm的优点）

• 低耦合
  视图（view）可以独立于model变化和修改，一个viewmodel 可以绑定到不同的view上，当view变化的时候model可以不变，当model变化的时候，view也可以不变
• 可重用性
  你可以帮一些视图逻辑放在viewModel里面，让很多view共用
• 独立开发
  专注于view 和model 层

Q:Vue生命周期

• beforeCreate / created
• beforeMount / mounted
• beforeUpdate / updated
• beforeDestroy /destoryed
• activated
• deactivated
• errorcaptrued

Q:组件之间的通信

• 父组件-> 子组件 props
• 子组件-> 父组件 on(event)

Q:路由之间的跳转

• 声明式
  标签跳转
  <router-link to=''>
• 编程式
  js跳转
  this.$router.push/replace

懒加载（按需加载路由）

const app = ()=>import('./app.vue')
之前的版本使用的webpack 中提供的require.ensure()来实现
const home = resolve=>require(['./home'], resolve)

Q:vuex是什么？哪些场景使用它

vuex是vue的状态管理器，作为vue的一个插件
当有数据需要大量交互，或者大多组件需要共享时

Q:vue-router的导航钩子

• 全局的
  router.beforeEach
  router.beforeResolve
  router.afterEach
  -组件中
  beforeRouteLeave
  beforeRouteUpdate
  beforeRouterEnter
  -路由中
  -beforeEnter

Q:vue的双向绑定原理

采用数据劫持结合发布者-订阅者模式，通过Object.defineProperty()来劫持给个属性的setter和getter,在数据变化时，向订阅者发布消息，触发相应的回调函数更新

Q:Vuex如何区分state是外部直接修改，还是通过mutation方法修改的

Vuex 中修改state的唯一方式是 操作 muations,其底层通过执行 this._withCommit(fn)设置—_committing标志变量为true,才能修改state
所有只要查看 _committing的标志变量，就可以知道 state是否是合法的方式改变的