1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 </head> 8 <body> 9 <div id="app"> 10 {{message}} 11 {{message}} 12 {{message}} 13 {{name}} 14 </div> 15 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 16 <script type="text/javascript"> 17 const app = new Vue({ 18 el: '#app', 19 data: { 20 message: '哈哈', 21 name:'gsq' 22 } 23 }) 24 </script> 25 </body> 26 </html>
创建一个Vue的实例 里面data里有2个键值对
我们通过mus语法 把它显示到页面上
当我们通过控制台 输入 app.messga 修改message的值的时候，页面上的值就会被改变了
难道这是理所当然发生的事吗？
抛出2个问题
1.app.message 修改数据，Vue内部是如何监听message数据的改变的?
object.defineProperty 监听对象属性的改变
2.当数据发生改变，Vue是如何知道通知那些人，界面发生刷新?
发布订阅者模式