Vue2.x和Vue3.x的双向绑定原理详解

双向的绑定的原理

通过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实现数据的双向绑定

总结

到此这篇关于Vue2.x和Vue3.x的双向绑定原理的文章就介绍到这了,更多相关Vue2.x和Vue3.x双向绑定原理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案

    在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 这里以最常见的 modal为例子:

  • vue.js数据绑定的方法（单向、双向和一次性绑定）

    vue.js数据绑定的方法（单向、双向和一次性绑定）

    这两天学习了vue.js数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 前言 感觉 vue 的很多方面的内容,都参考了 angular 的东西,数据绑定方面,更是赤裸裸的"抄袭".对照来看,更有助于我们学习和理解框架本身透露出来的思想,而非框架本身. 一.单向绑定 (一)Mustache 语法,双大括号 {{}}(html 内字符串绑定) <div id="app"> <p>{{text}}</p> <

  • Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是

  • Vue父子组件双向绑定传值的实现方法

    父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的 v-model 了,例如 <input type="text" /> 它会响应表单元素的 value 属性,当输入框文本改变时,会将 value 值传给 v-model 所绑定的变量,如果同时设置 v-model 和 value , value 属性无效. 父子组件的自定义双向 v-model 当若干dom封装成组件时,在父组件中

  • Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

    1.使用Vue.js实现双向表单数据绑定,例子 <!--html代码--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>财产查勘处理</title> <link r

  • Vue 实现双向绑定的四种方法

    Vue 实现双向绑定的四种方法

    1. v-model 指令 <input v-model="text" /> 上例不过是一个语法糖,展开来是: <input :value="text" @input="e => text = e.target.value" /> 2. .sync 修饰符 <my-dialog :visible.sync="dialogVisible" /> 这也是一个语法糖,剥开来是: <my

  • 深入理解vue.js双向绑定的实现原理

    深入理解vue.js双向绑定的实现原理

    前言 大家都知道Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = { }; // 为obj定义一个名为hello的访问器属性 Object.defin

  • Vue2实现组件props双向绑定

    Vue2实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu

  • Vue.js每天必学之数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理

  • Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）

    Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc

随机推荐