vue实现双向绑定的简单原理: defineProperty 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue双向绑定的原理测试</title>
</head>

<body>
    手写一个简单双向绑定<br />
    <input type="text" id="model"><br />
    <div id="modelText"></div>
    <script>
        /*
         * @Author: 曾经的水哥  https://www.cnblogs.com/cengjingdeshuige/
         * @Date: 2018-09-25 15:14:59 
         * @Last Modified by: mikey.zhaopeng
         * @Last Modified time: 2018-09-25 15:15:50
         */

        var user = {};
        var defaultName = '2222222222ssas'
        var model = document.querySelector("#model")
        var modelText = document.querySelector("#modelText");
        model.value = defaultName
        modelText.textContent = defaultName

        // 定义属性 监控改变
        Object.defineProperty(user, 'name', {
            get: function () {
                console.log('获取值')
                return defaultName
            },
            set: function (newValue) {
                console.log('设置新的值')
                defaultName = newValue
                model.value = newValue
                modelText.textContent = newValue
            }
        })

        model.addEventListener('keyup', function () {
            user.name = this.value
            console.log('取值')
        }, false)

        // 获取值
        console.log(user.name)
    </script>
</body>


</html>

 

posted @ 2018-09-25 15:20  曾经的水哥  阅读(384)  评论(1)    收藏  举报