我应该在vue.js中转储数据属性中的所有变量吗

第一种方法

<script>
  export default {
    data(){
      return {
        data1: "some data",
        data2: "some more data"
      }
    },
    methods: {
      dataActions(){
        this.data1 = "new data";
      }
    }
  }
</script>

导出默认值{
数据（）{
返回{
数据1：“一些数据”，
数据2：“更多数据”
}
},
方法：{
数据操作（）{
this.data1=“新数据”；
}
}
}

第二种方法

<script>
  let data1 = "some data";
  let data2 = "some more data";

  export default {
    methods: {
      dataActions(){
        data1 = "new data";
      }
    }
  }
</script>

让data1=“一些数据”；
让data2=“更多的数据”；
导出默认值{
方法：{
数据操作（）{
data1=“新数据”；
}
}
}

假设数据未在

中使用，我应该选择哪一种

它会影响我的代码吗

我知道data属性中的数据正在改变值。但是如果我不想改变值，我应该使用第二种方法吗

---

我可以将第二种方法中的数据1作为道具传递给组件吗？

数据不用于突变值，而是用于反应值

如果要在变量更改时重新呈现页面，请将其放入
data

否则，将其保持在外部-可变或其他

例如，如果您的模板使用这些变量中的任何一个，那么
data
就是它们的正确位置

props
可以将数据传递到组件中。但如果页面被重新呈现，组件将被重新初始化。
数据
不是用于变异值，而是用于反应值

如果要在变量更改时重新呈现页面，请将其放入
data

否则，将其保持在外部-可变或其他

例如，如果您的模板使用这些变量中的任何一个，那么
data
就是它们的正确位置

props
可以将数据传递到组件中。但是如果页面被重新呈现，组件将被重新初始化。
是的，这就是我所想的……如果我不使用页面上的变量，我可以将它们放在数据之外……因为
数据
将其转换为一个代理，我认为它占用了不必要的空间。变异我的意思是反应性的，sry my bad。是的，我就是这么想的……如果我不使用页面上的变量，我可以将它们放在数据之外……因为
data
将它变成了一个代理，我认为它占用了不必要的空间。变异我的意思是反应性的，sry我的坏。