vue响应式原理

꧁༺麒麟༻꧂

于 2020-06-17 21:17:00 发布

阅读量82

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_44388827/article/details/106818533

版权

var app = {}
// 把普通对象的定义，转化成setter/getter方式进行对象定义
Object.defineProperty(app, 'msg', {
  get: function() {
    return value
  },
  set: function(arg) {
    value = arg
    // 在setter操作里面，通知监听器，更新页面
    watch(value)
  }
})

// 当页面数据发生变化时，更新对象，触发setter操作
document.getElementById('input').addEventListener('keyup', function(e){
  // 触发setter
  app.msg = e.target.value
})

// 监听器
function watch(value) {
  document.getElementById('msg').innerHTML = value
}