Vue双向绑定Object.defineproperty()

作者: 索隆萨克 | 来源:发表于2018-12-17 14:34 被阅读11次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 数据绑定实现模式</title>
</head>
<body>
    <h3 id="title"></h3>
    <button id="btn">click</button>
    <script>
        var title = document.getElementById('title')
        var btn = document.getElementById('btn')
        var data = {
            title:'news'
        }
        title.innerHTML = data.title
        // 数据劫持
        observer(data)
        function observer(obj){
            Object.keys(obj).forEach((item)=>{
                definedReactive(obj,item,obj[item])
            })
        }
        function definedReactive(obj,key,value){
            Object.defineProperty(obj,key,{
                get(){
                    return value
                },
                set(newValue){
                    value = newValue
                    title.innerHTML = value
                }
            });
        }
        btn.onclick = ()=>{
            data.title = 'hello world'
        }
    </script>
</body>
</html>