在构造函数Vue JS之后将空对象传递到数组中的推送函数

Question

我正在学习 Vue JS，并在尝试使用构造函数和推送函数使用对象填充数组时遇到了一个特定问题。在 Vue JS 中， push 方法将一个空白对象添加到数组中，而不是构造函数创建的对象。 JS小提琴在下面。

我知道在传统的 javascript 中，下面的代码可以正常工作，任何人都可以解释为什么 Vue JS 会以不同的方式解释相同的代码。

function node (){
  this.x = Math.random();
  this.y = Math.random();
}

let nodes = [];
nodes.push(new node());
console.log(nodes); 

JS 小提琴： https://jsfiddle.net/ex080/t690v9pu/

HTML：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button @click="generate">Generate Object</button>
  <li v-for="node in nodes">
    {{node.num}}
  </li>
</div>

JavaScript：

new Vue({
  el: '#app',
  data: {
    nodes: []
  },
  methods: {
    node() {
        num = Math.random();
        console.log(num);
      },
      generate() {
        this.nodes.push(new this.node());
      }
  }
});

Answer 1

您没有在任何地方存储对num 的引用。尝试从节点方法返回一个对象：

 return {num:  Math.random()}

编辑：

使用new 创建一个对象并使用它创建一个上下文：

function node (){
  // 'this' refers to the instance of the node object
  // it keeps a reference to the properties x and y
  this.x = Math.random();
  this.y = Math.random();
}

然而声明方法node()是一个函数而不是构造一个对象。

node() {
    // 'num' is declared and is accessible only within the scope of the function
    // it is a candidate for garbage collection as soon as the function completes.
    num = Math.random();
    console.log(num);
},

为了演示，我向您展示了返回对象的方式与使用第一个示例中的new node() 相同。