VUE双向绑定的原理（简单版）+虚拟DOM 节点的创建和更新

最新推荐文章于 2024-04-19 17:30:39 发布

shiningchen322

最新推荐文章于 2024-04-19 17:30:39 发布

阅读量687

点赞数

分类专栏：前端 Vue.js 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/shiningchen322/article/details/125180762

版权

手动敲敲代码，就很容易理解了，供参考

1、以下是VUE双向绑定的原理（简单版）

主要是监听和defineProperty实现简单的双向绑定

<html>
    <head>

    </head>
    <body>
        
        <div>
            <input id="inputId"></input>
            <span id="showId"></span>
        </div>
        <script>
            var obj = {
                name: '',
            };

            document.getElementById('inputId').addEventListener('keyup', function(event){
                console.log('-----event-', event.target.value);
                obj.name = event.target.value;
            });

            Object.defineProperty(obj, 'name', {
                get() {
                    console.log('-------get---');
                },
                set(newVal) {
                    console.log('---------set---', n