vue 组件第一次不渲染问题_VUE的某些常见问题及解决方法

VUE的某些常见问题及解决方法

双向绑定数据，界面未渲染？

最近做vue项目的过程中，经常碰到会有双向绑定数据，data中定义的数据进行变动时，页面实际展示层未改变。常见的应用场景有下面几种：

form表单里面，修改表单的时候，分明预置了数据，但是没有显示

element-ui常用的select组件，下拉选择了一个元素，但是选中框中并没有显示

自己写选中切换的组件，点击后触发active的样式，触发的字段为checked，但是checked分明自己已经改变了值，样式就是没有改变

上诉几种情况，实际原因都是vue的双向绑定机制，对于对象的定义，对应的字段必须预先定义，否则无法触发vue的监听机制。由于我之前使用angular框架，自然养成了习惯就是对表单数据保存，会直接用formData:{} 但是这在vue中是行不通的。

如果表单中有例如名称、电话号码两个字段，必须声明formData:{name:'',tel:''} 这才是vue中的data正常的声明定义方式。所以上诉问题点1、2都是该问题造成的。

上诉情况三，我们一般进行代码书写方式会如下：

// 获取预定义数据

let arr = [{id:1,name:'选项一'},{id:2,name:'选项二'}];

// 默认选中第一个

arr[0].checked = true;

// 选中项的函数

clickItem(data){

// 取消其他所有项的选中状态，选中当前项

arr.forEach(item=>{

item.checked = false;

if(data.id === item.id){

item.checked = true;

}

})

}

上述方式就会造成，进行点击选中项切换时，由于arr里面的不是每一项都有checked字段，造成数据变动时，界面渲染未改变的情况。处理方法也很简单&#