vue 的视图渲染问题, 非响应式的数据为什么在同一模板中其他视图渲染时也被重新渲染?

Question

代码示例如下:

https://codepen.io/Liaoyk_cod...

// 日期框1:
<el-date-picker
      v-model="test['a']"   // 这里绑定的是test['a']
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期">
</el-date-picker>
// 文本1:
<el-input v-model="value2"></el-input>

var Main = {
  methods:{
    bt(){
      this.$set(this.test, 'a' , '2010-10-23')
    }
  },
  created(){
    this.test.a = '2010-10-21'
  },
    data() {
      return {
        value2: '',
        test:{}  //test['a']未声名所以是一个非响应式的属性
      };
    }
  };

描述:
在初始化的时候我赋初值 2010-10-21, 日期框也被渲染成了相应日期, 这里没问题;
之后无论是我通过$set方法, 或者手动选择赋其他值, 日期框的视图都不会更新, 也没问题.因为非响应式的数据vue监听不到, 也不会去重新渲染视图;

复现操作:
通过(上面的按钮或者手动选择)改变了日期1的值之后,手动在文本1中输入任意的值,文本1内容正常展示且日期1也被重新渲染了, 这是什么原因呢?

Answer 1

你给的demo里面不能复现你的问题。