vue 响应式原理

简易Vue.js实现

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

原创最新推荐文章于 2024-05-27 10:01:44 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简化版的Vue.js框架实现过程，通过自定义observe方法实现了数据劫持，监测数据变化并更新视图。示例代码展示了如何创建一个Vue实例，设置响应式数据属性，并在数据变化时自动重新渲染。

不废话，直接上源码

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>