Vue专项练习

1、以下不是vue 内置指令的是（）

• v-html
• v- on
• v- for
• v-hidden

答：选D .== v-html 指令：让标签内用 html 渲染== , v-on 指令： 绑定事件，v- for 指令： 循环，v-hidden 没有
vue 中的 隐藏是 v-if 和 v-show

2、关于 Vuex 的说法错误的是

• 可以使用 this.$store.state 获取 Vuex 中的存储状态
• getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新金酸
• 更改Vuex 的 store 中的状态的唯一方法是提交 mutations 中的方法
• Actions 可以包含任意异步操作，可以直接变更状态

答: 选 D，Action 提交的是 mutation,而不是直接改变状态， Action 可以包含任意异步操作

3、有如下代码，最终渲染出来的 div 元素的 class 属性值是（）

<div class = "static" v-bind:class= "{active: isActive,'text-danger': hasError}"> </div>

和如下 data:

data:{
	isActive:true;
	hasErroe: false
}

A. static isActive
B.static active
C.static hasError
D.isActive
答案：选B

4、关于 Vuex 说法错误的是（）

• Vuex 可以用来管理数据

• Vuex 也可以实现组件间的传值

• Vuex 的属性有 state、mutations、actions、setters 等

• mutation 中 的方法按照规定最好不好设计异步方法
  答：选C。Vuex 的属性有== state、mutations、actions、getters、moudel==等
  5、Vue 路由：
  全局路由守卫的钩子函数有： beforeEach(全局前置守卫) 、beforeResolve(全局解析守卫)、afterEach(全局后置守卫)
  单个路由守卫：beforeEnter;
  组件路由守卫相关的钩子函数：beforeRouteEnter、beforeRouteUpdate、befoeRouteLeave
  6、关于路由模式说法错误的是（）

• vue-router 有两种模式，history 和 hash 模式

• hash 模式是通过 onchange 事件，监听 url 的修改

• history 通过 H5 提供的 API history.pushState 和 histort.pushState 实现跳转且不刷新页面

• history 模式需要后端进行配合
  答：B。hash 模式是通过 onhashchange 事件，监听 url 的修改
  7、下列哪些是Vue 的特性？

• 轻量级

• 双向数据绑定

• 组件化

• 数据驱动视图
  8、获取动态路由｛ path:‘/name/:id’｝中的值的正确是：

this.$route.params.id

9、Vue 的生命周期的钩子函数 mounted 和 beforeDestory 都可以获取到 DOM 元素
10、当组件在 keep -alive 内被切换时，它的 mounted 和 unmounted 生命周期钩子会被 activated 和 deactivated代替
11、关于 Vuex 说法错误的是（）

• actions 通过 commit 触发 mutations 中的方法进行状态变更

• Vuex 是单项数据流变更数据

• ajax 一般放在 mutations中，把获取到的数据存储到 state中，

• 由于 Vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象
  答：选C 异步操作放在 actions 中，actions 通过 commit 调用 mutations 中的 方法操作 state
  12、v-model添加 number 修饰符，如果这个值无法被 parseFloat（） 解析，则会返回 原始的值
  13、下列哪个选项不是单页面应用程序（SPA）的优点？

• 不需要重新加载整个页面，运行流畅

• 高效的前后端分离模型

• 有利于 SEO

• 减轻服务器压力
  答： 单页面应用程序中首页的数据需要通过在服务器异步获取，在这之前首页仅仅是一个模板，不利于 SEO
  14、关于 Vue 组件间通信说法错误的是（）

• Vuex 可以实现任何关系的组件间的通信

• 如果 子组件修改，通过props 获取的父组件传过去的字符串或数字会报错

• 子组件可以通过 $emit 给父组件传值

• 可以通过 context 进行组件间传值
  答：选D，context 是用在 react 中进行组件件的传值

15、以下属性 Vue绑定事件的指令是（）

• v-bind
• @
• v-on
• 1
  答： 绑定事件有两种方式： v-on、@
  v-bind 是绑定属性，题目是绑定事件； ：是 指令 v-bind 的缩写 @ 是v-on的缩写
  16、Vue路由跳转的方式有：
  route-link、this.$router.push()、this.$router.replace()、this.$router.go()等但是没有this.$router.jump()
  17、现有以下代码，打印的结果

new Vue({
	data:{a:1,b:2},
	watch:{
		a:{
			handler:function(value){
				console.log(value)
				}
			}
	}
})

A. 1 B. 打印语句不执行 C.undefined D. Null
答：watch 在不添加 immediate: true 属性时，默认是 不监听第一次赋值，watch 未触发

18、下列关于 Vue 和 react 的描述错误的是

• Vue 进行数据拦截、代理，对数据更敏感，数据驱动视图更新，而React 需要手动驱动更新视图
• Vue 和 React 的 this 都指向当前组件实例
• Vue 和 React 都能使用 JSX 进行编程
• Vue 和 React 都数据驱动视图的更新
  答：== React 中组件的 this 并不是当前实例，需要通过 bind 或箭头函数来修改指向==
  19、以下代码的结果是：（）

new Vue({
	data: {a;'first',b:'second'},
	created:function(){console.log(this.a)},
	mounted(){console.log(this.b)}
})

答：由于Vue 实例没有执行 DOM 挂载，所以不会执行 mounted 钩子函数

new Vue({
	el:'#APP',
	data: {a;'first',b:'second'},
	created:function(){console.log(this.a)},
	mounted(){console.log(this.b)}
})