Vue测试题 | liulinboyi

我们在初始化一个 Vue 应用时，需要首先创建一个 Vue 实例：

var vm = new Vue(options)

其中 options 是一个对象，请问文档中说 options 可以包含哪些 key ？（多选）

data props propsData computed methods watch
el template render renderError
beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed errorCaptured
directives filters components parent mixins extends provide inject
name delimiters functional model inheritAttrs comments

答案： 12345

有如下代码

html

<div id="app">
    <span class=span-a>
      {{obj.a}} 
    </span>
    <span class=span-b>
      {{obj.b}}
    </span>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    obj: {
      a: 'a',
    }
  },
})
app.obj.a = 'a2'

请问最终 span-a 和 span-b 中分别展示什么字符串？

span-a 中显示a，span-b 中不显示
span-a 中显示a2，span-b 中不显示
span-a 中显示a，span-b 中显示 undefined
span-a 中显示a2，span-b 中显示 undefined

答案：2

有如下代码

html

<div id="app">
    <span class=span-a>
      {{obj.a}} 
    </span>
    <span class=span-b>
      {{obj.b}}
    </span>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    obj: {
      a: 'a',
    }
  },
})
app.obj.b = 'b'

请问最终 span-a 和 span-b 中分别展示什么字符串？

span-a 中显示a，span-b 中显示 b
span-a 中显示a，span-b 中显示 undefined
span-a 中显示a，span-b 中不显示

答案：3

有如下代码

html

<div id="app">
    <span class=span-a>
      {{obj.a}} 
    </span>
    <span class=span-b>
      {{obj.b}}
    </span>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    obj: {
      a: 'a',
    }
  },
})
app.obj.a = 'a2'
app.obj.b = 'b'

请问最终 span-a 和 span-b 中分别展示什么字符串？

span-a 中显示a2，span-b 中不显示
span-a 中显示a2，span-b 中显示b

答案：2

关于 Object.freeze() 正确的有

Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。
const object2 = Object.freeze(object1); 其中 object2 和 object1 是同一个对象
被冻结对象有一个属性也是对象，那么这个作为属性的对象也是被冻结的。

答案：1，2

解答：

const object1 = {
  property1: 42,
  a:{
      age:18
  }
};

const object2 = Object.freeze(object1);
object2.a.age = 20
console.log(object2.a) // { age: 20 }
object2.property1 = 33;
// Throws an error in strict mode

console.log(object2.property1);
// expected output: 42

var vm = new Vue({
  el: '#example',
  data: {message: 'hi'}
})

请问这个 vm 有哪些属性（API）？

$data $props $el $options $parent $root $children $slots $scopedSlots $refs $isServer $attrs $listeners
$watch $set $delete
$on $once $off $emit
$mount $forceUpdate $nextTick $destroy

答案：1234

文档中建议 Vue 实例的生命周期钩子不要写成箭头函数，给出的理由是什么

箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例
经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
箭头函数不好用

答案：12

关于模板语法说法正确的是

Vue.js 使用了基于 XML 的模板语法
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

答案：234

假设 data 中的 id 为 42 html

<div v-bind:id="'list-' + id"></div>

最终该 div 的 id 为

list-id
list-42

答案：2

<form v-on:submit.prevent="onSubmit">...</form>

请问 .prevent 在 Vue 被称作什么（三个汉字）？

答案：修饰符