Vue2.x实现双向数据绑定原理

一. Object.defineProperty()介绍及使用

二. Vue2.x实现双向数据绑定原理

它的实现的核心是通过Object.defineProperty(),对data的每个属性进行了get、set的拦截。

其实只用Object.defineProperty()已经可以实现双向数据绑定,只是这样效率非常低。

一般情况我们会借用一个观察者模式来实现,那么观察者模式在双向数据绑定中起的是什么角色呢?

它其实是让双向绑定更有效率。

观察者模式,它是一种一对多的模式,
在Vue里面,“一”是什么?
你改变了某一个data数据,这是“一”
“多”就是页面上凡是用了这个数据的地方,都更新。

下面实现一个极简版的双向数据绑定


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定原理title>
head>
<body>
<h1>极简版的双向数据绑定h1>
<input type="text" id="txt_id">
<p id="p_id">p>


<script>
    var obj = {
      }
    Object.defineProperty(obj, 'newKey', {
       //这里的newKey相当于data里的属性
        get: function () {
      
            console.log('触发get操作')
            return 'abd'
        },
        set: function (value) {
      
            console.log('触发set操作')
            document.getElementById('p_id').innerText = value
        },
        // value: 'pcm',
        // writable: true
        // 注意:get、set不能和value、writable等属性共同存在,原因如下:
        // 如果一个描述符不具有value,writable,get 和 set 任意一个关键字,那么它将被认为
        // 是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字,将
        // 会产生一个异常。 ---------取自MDN原话
    })
    console.log(obj.newKey)

    document.addEventListener('keyup', function (e) {
      
        let ev = e || event
        obj.newKey = ev.target.value

    })
script>
body>
html>

观察者模式实现:

class Subject {
     
    constructor () {
     
       this.state = 0
       this.observes = []
    }
    getState () {
     
        return this.state
    }
    setState (state) {
     
        this.state = state
        this.notifyAllObservers()
    }
    attach (observer) {
     
       this.observes.push(observer)
    }
    notifyAllObservers () {
     
        this.observes.forEach(observe => {
     
            observe.update()
        })
    }
}

class Observer {
     
    constructor (name, subject) {
     
        this.name = name
        this.subject = subject
        this.subject.attach(this)
    }
    update () {
     
        console.log(`${
       this.name} update, state: ${
       this.subject.getState()}`)
    }
}

let subject = new Subject()
let o1 = new Observer('o1', subject)
let o2 = new Observer('o2', subject)

subject.setState(2)

剖析Vue原理&实现双向绑定MVVM
参考链接:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest

你可能感兴趣的:(前端开发)