vue實現雙向綁定的簡單原理: defineProperty

時間 2019-12-18

標籤 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。