面试题总结1.1

关于MVVM

• Model–View–ViewModel （MVVM） 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师
  Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF
  和 Silverlight 的架构师）于2005年在他的博客上发表
• MVVM分为三个部分：

•  分别是M（Model，模型层 ）泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。
  

•  V（View，视图层），VM（ViewModel，控制器，V与M连接的桥梁）也就是用户界面。前端主要由 HTML 和 CSS 来构建 
  

•  VVM 源自于经典的 Model–View–Controller（MVC）模式 ，MVVM的出现促进了前端开发与后端业务逻辑的分离，极大地提高了前端开发效率，MVVM 的核心是 ViewModel层，它就像是一个中转站（value converter），负责转换 Model中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用
  

关于Object.defineProperty
Object.defineProperty可以再一个对象中定义或者修改一个属性，然后返回这个对象，并且可对该属性的可写行，可便利性，存取描述符(get、set)等进行设定，兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写
参数：Object.defineProperty(obj, prop, descriptor)
路由传参

1. 父组件中：<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>
   子组件中：使用this.$route.params.num来接收路由参数
2. 通过路由属性中的name来确定匹配的路由，通过params来传递参数
   
   子组件接收
   
   Webpack
   Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
   Webpack入门教程
   Bootstrap
   简洁、直观、强悍的前端开发框架。
   编译 Less/Sass 源码时需要使用 Autoprefixer 工具
   Bootstrap 利用 Autoprefixer 自动为 某些 CSS 属性添加针对特定厂商的前缀。如果你是从 Less/Sass 源码编译 Bootstrap 的，并且没有使用 Bootstrap 自带的 Gruntfile 文件，那你就必须将 Autoprefixer 集成到你的编译工具和编译过程中。如果你使用的是我们预先编译好的 Bootstrap 文件或者使用的是我们提供的 Gruntfile 文件，那就无需操心了，因为我们提供的 Gruntfile 中已经集成了 Autoprefixer。编译 CSS 和 JavaScript 文件。

H5和APP的交互
App内嵌H5页面：两种传值方式

	app给h5传值（方法主体由h5人员编写，移动端调用）
	h5给app传值 （方法主体由移动端人员编写，h5调用）

在h5调用Android方法时需要一个通讯桥梁，这个通讯桥梁的名字可两方协定

					//h5调用移动端的方法

//Android的调用方法
window.JSBright.getPrintData(this.clickchecknum);
//ios的调用方法：
window.webkit.messageHandlers.getPrintData.postMessage({
      params: this.clickchecknum,
});

					//移动端调用h5方法
window.getParams = this.getParams;

1 首先判断当前打开的页面是否在app中

 如果在app中，则进行之后的交互（与app人员约定一个方法名，方法由app人员去写）

如果不在app中，则判断环境进行下载的操作

2 下载的操作

-  区分是不是微信环境（android在微信中不能直接下载~，IOS会弹出提示，然后可直接跳转到appStore）

- 区分IOS/Android

     这是如果是Andorid环境，则需要自己添加遮罩层提示用户三方浏览器打开下载

vuex存储流程：
vuex五种属性，分别是State、 Getter、Mutation 、Action、Module

• state 基本数据(储存数据数据)
• getters 从基本数据(state)派生出来的数据，相当于state的计算属性,具有返回值的方法
• mutations 提交更新数据的方法，同步(如果需要异步使用action)，commit：同步操作，写法： this.$store.commit(‘mutations方法名’,值)
• actions 包裹mutations，使之可以异步。Action 可以包含任意异步操作。
• modules：模块化vuex。

1. 在vue组件里面，通过dispatch来触发actions提交修改数据的操作。

2. 然后再通过actions的commit来触发mutations来修改数据。

3. mutations接收到commit的请求，就会自动通过Mutate来修改state里面的数据。

4. 最后由store触发每一个调用它的组件的更新

Vuex的作用：项目数据状态的集中管理，复杂组件(如兄弟组件、隔代组件)的数据通信问题。
路由守卫参考vue-router