vue 中使用freeze出现的问题

最新推荐文章于 2024-10-30 21:05:20 发布

原创最新推荐文章于 2024-10-30 21:05:20 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

23 篇文章

订阅专栏

19 篇文章

订阅专栏

3 篇文章

订阅专栏

本文探讨了Vue中使用Object.freeze冻结对象以阻止属性修改的方法，并分析了这如何影响响应式系统的追踪机制。通过实例展示了冻结对象后点击按钮试图修改属性时的行为差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>

<!-- import { Vue } from 'vue/types/vue'; -->

<div>

  <div class="one">

    <h1>

      {{number}}

    </h1>

  </div>

  <span>

    {{obj1.foo}}

    (被freeze)

  </span>

<p>

    {{obj2.boo}}

    （正常）

  </p>

<p>

    {{obj3}}

    （正常）

  </p>

  <!-- 两个都不能修改？？为什么？第二个理论上应该是可以修改的-->

  <button @click="obj1.foo='yyy';obj2.boo='bbb'">点我修改12</button>

  <!-- bbb可修改，yyy不可改 -->

  <button @click="obj2.boo='bbb';obj1.foo='yyy'">点我修改21</button>

  <!-- 两个都可以修改 -->

  <button @click="obj2.boo='ccc';obj3='444'">点我修改23</button>

</div>

</template>

<script>

var obj1 = {

  foo: 'xxx'

}

// 使用 Object.freeze() 来防止已有属性被修改，这也意味着响应式系统无法追踪变化。

Object.freeze(obj1)

var obj2 = {

  boo: 'aaa'

}

export default {

  name: 'lianxi',

  data () {

    return {

      number: '123',

      obj1: obj1,

      obj2: obj2,

      obj3: 333

}

}

}

</script>

<style scoped>

h1 {

  font-weight: normal;

  color: #42b983;

}

</style>

看vue的手册里面讲，使用 Object.freeze() 来防止已有属性被修改，这也意味着响应式系统无法追踪变化。

然后使用的时候，出现了如上情况。不知道什么原因，如有知悉，请告知。