《 Vue 组件化设计》测试题
一、关于MVVM的理解
1. Model 代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑。
2. View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来。
3. 当数据发生变化,ViewModel 能够监听到数据模型的变化,然后通知对应的视图做自动更新;而当用户操作视图时,ViewModel 也能监听到视图的变化,然后通知数据模型做改动,这实际上就实现了数据的双向绑定。
4. 在MVVM架构下,开发者有些时候还是需要手动操作DOM的,比如:
- 输入框的focus焦点
- 控制滚动条——回到顶部
- 弹窗,需要手动挂载组件
1. Vue实例的生命周期——从创建到销毁。
- 创建实例 new Vue(), beforeCreate 空壳 》
- 挂载数据 data,绑定事件 methods,created 可更改数据 》
- 将模板编译为虚拟DOM并生成render函数,beforeMount 可更改数据 》
- render函数渲染出真实DOM,mounted 可操作真实DOM 》
- 数据更改,beforeUpdate 》
- 新旧虚拟DOM利用diff算法进行对比并重新渲染真实DOM,updated 可操作更新的虚拟DOM了 》
- 调用$destroy方法,beforeDestroy 》
- 善后工作,destroyed
2. 页面首次加载会触发 beforeCreate、created、beforeMount、mounted。
3. created表示完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来。
4. DOM 渲染在 mounted 中就已经完成了。
三、关于Vue组件间的参数传递
1. 父组件给子组件传值,子组件通过 props 接受数据。
2. 子组件给父组件传值,使用 $emit 方法。
3. 子组件使用 $emit(‘someEvent’)派发事件,父组件使用 @someEvent 监听事件。
4. 兄弟组件之间不能直接通信,只需要父元素搭个桥即可。
5. 祖组件给孙组件跨层级传值,可以使用 provide(祖)和 inject(孙)。
四、关于v-model的描述
1. v-model 除了可以用于表单控件以外,还可用于 input 、自定义组件等其他控件,实现双向数据绑定。
2. v-model 本质上是语法糖,它实现了用户的输入事件监听以及数据更新。
3. 实现自定义组件的双向数据绑定:对 input 使用 v-model 实际上是指定其 :value 和 @input,并且还需要通知父组件。
五、其他
1. key 的作用主要是为了高效地更新虚拟DOM。
2. 使用 vm.$nextTick 可以确保获得DOM异步更新的结果。详解1 / 详解2
当Vue选项对象中有render渲染函数时,Vue构造函数将直接使用渲染函数渲染DOM树;当Vue选项对象中没有render渲染函数时,Vue构造函数首先通过将template模板编译生成渲染函数,然后再渲染DOM树;而当Vue选项对象中既没有render渲染函数,也没有template模板时,会通过el属性获取挂载元素的outerHTML来作为模板,并编译生成渲染函数,然后再渲染DOM树。
换言之,在进行DOM树的渲染时,render渲染函数的优先级最高,template次之且需编译成渲染函数,而挂载点el属性对应的元素若存在,且在前两者均不存在时,其outerHTML才会用于编译与渲染。
两者在使用效果上没有任何区别,都是为了将实例化后的 vue 挂载到指定的DOM元素中。
如果在实例化 vue 的时候指定 el,则该 vue 将会渲染在此 el 对应的DOM中,反之,若没有指定 el,则 vue 实例会处于一种“未挂载”的状态,此时可以通过 $mount 来手动执行挂载。
注:如果 $mount 没有提供参数,模板将被渲染为文档之外的的元素,并且你必须使用原生DOM API把它插入文档中。
六、思考题:递归组件如果加checkbox全选,如何实现? dispatch / boardcast
进阶思考题:如何做到子元素全选后,父元素自动全选?
《VUE全家桶最佳实践》测试题
一、关于Vuex的描述
1. Vuex 是一个状态管理模式。
2. Vuex主要用于多视图间状态全局共享与管理。
3. 在Vuex中只能通过mutations改变状态。
4. Vuex通过Vue实现响应式,因此只能用于Vue。
二、关于Vue-router的描述
1. Vue-router有hash和history两种模式。
2. 可以通过addRoutes和replaceRoutes方法动态添加和替换路由。
3. 可以通过beforeEnter进行路由守卫。
4. Vue-router之所以能够通过修改hash或者path更新内容,是因为借助了Vue的响应式原理。
三、关于typescript在Vue中的应用
1. 使用TypeScript可获得静态类型检查以及最新的ECMAScript特性。
2. TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。意味着你完全可以用JS语法编写TS代码。
3. 使用Vue.extend({})方式声明组件能获得TypeScript类型推断能力。
4. 基于类的Vue组件中如果要声明初始数据可以直接声明为实例的属性,如:message: string = 'Hello!'。
四、关于vue的描述
1. vue简单易上手,性能高效,还便于与第三方库或既有项目整合。
2. vue不仅适合中小型项目,也适合开发大型项目。
3. vue基于组件构建应用,代码组织简洁、易理解、易维护。
4. vue借助虚拟DOM实现跨平台,服务端渲染,以及性能良好的DOM更新策略。
五、关于vue-cli的描述
1. vue-cli3内部用的webpack来开发。
2. vue-cli3可以实现数据mock。
3. vue-cli3包含开发的大致功能,但有时也需要定制。
4. 工程化是为了提高开发效率,还可以完成部分实现性能优化的能力。
5. npm run test和npm run pretest是两个有先后顺序的命令。