Vue的双向数据绑定的原理

最新推荐文章于 2024-08-08 08:58:25 发布

随风飘游

最新推荐文章于 2024-08-08 08:58:25 发布

阅读量116

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43796856/article/details/104959437

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的
Object.defineProperty可以传递三个参数:defineProperty的用法var obj = { };var name;//第一个参数：定义属性的对象。//第二个参数：要定义或修改的属性的名称。//第三个参数：将被定义或修改的属性描述符。
双向数据绑定 ,model2

<body>
		<input type = "text"
		id = "text1"/>
		<p id = "text2"></p>
	</body>
	<script type="text/javascript">
		var input1 = document.querySelector("#text1");
		var input2 = document.querySelector("#text2");
		var data = {};
		Object.defineProperty(data, "text12", {
			configurable: true,
			get: function() {
			    console.log('调用get')
				return data
			},
			set: function(newValue) {
				input2.innerHTML = newValue;
			}
		})
		//赋值的时候是监听的set方法
		input1.addEventListener("keyup",function(e){
			data.text12 = e.target.value;
		})
	    //当使用data的时候调用get的方法
		data.text12;
	</script>

vue是双向绑定响应式更新视图的，这个自动更新视图主要是针对在data里面存在的属性或者对象的键，比如有个data:{ test : ‘test’};这里修改 test的值就可以自动更新相关的视图，但是如果你后来添加一个进去然后修改是没法自动更新的，这就涉及vue的双向绑定原理啦，vue 默认的是给data 属性添加到侦察器（发布者——订阅者模式）上观察，如果有变化就响应视图更新，后面新增的属性和对象是没有做这个添加到观察器的这步操作的，需要手动添加，就需要用到他的set方法来。
Vue 数组：
数组无法实现view视图改变，但是数据发生了改变，如果重新赋值可以实现view更新

<ul>
   <li v-for="item in arr" :key='item'>{{item}}</li>
 </ul>
<p>{{msg}}</p>
 data:{
     arr:[1,2,3],
      msg:[]
   },
    methods:{
     changeArr(){
      //改变数据无法实现view更新，只能实现数据改变
        this.arr[2]='999'
       如果重新赋值可以实现view更新
       //  this.msg=this.arr
        console.log(this.arr)
     }
   }

数组更新视图
changeArr(){
/* 第一种直接改变数据 无法改变view*/
//  this.arr[2]='999'
//  this.msg=this.arr
/* 第二种 $set 改变数据可以改变view */
// module.$set(this.arr,1,'$set')
/* 第三种通过数组的方法实现view改变 */
  this.arr.splice(0, 1,'change')
}

对象更新视图
changeObj(){
   /* 第一种 可以实现视图更新 */
   //  this.obj.sex='女'
   /* 第二种 $set 实现视图更新 */
   module.$set(this.obj,'sex', '女')
 }

随风飘游

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录