zoukankan      html  css  js  c++  java
  • 参考书籍《Vue.js快跑:构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-8响应式是如何实现的(个人理解)

    <!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>如何实现响应式</title>
    </head>
    <body>
        <div id="name">内容</div>
        <button onclick="btClick()">修改内容</button>
        <script>
            var obj ={};
            Object.defineProperty(obj, 'vue', {
                get(){
                    return document.querySelector('#name').innerHTML;
                },
                set(newVal){
                    document.querySelector('#name').innerHTML=newVal;
                }
            });
    
            function btClick(){
                obj.vue = "修改后的内容";
            }
    
        </script>
    </body>
    </html>

    通过Object.defineProperty设置get和set方法,点击按钮修改obj.vue值时调用set方法通过set方法通知vue页面发生改变,需要重新渲染

  • 相关阅读:
    mongdb
    网络编程
    分布式锁与事务
    mongodb
    Angular4
    思考
    kafka
    Spark总结
    你不知道的javaScript笔记(1)
    vue2.0 配置 选项 属性 方法 事件 ——速查
  • 原文地址:https://www.cnblogs.com/cuilichao/p/14893564.html
Copyright © 2011-2022 走看看