关于javascript:VUEVUE为什么检测不到深层次结构的数据变化

50次阅读

共计 2527 个字符，预计需要花费 7 分钟才能阅读完成。

很有可能的起因就是：视图所应用的这部分数据，未挂载在 vue 视图文件 data 的间接属性上，或者挂载的 data 间接属性也是一个对象，在第一次生成这个对象的时候，并没有这部分视图数据。。脱钩了。

======= 前面的文字帮忙了解，有所顿悟的略过 =======

近几日，因为我的项目的须要。写了一个对于数据流的画板。
大抵渲染后果如下：

前端框架应用的 VUE。
大抵实现的思路是:
结构三个类：舞台类 Stage、数据流类 Flow、节点类 Node

因为这里不是讲画板实现。重点是介绍下代码大体的构造，好让大家对问题产生的起因有一个大抵的了解。所以只贴了一些结构性伪代码。！！无奈运行哦。。。

记录匆忙，待闲下来，再写一个能够运行的 demo。

不太伪的伪代码大抵如下：

class Stage {constructor(){this.elements =[] // 待渲染到舞台上的元素单元
        ...
    }
    
    initElements({type,data}){if(type === 'flow'){this.createFlow(data)
        }
    }
    
    createFlow(data){let flow = new Flow(data,this)
    }
    ...
}

class Flow{constructor({id,nodes},stage){
        this.id = id
        this.nodes =[]
        this.stage = stage
        this.component = 'Flow' // 以动静组件模式渲染
        this.initNodes(nodes)
        this.stage.elements.push(this) // 将此实例注入 stage 的 elements
        ...
    }
    
    initNodes(nodelist){
        this.nodes = nodelist.map( n => {return new Node(n)
        })
    }
}

class Node{constructor({id,message}){
        this.id = id
        this.message = 'show Info'
        ...
    }
    setMessage(ms){this.message = ms}
    ...
}

以后页面 vue 文件（同样是不太伪的伪代码）：

<template>
  <div class='sketchpad-with-vue'>
    <div class='sketchpad-viewport' id='viewport' >
      <div id="sketchpad-stage" class="sketchpad-stage">
        <component 
          v-for="(e,index) in elements"
          :is="e.component"  
          :instance='e'
          :key='e.key'
        ></component>
      </div>    
    </div>
  </div>
</template>
<script>
export default {data() {
    return {
      stage:null,
      nodes:[...]
    };
  },
  methods: {renderNodes(){if(this.stage){
        let elements = [{type:'Logicflow',data:{nodes:this.nodes,id:this.id}}
        ]
        this.stage.initElements(elements)
      }
    },
  }
}
</script>

Node.vue

<template>
  <div class='node' :style="nodeStyle">
    <div class='header'  :style="headerStyle">
      图片解决
      <div @click="handleClick">...</div>
    </div>
    <div class='content' :style="contentStyle">
        {{node.message}}
    </div>
  </div>
</template>
<script>

export default {components: {},
  props:{
    node:{
      type:Object,
      required:true,
      default:() => {}
    }
  },
  data() {return {};
  },
  wath:{node(oldV,newV){console.log(oldV,newV)
    }
  },
  computed: {},
  watch: {}, 
  methods: {handleClick(command){this.node.setMessage('edit')
    }
  },
  created() {}
}
</script>

代码解释：

通过在以后画板页面的视图文件 (.vue 文件) 内，申明一个 Stage 实例:this.stage = new Stage()；并且初始化其要渲染的元素 -> 流：this.stage.initElements(elements)，并将此实例存入 stage 的 elements 属性中，用以页面渲染。
Flow 实例则依据传入的数据初始化其所蕴含的节点(一系列 Node 实例)：this.initNodes(nodes)，这些节点实例会存入 flow 实例的 nodes 属性中。留神：这些全部都是 js 代码外部实现。
画板视图渲染的单元是 Flow，Flow 视图外部再渲染 Node 视图。
Node 类，具备 node 节点所应有的一系列操作，已批改其属性。例如，点击一下“…”，将其属性 message 批改为 ’edit’

理论运行中，后盾数据显示 message 的确曾经扭转，但无论怎么操作都不会引发视图从新渲染。

最初起因就是：
只有 this.stage 是在画板视图文件中申明的。申明时，this.stage.elements 为空数组。VUE 是能够检测到 elements 的变动的。然而，它检测不到 elements 外部元素 (Flow 实例) 的属性变动。这对 VUE 来说，无疑就是新建的对象属性。

解决方案：
Stage 类新增一个属性：watchInstance = []
将所有须要和视图绑定的实例，均注入到 watchInstance 数组中。这样就建设起了视图所需实例与 VUE 的监测桥梁。

并且，在 node 的间接渲染组件上，定义:key
批改之后，通过刷新该 key，来刷新视图。