vue的响应式系统 和响应式原理

web = M + V （组成）
MVC(发生在后端)
MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用

  Model（模型）表示应用程序核心（比如数据库记录列表）。
  View（视图）显示数据（数据库记录）。
  Controller（控制器）处理输入（写入数据库记录）

MVVM（框架）
   M - Model 模型（数据）
   V - View 视图（DOM）
   
   VM - 视图模型（虚拟DOM）就是vue实例中声明式变量
   DOM操作最耗费性能的一种

组件声明

 <div id='app'>
        <h1 v-text='msg'></h1>
        <h1 v-text='foo'></h1>

    </div>

js代码

 <script>
        // data中声明式的变量，双向绑定（响应式）
        // vue构建的这样一个系统，就叫做响应式系统
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '1',
                foo: '2'
            }
        })
    </script>

虚拟DOM，实际上就是一个json对象，放在内在

  <div id='container'>
        <h1 v-text='msg'></h1>
    </div>

    <!-- 旧的VM
    var vm1 = {
        tagName: 'div',
        attr: {
            props: {
                id: 'container',
                class: ''
            }
        },
        children: {
            tagName: 'h1',
            children: '1'
        }
    }

    复制一份新的VM = vm2

    var vm1 = {
        tagName: 'div',
        attr: {
            props: {
                id: 'container',
                class: ''
            }
        },
        children: {
            tagName: 'h1',
            children: '2'
        }
    }

    脏节点：
    var dirty = Diff(vm1, vm2)
    通知vue去更新DOM -->

响应式原理

<div id='app'>
    <input id='ai' type="text">
    <h1 id='a'></h1>
    <h2 id='c'></h2>
    <hr>
    <input id='bi' type="text">
    <h1 id='b'></h1>
</div>

<script>

// 第一种定义对象
var a = 1
var obj = {}
obj.a = a
obj.b = '2'

// 第二种定义对象 
var vm = {}
var msg = '1111'
var foo = '2222'
// 劫持
Object.defineProperty(vm, 'msg', {
    get: function() {
        console.log('msg get')
        return msg
    },
    set: function(newVal) {
        console.log('msg set')
        msg = newVal
        // 通知watcher,去更新DOM
        watcher('msg', msg)
    }
})
Object.defineProperty(vm, 'foo', {
    get: function() {
        console.log('foo get')
        return foo
    },
    set: function(newVal) {
        console.log('foo set')
        foo = newVal
        // 通知watcher,去更新DOM
        watcher('foo', foo)
    }
})

// console.log(vm.msg, vm.foo)
// 初始化
document.getElementById('a').innerText = vm.msg
document.getElementById('b').innerText = vm.foo
document.getElementById('c').innerText = vm.msg
document.getElementById('ai').value = vm.msg
document.getElementById('bi').value = vm.foo

// 页面事件绑定
document.getElementById('ai').addEventListener('input', function(e) {
    vm.msg = e.target.value
})
document.getElementById('bi').addEventListener('change', function(e) {
    vm.foo = e.target.value
})

// 监听器：更新DOM
function watcher(key, value) {
    switch(key) {
        case 'msg':
        document.getElementById('a').innerText = value
        document.getElementById('c').innerText = value
        break
        case 'foo':
        document.getElementById('b').innerText = foo
        break
        default:
    }
    
}
</script>