美文网首页Vue技术
彻底理解vue双向数据绑定

彻底理解vue双向数据绑定

作者: 程序小小黑 | 来源:发表于2021-04-06 14:16 被阅读0次

原理

1.vue双向数据绑定是通过 数据劫持 结合 发布订阅模式 实现的,数据和视图同步,即数据发生变化,视图跟着变化,视图变化,数据也随之发生改变

2.核心:Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 -- 来自MDN

语法:Object.defineProperty(obj, prop, descriptor)

参数:
obj:要定义属性的对象。
prop:要定义或修改的属性的名称或 Symbol
descriptor:要定义或修改的属性描述符。

简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法;

let obj = {}
Object.defineProperty(obj,'test',{
  get:function(){
        console.log('调用get方法')
   },
 set:function(newVal){
        console.log('调用set方法,新值为:'+newVal)
   }
})
obj.test; // '调用get方法'
obj.test='我们都是打工人' // 调用set方法,新值为:我们都是打工人

简单实现双向数据绑定

双向数据绑定

相关文章

  • 02Vue.js的数据绑定

    理解Vue的双向数据绑定 Vue有一个显著的地方就是它拥有双向数据绑定功能,那么何为双向数据绑定呢?双向是指:HT...

  • 彻底理解vue双向数据绑定

    原理 1.vue双向数据绑定是通过 数据劫持 结合 发布订阅模式 实现的,数据和视图同步,即数据发生变化,视图跟着...

  • Vue 中的双向数据绑定

    双向绑定 单向数据流 双向绑定 or 单向数据流 Vue 是单向数据流,不是双向绑定 Vue 的双向绑定是语法糖 ...

  • vue 面试汇总(更新中...)

    1.说说对双向绑定的理解 1.1、双向绑定的原理是什么 我们都知道Vue是数据双向绑定的框架,双向绑定由三个重要部...

  • Vue入门(二)——数据绑定

    一、什么是双向数据绑定 双向数据绑定是Vue的核心功能之一。所谓双向数据绑定是指:HTML标签上的数据绑定到Vue...

  • vue 双向数据绑定

    Vue实现数据双向绑定的原理:Object.defineProperty()vue实现数据双向绑定主要是:采用数据...

  • 深入Vue响应式原理

    1.Vue的双向数据绑定 参考 vue的双向绑定原理及实现Vue双向绑定的实现原理Object.definepro...

  • Vue实现数据双向绑定的原理

    Vue实现数据双向绑定的原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数...

  • 02Vue.js快速入门-Vue入门之数据绑定

    2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue...

  • 如何用js手动实现一个数据双向绑定

    双向数据绑定: 我们这里拿vue举例,vue中的双向数据绑定主要是利用Object.defineProperty(...

网友评论

    本文标题:彻底理解vue双向数据绑定

    本文链接:https://www.haomeiwen.com/subject/wflqkltx.html