vue 响应式原理

最新推荐文章于 2024-05-27 10:01:44 发布

小桃酥

最新推荐文章于 2024-05-27 10:01:44 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/smaller_coder/article/details/103495813

版权

不废话，直接上源码

function vue() {
  this.$data = { aaa: 1 };
  this.el = document.getElementById('app');
  this.virtualdom = '';
  this.observe(this.$data);
  this.render()
}
vue.prototype.observe = function (obj) {
  var self = this;
  var value;

  for (var key in obj) {
    value = obj[key];
    if (typeof value == 'object') {
      this.observe(value)
    } else {
      Object.defineProperty(this.$data, key, {
        get: function () {
          // 收集依赖
          return value
        },
        set: function (newValue) {
          // 调用notify(), 进行diff运算，调用render()，
          value = newValue;
          self.render()
        }
      })
    }
  }
}
vue.prototype.render = function () {
  this.virtualdom = 'i am ' + this.$data.aaa;
  this.el.innerHTML = this.virtualdom;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

		<title></title>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript" src='js/vue.js'></script>
		<script type="text/javascript">
			
			var vm = new vue()
			setTimeout(function(){
				vm.$data.aaa="小桃酥"
			},2000)


		</script>


	</body>

</html>