VUE：VUE为什么检测不到“深层次”结构的数据变化

很有可能的原因就是：视图所使用的这部分数据，未挂载在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文件（同样是不太伪的伪代码）：

Node.vue

代码解释：

1. 通过在当前画板页面的视图文件(.vue文件)内，声明一个Stage实例:this.stage = new Stage()；并且初始化其要渲染的元素->流：this.stage.initElements(elements)，并将此实例存入stage的elements属性中，用以页面渲染。
2. Flow实例则根据传入的数据初始化其所包含的节点(一系列Node实例)：this.initNodes(nodes)，这些节点实例会存入flow实例的nodes属性中。注意：这些全部都是js代码内部完成。
3. 画板视图渲染的单元是Flow，Flow视图内部再渲染Node视图。
4. Node类，具备node节点所应有的一系列操作，已修改其属性。例如，点击一下“...”，将其属性 message修改为'edit'

实际运行中，后台数据显示message确实已经改变，但无论怎么操作都不会引发视图重新渲染。

最后原因就是：
只有this.stage是在画板视图文件中声明的。声明时，this.stage.elements为空数组。VUE是可以检测到elements的变化的。但是，它检测不到elements内部元素(Flow实例)的属性变化。这对VUE来说，无疑就是新建的对象属性。

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

完毕。
还请大神们指正！