vue 中使用freeze出现的问题

< 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() 来防止已有属性被修改，这也意味着响应式系统无法 追踪变化。

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