一, MVVM 是什么?
MVVM 模式是 Model,View,ViewModel 的简称. MVVM 是一种设计思想. Model 层代表数据模型, 也可以在 Model 中定义数据修改和操作的业务逻辑; View 代表 UI 组件, 它负责将数据模型转化成 UI 展现出来, ViewModel 是一个同步 View 和 Model 的对象.
在 MVVM 架构下, View 和 Model 之间并没有直接的联系, 而是通过 ViewModel 进行交互, Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中, 而 Model 数据的变化也会立即反应到 View 上.
二, MVVM 和 MVC 区别? 他和其他框架 (jQuery) 的区别是什么? 哪些场景适合?
mvvm 实际是 mvc 的一种升级. 都是一种设计思想, 主要是 mvc 中的 Controller 演变成 mvvm 中的 viewMode.mvvm 主要解决了 mvc 中大量的 dom 操作使页面渲染性能降低, 加载速度变慢, 影响用户体验.
和 jQuery 相比: vue 数据驱动视图, 通过数据来显示视图层而不是节点操作.
场景: 数据操作比较多的场景, 更加便捷.
三: Vue 优点是什么?
1. 低耦合: 视图 (View) 可以独立于 Model 变化和改变, 一个 viewModel 可以绑定到不同的 View 上, 当 View 变化的时候, Model 可以不变, 当 Model 变化的时候 View 也可以不变.
2. 可重用性: 你可以把一些视图逻辑放在一个 ViewModel 里面, 让很多 view 重用这段视图逻辑.
3. 独立开发: 开发人员可以专注于业务逻辑和数据的开发(ViewModel), 设计人员可以专注于页面设计, 使用 Expression Blend 可以很容易设计界面并生成 xaml 代码.
4. 可测试: 界面素来是比较难于测试的, 而现在测试可以针对 ViewModel 来写.
四, 组件之间的传值
1. 父组件与子组件传值
父组件通过标签上面定义传值
子组件通过 props 方法接收数据
2. 子组件向父组件传递数据
子组件通过 $emit("方法名",'数据')方法传递参数
父组件通过标签获取方法.
五, 路由之间的跳转
1. 声明式(标签跳转)
2. 编程式(JS 跳转)
六, vue.cli 中怎样使用自定义组件? 有遇到过哪些问题?
1. 新建 data.vue 文件, script 一定要 export default {}.
2. 然后在需要的页面引入 import Data form ../components/data.vue;
3. 注入到 vue 的子组件的 components 属性中, components:{Data};
4. 在页面使用 < Data/>
七, vue 如何实现按需加载配合 webpack 设置?
webpack 中提供了 require.ensure()实现按需加载, 以前引入路由是通过 import 这样的方式引入, 现在改为 const 定义的方式来引入
1. 不进行按需加载引入: import home from '../../common/home.vue'
2. 进行按需加载引入: const home = r =>require.ensure([],()=>r(equire('../../common/home.vue'))) ;
八, vuex 面试相关
(1)vuex 是什么? 怎么使用? 哪些功能场景使用它?
1.vue 框架的状态管理, 先 NPM i vuex 下载, 然后在 main.JS 引入 store, 注入. 新建一个目录 store,...export.
2. 场景: 单页应用中, 组件之间的状态, 音乐播放, 加入购物车, 登陆状态.
(2)vuex 有几种属性
有五种: State,Getter,Mutation,Action,Module
1.vuex 的 State 特性
A,vuex 就是一个仓库, 仓库里面放了很多对象, 其中 state 就是数据源存放地, 对应于一般 vue 对象里面的 data
B,state 里面存放的数据是响应式的, vue 组件从 store 中读取数据, 若是 store 中的数据发生改变, 依赖这个数据的组件也会发生更新.
C, 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中.(vuex 中的 state 建议使用 computed 存放, 如果使用 data 存放则需要 wacht 去实时监听)
2.vuex 的 Getter 特性
A,getters 可以对 State 进行计算操作, 他就是 store 的计算属性
B, 虽然在组件内也可以做计算属性, 但是 getters 可以在多个组件之间复用.
C, 如果一个状态只在一个组件使用, 是可以不用 getters
3.vuex 的 Mutation 特性
Action 类似于 mutation, 不同在于: Action 提交的是 mutation, 而不是直接变更状态. Action 可以包含任意异步操作.
(3)不用 vuex 会带来什么问题?
1. 可维护性下降, 想修改数据要维护三个地方.
2. 可读性会下降, 因为一个组件里的数据, 根本就看不出来是从哪来的.
3. 增加耦合, 大量的上传派发, 会让耦合性大大增加, 本来 vue 用 component 就是为了减少耦合, 现在这样用, 和组件化的初衷相悖.
九, v-show 和 v-if 指令的共同点和不同点
1.v-show 指令是通过元素的 dispaly 的 CSS 属性隐藏或显示
2.v-if 指令是直接销毁和重建 dom 达到让元素显示或者隐藏.
十, 如何让 CSS 只在当前组件起作用?
在当前组件 < style > 修改为 < style scoped>
十一,<keep-alive></keep-alive > 的作用是什么?
<keep-alive></keep-alive > 包裹动态组件时, 会缓存不活动的组件实例, 主要用于保留组件状态或者避免重新渲染.
十二, 指令 v-el 的用作是什么?
提供一个页面上已经存在的 dom 元素作为 vue 实例挂载目标, 可以是 CSS 选择器, 也可以是一个 HTLMElement 实例.
十三, 在 vue 中使用插件的步骤
采用 es6 的 import...from... 语法或者 CommonJs 的 require()方法引入插件
采用全局方法 Vue.use(plugin)使用插件, 可以传入一个选项对象 Vue.use(Myplugin,{someOption: true})
十四, 请列举出三个 vue 中常用的生命周期钩子函数
1.created: 实例已经创建完成之后调用, 在这一步, 实例已经完成数据观测, 属性和方法的运算, watch/event 事件回调, 然而, 挂载阶段还没开始,$el 属性目前还不可见.
2.mounted:el 被新创建的 vm.$el 替代, 并挂载到实例上去之后调用该钩子, 如果 root 实例挂载了一个文档内元素, 当 mounted 被调用时 vm.$el 也在文档内.
3.activated:keep-alive 组件激活时调用.
十五, active-class 是哪个组件的属性?
vue-router 模块的 router-link 组件.
十六, 怎么定义 vue-router 的动态路由以及如何获取传过来的动态参数?
- const routes = [
- {
- path:'/', // 当前路径(是给默认首页的路径 index.vue 文件)
- component:Index, // 组件对应 view 的 index.vue
- name:"Index" // 给个对应的名字比较好, 不给也可以.
- },
- ]
- var route = new router({
- mode: 'history',
- routes, // 配置路由,
- });
- export default route;
获取动态参数方法:(1)path,query 结合使用 this.$route.query.id;(2)name,params 结合使用: this.$route.params.id.
十八, vue-router 有哪几种导航钩子?
第一种: 全局导航钩子, router.beforeEach(to,from,next), 作用: 跳转前进行判断拦截.
第二种: 组件内的钩子.
第三种: 单独路由独享组件.
来源: http://www.bubuko.com/infodetail-2895967.html