vue3中ref({arr: []}新建数据后, arr.map, 会修改原值,而不是新建对象?

wgf4242
  • 90

这样赋值后,res.results使用map后,会修改原数组,而没有产生新的。

在线查看

<script src="https://cdn.staticfile.org/vue/3.0.0/vue.global.prod.js"></script>

<div id="app">
    <div v-for="value in state.results">{{ value.fxrq }}</div>
</div>
<script>
  const { createApp, ref, reactive, computed, onMounted, h, toRefs } = Vue;

  const App = {
    setup() {
      const res = {
        results: [{ fxrq: 'Before change.' }],
      };
      const state = ref(res);
      res.results.map(e => {
        e.fxrq = "map改了值?";
      });
      return { state };
    },
  };

  createApp(App).mount("#app");
</script>
回复
阅读 1.4k
3 个回答
✓ 已被采纳

准确的说,res.results没有变化,变的是里面的元素。map过程也是遍历的过程呀,你这个场景入参e指向res.results中的元素,元素还是个应用类型的,修改fxrq可不就真修改了。
严格每个数组方法的用法,map就老老实实的传一个纯函数,老老实实的返回一个映射值,为了防止相互影响,老老实实deepClone

题主需要好好理解下 JS 函数的参数。按你这样的写法,e 就是对 res.results 里元素的引用,修改它的属性就会影响到原始元素。这个跟 .map() 无关,你 .map() 的用法也是错的。

<script src="https://cdn.staticfile.org/vue/3.0.0/vue.global.prod.js"></script>

<div id="app">
    <div v-for="value in state.results">{{ value.fxrq }}</div>
</div>
<script>
  const { createApp, ref, reactive, computed, onMounted, h, toRefs } = Vue;

  const App = {
    setup() {
        // results 数组中的对象是一个引用值
      const res = {
        results: [{ fxrq: 'Before change.' }],
      };
      const state = ref(res);
      res.results.map(e => {
        // 这里的e还是原来的对象
        e.fxrq = "map改了值?";
        // 这里更改了原对象
      });
      return { state };
    },
  };

  createApp(App).mount("#app");
</script>

引用值问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏