动态给vue的data添加一个新的属性时会发生什么？怎样解决？

面试官：动态给vue的data添加一个新的属性时会发生什么？怎样解决？

一、直接添加属性的问题

我们从一个例子开始

定义一个p标签，通过v-for指令进行遍历

然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行

<p v-for="(value,key) in item" :key="key">
    {
  { value }}
</p>
<button @click="addProperty">动态添加新属性</button>

实例化一个vue实例，定义data属性和methods方法

const app = new Vue({
   
    el:"#app",
   	data:()=>{
   
       	item:{
   
            oldProperty:"旧属性"
        }
    },