Vue props problem in traditional values, to the parent component transfer target sub-assembly can be directly modified

Sons 1.vue components of the communication is the most common way of EMIT $ props and, generally speaking, the parent update prop may flow down to the subassembly, but not vice versa. This will prevent changes from the parent component sub-assemblies unexpected state, resulting in your application data flow difficult to understand.

  However, when the value of parent element is transmitted or an array of objects, only the subassembly can be directly modified, it is also not given, the object or change the array itself will affect the parent element in the state of subassembly.

    Parent Component Code:

<div style="width: 600px;height: 400px;border: 1px solid red;">
  <span style="font-size: 30px;">父组件区域：</span>
  <div>传给子组件的值【toChildrenData】：{{toChildrenData}}</div>
  <div>
    <children :toChildrenData="toChildrenData"></children>
  </div>
</div>


data () {
  // store the data here
  return {
    toChildrenData: {
      name: 'John Doe',
      age: 22
    }
  }
}

 

    Subcomponents Code:

< Template > 
  < div class = "" style = "width: 400px; height: 300px by; margin: 30px Auto; border: 1px Solid # 0000FF" > 
    < span style = "font-size: 30px;" > subassembly region: </ span > 
    < div > value pass over the parent component [toChildrenData]: {} {} toChildrenData </ div > 
    < INPUT type = "text" V-Model = "toChildrenData.name" > 
  </ div > 
</ Template >


props: {
  toChildrenData: {
    type: Object,
    default () {
      return {}
    }
  }
},

 

Case effects:

We can see, modify the value of props pass over, can be modified, which will be followed by a parent component modifications.

 

2. Next, analyze the reasons for this situation under:

(1) JavaScript data type

    Value types (basic types): String (String), digital (Number), boolean (Boolean), empty (Null), Undefined (Undefined), Symbol.

   

    Reference data types: Object (Object), the array (Array), function (Function).

    

(2) Memory space:

    To understand the process of running JavaScript in the data is how to store, you have to find out which types of storage space

    In the process of executing the JavaScript, the memory space into three types, namely, code space , stack space , and heap space , wherein the code space of the main store executable code, stack space is the call stack, it is used to store the execution context , heap is used to store reference data type.

    These concepts do not understand it does not matter, that such a thing: when js execution, will the basic types of data stored in the stack space , a reference to the type of data stored in the heap space in

var name = 'John Doe'
var age = 22
var chlidrenData = {
  name: 'John Doe',
  age: 22
}
var newchlidrenData = chlidrenData

 

    See a simple diagram:

    ​

Can be seen from the figure, the object type is stored in the heap space, stack space, but retains the reference to the object address when JavaScript needs access to the data, by referencing the address to access the stack, so, passed to the parent component sub-assemblies, really just a reference address , when the sub-assembly to modify the object, is really modify the stored value in the heap space, of course, the value of parent components will change, but the reference address We do not make changes, and there is no error.

​

3. The above brief analysis of what communication vue assembly, pass an object to parent components subassembly, the subassembly can directly modify the data, and the problem may affect parent component, which involves the heap, stack space, and other data types JavaScript browser underlying principle of the thing, interested can read the relevant knowledge points.