🍅更新文章

source/_posts/Vue3中的响应数据.md

@@ -1,3 +1,12 @@
+---
+title: Vue3中的响应数据
+date: 2020-11-2 10:01:55
+tags: [JavaScript, Vue]
+categories: 笔记
+url: response-data-in-Vue3
+index_img: /images/Vue3中的响应数据/logo.webp
+---
+
 ## 实时渲染
 
 在学习Vue2.x的过程中，做过一个更改数据从而触发实时渲染DOM的小实例。期间很顺利，而后在同样方法测试Vue3的时候发现遇到了一些不同的行为。根据查阅了一些文档以及源码，做出了一些推测。
@@ -41,11 +50,11 @@ app.$data.message === data.message
 
 并且我们单独创建的`data`对象也被转换成了检测数据变化的Observer对象
 
-![](../images/Vue3中的响应数据/2020-10-20-14-23-58.png)
+![](../images/Vue3中的响应数据/2020-10-20-14-23-58.webp)
 
 因此，我们在修改`data`对象的内容时，app实例的属性也会被改变，从而实时渲染到DOM上。
 
-![](../images/Vue3中的响应数据/2020-10-20-14-25-25.png)
+![](../images/Vue3中的响应数据/2020-10-20-14-25-25.webp)
 
 但在Vue3上发生了一些小小的改变。在Vue3上，我们将实例的`data`函数直接return为我们在父作用域中创建的对象，这个对象不会被修改为检测属性数据变化的对象。
 
@@ -70,7 +79,7 @@ app.$data.message === data.message
 
 这里的app是我们创建的实例，但最终挂载DOM后返回的实例为vm。不同于2.x的地方是，这里我们在父作用域中创建的对象并没用任何的变化，它还是一个普通的对象。
 
-![](../images/Vue3中的响应数据/2020-10-20-14-31-01.png)
+![](../images/Vue3中的响应数据/2020-10-20-14-31-01.webp)
 
 并且，他们也互相建立了引用的关系；
 
@@ -81,7 +90,7 @@ vm.message === data.message
 
 虽然他们已经是互相引用，但是`data`还是一个普通的对象。这里就会发现一个有意思的现象，只更新`data.message`的值，`vm.message`或者说`vm.$data.message`的值会同样更新，保持和`data`对象一样。但是DOM却没用被实时渲染。
 
-![](../images/Vue3中的响应数据/2020-10-20-15-42-32.png)
+![](../images/Vue3中的响应数据/2020-10-20-15-42-32.webp)
 
 这一点2和3有着很大的差距，在vue2中，我们是可以通过`data`对象来实时更新DOM的。而在3中就不行了。
 
@@ -147,4 +156,8 @@ vm.message
 
 这里的小例子最简化的模拟了Vue3的实例行为，在真正的Vue3的实例上，我们也可以很清晰的看到其Proxy属性
 
-![](../images/Vue3中的响应数据/2020-10-20-16-28-03.png)
+![](../images/Vue3中的响应数据/2020-10-20-16-28-03.webp)
+
+## 总结
+
+总的来说就是因为data对象修改时不会触发实例的set方法，但数据依然会改变，只是DOM不会实时更新。