Vue爬坑日记,数组数据的更新检测

最近在项目中,遇到一个问题,VueJS在递归组件时候,更改数组数据中的值,列表不进行重新渲染,查文档只解决了一部分,网上也没有相关的解决方法,在此做一个总结。

首先贴两段demo代码
第一段app.vue

<template>
  <div class="tree-menu">
    <ul v-for="item in theModel">
      <my-tree :model="item">my-tree>
    ul>
    <div @click="change">
      change the model
    div>
  div>
template>

<script>
import myTree from './components/treeMenu.vue'
import axios from 'axios'
export default {
  name: 'app',
  components: {
    myTree
  },
  data() {
    return {
      theModel:[]
    }
  },
  methods:{
    change(){
      this.theModel[0].menuName = '12312312'
      console.log(this.theModel)
    },
    init() {
      var Json = []
      for(var i = 0; i<10 ;i++){
        var children1 = []
        for(var j = 0;j<10;j++){
          var row1 = []
          row1.menuName = '哈哈'
          children1.push(row1)
        }
        var row2 = [];
        row2.menuName = '呵呵'
        row2.children = children1
        Json.push(row2)
      }
      this.theModel = Json
      console.log(this.theModel)
    }
  },
  mounted() {
    this.init();
  }
}
script>

第二段 treeMenu.vue

<template>
  <li>
    <span @click="toggle">
      <i v-if="isFolder" class="icon" :class="[open ? 'folder-open': 'folder']">i>
      <i v-if="!isFolder" class="icon file-text">i>
      {{ model.menuName }}
    span>
    <ul v-show="open" v-if="isFolder">
      <tree-menu v-for="item in model.children" :key="item.id" :model="item">tree-menu>
    ul>
  li>
template>

<script>
export default {
  name: 'treeMenu',
  props: ['model'],
  data() {
    return {
      open: false
    }
  },
  computed: {
    isFolder() {
      return this.model.children && this.model.children.length
    }
  },
  methods: {
    toggle: function() {
      if (this.isFolder) {
        this.open = !this.open
      }
    }
  }
}

代码省略掉了css部分,初始化数据也是随便写的。代码很简单,app.vue调用treeMenu组件,然后treeMenu组件进行递归,从而形成一个动态树级菜单,效果如下。
Vue爬坑日记,数组数据的更新检测_第1张图片
我的项目里需要我触发一个事件的时候对theModel里的某个属性值做修改,这里我写了一个change方法,用@click绑定在了change the model上,希望点击的时候把第一行的‘呵呵’给改掉。可是在我点击后,console.log中,theModel打印出来的值中第一行的‘呵呵’已经改变,可在列表中并没有重新渲染,既然vue实现的时数据双向绑定,那么在model层发生了变化之后为什么就没有在view层更新呢?
经过几天的探索,终于找到了原因所在:
项目里的数据是从API拿的,但是格式和我需要的不一样,于是我用以下方法重新拼接除了我需要的格式

var json = [];

var row1 = {};

row1.id= "1";

row1.name = "jyy";

或者var row2 = {id:'2',name:'abc'}

json.push(row1);

json.push(row2);

结果好死不死,我粗心的把row1定义为数组了,即row1 = [];
于是我的Json对象被定义为了‘关联数组
这有什么区别?
数组和对象的一个区别是,数组中的数据没有“名称”(name),对象中的数据有“名称”(name)。但很多编程语言中,都有一种叫做“关联数组”(associativearray)的东西。这种数组中的数据是有名称的。比如在javascript中,可以这样定义一个对象:
var a={“城市”:”北京”,”面积”:16800,有趣,”人口”:1600};
但是,也可以定义成一个关联数组:
var a = new Array();
a[“城市”]=”北京”;
a[“面积”]=16800;
a[“人口”]=1600;
这样一来好像数组和集合就没有区别了,在Javascript语言中,关联数组就是对象,对象就是关联数组,唯一的区别在于,第二种方式创建的关联数组是有length属性的。
但是在Vue中,这种关联数组与对象集合的区别就有些明显了。
Vue爬坑日记,数组数据的更新检测_第2张图片
Vue在我们的data对象上都会定义一个ob属性指向新创建的Observer对象,以此对数据设置的监控器,一般都是不可枚举的。但由于JavaScript限制(底层原理不明),Vue无法对关联数组进行Observer对象创建,因此不能检测到数组对象的变化。
观察控制台打印的数据,也可发现关联数组和对象在Vue中的区别:
Vue爬坑日记,数组数据的更新检测_第3张图片
上半部分为对象,下半部分为关联数组

那么回到正题,我在项目中遇到的问题该怎么解决?

第一种方案:将自己拼接的Json改为对象集合的格式。

但是,当你命不好不小心碰到了这种关联数组结构的数据,又不好拼接的时候怎么办,这里提供第二种方案:
使用 Vue.set(array, indexOfArray,value)
三个值分别是,要修改的数组,数组的下表,和新的值
当然也可以用 `this.$set(array, indexOfArray,value)

你以为这就完了?由于我的代码是递归组件,当我把Data绑定到theModel后,用 v-for=‘item in theModel’遍历,再把item通过v-bind绑定到子组件,但是由于item我没有在组件中使用过,即使Vue检测到theModel数组的变化,也不能检测到item中数组的变化,所以这里强制你需要在代码中加入使用item,类似{{item}}
或者用

{{item}}

这是我误打误撞发现的,当然,这很蠢。
所以你知道用vue.set的方法修改数组可以让vue检测到就行,不要使用第二种方法。

你可能感兴趣的:(Vue爬坑日记,数组数据的更新检测)