我的Vuejs进阶之旅(三)：数据

本章节主要简要介绍Vue数据操作，常见问题及解决方法等内容。

2.1 字符串

将字符串转换为布尔值boolean方式如下：

Boolean("");  //输出为：false
Boolean(null);  //输出为：false
Boolean(0);  //输出为：false 
Boolean("hi");  //输出为：true
Boolean(100);  //输出为：true
Boolean(new  Object());  //输出为：true

注：若想实现将字符串类型的true or false转换为布尔类型的常量，只能通过===运算符实现。

2.2 数组

ES5与ES6合并数组方式如下：

 ES5中合并数组

var array_1 = ['reese','root','fusco'];

var array_2 = ['finch','shaw','bear'].concat(array_1);//["finch", "shaw", "bear", "reese", "root", "fusco"]

这样两个数组就合并了。

ES6中应用扩展符合并数组

  var array_1 = ['reese','root','fusco'];

  var array_2 =['finch','shaw','bear',...array_1];//["finch", "shaw", "bear", "reese", "root", "fusco"]

2.3 集合

2.4 数据拷贝

大家先看下数组和对象的赋值操作。

数组：

var a = [1,2,3];  
var b = a; 
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]

对象：

 var obj = {a:10}; 
 var obj2 = obj; 
 obj2.a = 20; // obj2.a改变了
 alert(obj.a); // 20，obj的a跟着改变

之所以原数组和原对象会发生同步变化，就是由于直接赋值，只是将引用指向同一个地址，从而导致修改了原数组或对象也被修改。正确的数据拷贝方式如下：

computed: {        
      data: function () {           
                var obj={};            
                obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是另一个对象   
                return obj       
      }    
}

2.5 常见问题解析

问题描述：应用el-select设计表单下拉框时，默认选中后台返回数组第一个元素。后台返回值后直接将数组第一个元素的value赋值给el-select的v-model，但是页面并未展示。

原因分析：Form表单中通过v-model绑定当前被选中的el-option的value属性值form.currentSelectedNode，且该属性定义在data中，

form: {

...

currentSelectedNode: ‘’

}

请求后台方法成功后，后台将封装好的response.returnObj赋值为表单绑定值

this.form = response.returnObj

此时，导致form表单的结构被破坏，通过console语句，可观察到控制台输出内容。

 解决措施：针对以上问题，需要对form表单中的属性进行绑定。可使用

this.form.currentSelectedNode =response.returnObj.node[0].nodeno

或者使用Vue属性的动态赋值操作：

Vue.set( target, propertyName/index, value )

大家都知道vue是双向绑定响应式更新视图的，但是，这个自动更新视图主要是针对在data里面定义的属性或者对象的键，比如有个data:{ test : 'test'};通过修改 test的值就可以自动更新相关视图。如果你后面添加一个新的属性进去然后修改是没法自动更新的，这就涉及vue的双向绑定原理。