码迷,mamicode.com
首页 > 其他好文 > 详细

vue的响应式原理分析

时间:2020-03-20 17:02:51      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:ssg   class   object   body   cal   efi   cdn   http   set   

 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是如何知道通知那些人,界面发生刷新?

发布订阅者模式

 

vue的响应式原理分析

标签:ssg   class   object   body   cal   efi   cdn   http   set   

原文地址:https://www.cnblogs.com/gsq1998/p/12532517.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!