Vue2.x与Vue3.x的双向绑定原理

最新推荐文章于 2024-02-01 08:45:58 发布

Silent Land

最新推荐文章于 2024-02-01 08:45:58 发布

阅读量865

点赞数 3

分类专栏： # Vue2

本文链接：https://blog.csdn.net/weixin_44757417/article/details/109474024

版权

Vue2 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

双向的绑定的原理

通过Object.defineproperty()重新定义对象属性的set方法、get方法来实现的，从这个属性中取值时会触发get方法，改变这个属性时会触发set方法，所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了,而view更新data其实可以通过事件监听实现

当视图上的数据发生改变时， data 中的数据也发生改变
当 data 中的数据发生改变时，视图中的数据也发生改变

Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
- 语法：Object.defineProperty(obj, prop, descriptor)
- 参数：
  - obj
    要定义属性的对象。
  - prop
    要定义或修改的属性的名称或 Symbol 。
  - descriptor
    要定义或修改的属性描述符。
- 返回值
  被传递给函数的对象。
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。
作用
* 可以给对象的一个属性设置两个方法：
* get：从这个属性中取值时会触发get方法
* set：给这个属性赋值时会触发set方法

  let obj = {}
  // 给obj的name属性设置两个方法get&set
  Object.defineProperty(obj,'name',{
    set:function (value){//value就是给name赋值的结果
      console.log('触发了set');
      this._name=value//保存这个值  这里不能直接用name,因为会触发set
    },
    get:function(){
      console.log('触发了get');
      // 将保存的值返回回来
      return this._name
    }
  })

在这里插入图片描述

在给name属性赋值的时候触发set方法，在set方法中将值存起来
取值时触发get方法，在get方法中将值返回回来

vue2.x双向绑定原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 这里相当于V -->
  <div id="v"></div>
  <input type="text" id="ipt">
</body>
<script>
  // MVVM：
  // 当V改变，M自动改变
  // 当M改变，V自动改变
  // 这里相当于M

  let data = {}
  // 给data中的name属性设置两个方法get ，set
  Object.defineProperty(data,'name',{
    set:function(value){
      // 当M改变时，V自动改变
      document.querySelector('#v').innerHTML = value
    },
    get:function(){
      return this._name
    }
  })
  // 给input添加一个内容改变的之后会触发的事件
  document.querySelector('#ipt').oninput = function(e){
    data.name = e.target.value
  }
</script>
</html>

一旦输入框中的内容发生改变，就会触发oninput事件马上改变data中的内容，一旦data中的name发生改变就会触发set方法将最新的值赋值给v，这样就实现了数据的双向绑定

vue3.x双向绑定原理

Vue3.x是通过proxy（代理）实现的数据的双向绑定

proxy

跟Object.defineProperty一样也可以给对象的属性添加两个方法get&set
区别：
- Object.defineProperty一次性只能给对象的一个属性添加get&set方法
- Proxy:一次性给对象所有属性都设置get&set方法
用法：
- 创建一个新的proxy对象

	let p  = new Proxy(obj,{get:function(){},set:function(){}})

<script>
  let obj = {}
  let p = new Proxy(obj,{
    get:function(obj,prop){
      //obj :被代理的对象  prop:要操作的属性
      console.log('触发了get');
      return obj[prop]
    },
    set:function(obj,prop,value){
      // obj:被代理的对象
      // prop要赋值的属性
      // value要赋值的结果
      console.log('触发了set');
      // 将赋值的结果保存起来
      obj[prop] = value
    }
  })
</script>

在这里插入图片描述
vue3.x实现数据的双向绑定

Silent Land

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue2.x与Vue3.x的双向绑定原理

双向的绑定的原理通过Object.defineproperty()重新定义对象属性的set方法、get方法来实现的，从这个属性中取值时会触发get方法，改变这个属性时会触发set方法，所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了,而view更新data其实可以通过事件监听实现当视图上的数据发生改变时， data 中的数据也发生改变当 data 中的数据发生改变时，视图中的数据也发生改变Object.defineProperty()Object.de
复制链接

扫一扫