Vue.js笔试题解决业务中常见问题2

....接上文

29.什么情况下会产生片段实例

模板包含多个顶级元素；模板只包含普通文本；模板只包含其他组件，模板只包含一个元素指令，如vue-router的<router-view>；模板根节点有一个流程 控制指令，如v-if或v-for

这些情况让实例有未知数量的顶级元素，模板将把它的DOM内容当作片段。片段实例仍然会正确地渲染内容。不过，模板没有一个根节点，它的$el指向一个锚节点，即一个空的文本节点。

在vue2.0中，组件的模板只允许有权只有一个根节点。

30.  实现多个根据不同条件显示不同文字的方法

<div id="app">
 <input type="text" v-model="inputValue">
 <h1>{{showValue}}</h1>
</div>
var app = new Vue({
 el: '#app',
 data: {
  inputValue: ''
 },
 computed: {
  showValue: function() {
   return this.inputValue || '请输入内容'
  }
 }
})

31.什么是数据的丢失

如果在初始化时没有定义数据，之后更新的数据是无法触发页面渲染更新的，这部分数据是丢失的数据，这种现象叫数据的丢失。

32.如何检测数据的变化

• 通过直接索引设置元素： app.arr[0]=
• 修改数据的长度： app.arr.length

为了解决该问题，Vue.js扩展了观察数组，为它添加了一个$set()方法，用该方法修改的数组，能触发视图更新，检测数据变化。

app.$set(app.arr, 5, 500);

由于javascript特性的限制，vue.js不能检测到对象属性的添加或删除，因为Vue.js在初始化时将数组转化为getter/setter，所以属性必须在data对象中定义，才能在初始化时让vue.js转换它并让它响应。

var data = {
 obj: {
  a: 1
 }
}
var app = new Vue({
 el: '#app',
 data: data
})
app.ojb.a = 10
app.obj.b = 20 // 不是响应的
data.obj.b = 20 // 不是响应的

如果需要在实例创建之后添加属性并且让它能够响应，使用$set实例方法：

app.$set(app.obj, 'b', 200)

对于普通数据对象，可以全局方法Vue.set(object,key,value)

Vue.set(data.obj, 'b', 250)

33.vue.js文件中的样式覆盖不生效的问题

在style上加上scoped可以让样式私有化，只针对当前vue.js文件中的代码有效，不会对别的文件中的代码造成影响，有时，引入第三方UI，在vue.js文件中进行样式覆盖不生效，大概是因为style上的scoped导致的。

可以将需要覆盖样式的这部分代码放到单独的css文件中，在main.js文件导入即可。

34.如何解决数据层级结构太深

在开发中，常出现异步获取数据的情况，有时数据层次太深，如：

<text v-text="a.b.c.d"></text>

可以使用vm.$set手动定义一层数据：vm.$set("dada", a.b.c.d)

35.vue.js页面的闪烁

在vue.js有一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和css使用时，这个指令可以隐藏未编译的标签，直到实例编译结束：<div>不会显示，直到编译结束。

[v-cloak] {
 display: none;
}
<div v-cloak>{{dada}}</div>