面试真题:宝剑锋从磨砺出

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>