vue.js如何不更改对象的属性

var obj = {
  foo: 'bar'
};

// 冻结对象
Object.freeze(obj);

// 尝试修改属性
obj.foo = 'baz'; // 不会生效，属性仍然为'bar'

// 尝试添加属性
obj.baz = 'qux'; // 不会生效，新属性不会被添加

// 尝试删除属性
delete obj.foo; // 不会生效，属性仍然存在

console.log(obj); // 输出: { foo: 'bar' }

<template>
  <div>
    <p>{{ user.name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: Object.freeze({
        name: 'John'
      })
    };
  },
  methods: {
    changeName() {
      // 尝试修改属性
      this.user.name = 'Jane'; // 不会生效，属性仍然为'John'
    }
  }
};
</script>