vue2数据响应式

111 阅读1分钟

二话不说,直接贴代码 修改

const data = {
  name: '张三',
  age: 18,
  value: ''
}
// for (key in data) {
//   console.log(key);
// }
let value = ''
function onInput() {
  data.value = int.value
  // console.log('123', int.value);
}
function onClick() {
  data.value = '测试数据'
}
Object.defineProperty(data, 'value', {
  get: function() {
    console.log('value使用1');
    return value
  },
  set: function(val) {
    console.log('value使用2');
    int.value = val
    value = val

  }
})
// console.log(Object.defineProperty(data, 'name', {
//   configurable: false,
//   enumerable: false,
//   writable: false
// }));
// console.log(Object.getOwnPropertyDescriptor(data, 'name'));

利用oninput 事件去改变数据层,利用defineProperty去改变视图层