vue 关于 实例后对已有对象添加新属性的问题

Question

1

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos.list">
      <label>
        <span>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

new Vue({
  el: "#app",
  data: {
    todos:{}
  },
  mounted(){
    this.todos.list= [
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Play around in JSFiddle" },
      { text: "Build something awesome"}
    ]
}
})

结果如图：todos的list未渲染出来

我的分析：this.todos.list 是对todos添加新的属性，这个list属性未在data里定义，不是响应式的。所以视图不会重新渲染。

但是请看案例2，如下：

2

<div id="app">
  <h2>Todos:{{todos.name}}</h2>   //插入name
  <ol>
    <li v-for="todo in todos.list">
      <label>
        <span>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

new Vue({
  el: "#app",
  data: {
    todos:{
      name:'work'  //在data中 todos有个name属性，但是没有list属性
    }
  },
  mounted(){
    this.todos.name='study'; // name 属性变更
    this.todos.list= [     // 添加新属性 list  
      { text: "Learn JavaScript" },
      { text: "Learn Vue" },
      { text: "Play around in JSFiddle" },
      { text: "Build something awesome"}
    ]
}
})

结果如下图

我的疑问：为什么list未在data中的todos中定义，却可以渲染出来了

Answer 1

mounted是挂载数据完成之后的钩子
beforeMount是肯定没有问题 会渲染的

其次第二个是因为你触发了data数据的更新 赋值了 list数据也监听到了 所以渲染