Vue数据双向绑定原理和代码分析

最新推荐文章于 2023-02-09 11:57:32 发布

William新晨

最新推荐文章于 2023-02-09 11:57:32 发布

阅读量180

点赞数

文章标签： Vue Vue数据双向绑定

本文链接：https://blog.csdn.net/qq_42253692/article/details/91863709

版权

                                                       **Vue的数据双向绑定原理和代码分析**
    前言：还急的刚出来找工作找那会儿，是真的太不容易了，随着信息技术的蓬勃发展，Web前端这一块儿的初级工作者已经是相当的饱和了，如果想在众多的应届毕业生中脱颖而出进入Web前端开发的领域。当下最流行的前端框架是最基础的要求，而框架中的Vue就是必须要掌握的其中之一的框架。
    凡是去面试，绝对会被问到会不会Vue，问到Vue绝对会被问到Vue的数据双向绑定原理的实现和理解。在此简短明了的分析一下这个问题。
    **原理：**
    *1*：Vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
    *2：*它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。
    *3：*重点就是最后的属性描述符。属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用
    *4：*上面说的get和set就是属于存取描述符对象的属性。

数据双向绑定

<body>
	
	<input type="text" id="inp">
	<div id="demo"></div>
	<script>
		var obj = {};
		var demo = document.querySelector('#demo')
		var inp = document.querySelector('#inp')
		Object.defineProperty(obj, 'name', {
			get: function() {
				return val;
			},
			set: function(newVal) { //当该属性被赋值的时候触发
				inp.value = newVal;
				demo.innerHTML = newVal;
			}
		})
		inp.addEventListener('input', function(e) {
			// 给obj的name属性赋值，进而触发该属性的set方法
			obj.name = e.target.value;
		});
		obj.name = '输入内容'; //在给obj设置name属性的时候，触发了set这个方法
		
	</script>
</body>