在项目时用到了一些插件,比如这次用了下拉菜单插件。
这个插件需要实例化,而下拉框的数据是通过ajax来获取的,然后在用 v-for 渲染数据,再次遇到了一个问题。
就是等插件实例化完毕,数据却还没渲染完毕,所以这就出现一个bug。出现bug解决掉。
第一种解决方法: settimeout
setTimeout(function() {
//实例初始化
},100)
但是这种方法有一个缺点,就是不确定 数据 什么时候渲染完毕。
第一种情况: 假设10毫秒渲染完毕,但是setTimeout需要等100毫秒,浪费了90毫秒。
第二种情况:假设数据需要 200 毫秒执行完毕,但是 100毫秒就执行了 实例初始化,BUG又出现了。
总而言之这种方法不是我们想要的,看第二种方法。
第二种解决方法: watch + vm.nextTick
这两种方法是 vue 的属性和方法。
watch: 监听某一个data数据发生变化就执行方法。
例:
vm = new Vue({
el:'.app',
data: {
a: '1',
},
watch: {
a: function() {
console.log('a的数据发生变化'+this.a);
}
}
})
vm.a = '2';
data 里面的a属性发生了变化变成成了2,就触发了watch的a方法。console.log(a的数据发生变化2);