Skip to content

对vue响应式数据更新的误解 #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
xiaofuzi opened this issue Dec 13, 2016 · 5 comments
Open

对vue响应式数据更新的误解 #11

xiaofuzi opened this issue Dec 13, 2016 · 5 comments
Labels
post

Comments

@xiaofuzi
Copy link
Owner

xiaofuzi commented Dec 13, 2016 •
edited
Loading

对于刚接触vue的同学会经常遇到数据更新了但是模板没有更新的问题，下面将结合vue的响应式特性以及异步更新机制分析常见的错误：

异步更新带来的数据响应式误解

异步数据的处理基本是一定会遇到的，处理不好就会遇到数据不更新的问题，但有一种情况是在未正确处理的情况下也能正常更新，这就会造成一种误解，详情如下所示：

  • 模板
<div id="app">
        <h2>{{dataObj.text}}</h2>
</div>
  • js
new Vue({
            el: '#app',
            data: {
                dataObj: {}
            },
            ready: function () {
                var self = this;

                /**
                 * 异步请求模拟
                 */
                setTimeout(function () {
                    self.dataObj = {}; 
                    self.dataObj['text'] = 'new text';
                }, 3000);
            }
        })

上面的代码非常简单，我们都知道vue中在data里面声明的数据才具有响应式的特性，所以我们一开始在data中声明了一个dataObj空对象，然后在异步请求中执行了两行代码，如下：

self.dataObj = {}; 
self.dataObj['text'] = 'new text';

首先清空原始数据，然后添加一个text属性并赋值。到这里为止一切都如我们所想的，数据和模板都更新了。

那么问题来了，dataObj.text具有响应式的特性吗？

--

模板更新了，应该具有响应式特性，如果这么想那么你就已经走入了误区，一开始我们并没有在data中声明.text属性，所以该属性是不具有响应式的特性的。

但模板切切实实已经更新了，这又是怎么回事呢？

那是因为vue的dom更新是异步的，即当setter操作发生后，指令并不会立马更新，指令的更新操作会有一个延迟，当指令更新真正执行的时候，此时.text属性已经赋值，所以指令更新模板时得到的是新值。

具体流程如下所示：

  • self.dataObj = {};发生setter操作
  • vue监测到setter操作，通知相关指令执行更新操作
  • self.dataObj['text'] = 'new text';赋值语句
  • 指令更新开始执行

所以真正的触发更新操作是self.dataObj = {};这一句引起的，所以单看上述例子，具有响应式特性的数据只有dataObj这一层，它的子属性是不具备的。

注：其实vue文档中已经有说明，对于新增以及删除的属性，vue是无法监测到的。

var a = {};

a.b = 0;    //新增b属性
a = {
    c: 0
};              //更改a属性的值

上述两种赋值方式对vue造成的影响是不同的。

对比示例：

模板

<div id="app">
        <h2>{{dataObj&&dataObj.text}}</h2>
</div>

js

new Vue({
            el: '#app',
            data: {
                dataObj: {}
            },
            ready: function () {
                var self = this;

                /**
                 * 异步请求模拟
                 */
                setTimeout(function () {
                    self.dataObj['text'] = 'new text';
                }, 3000);
            }
        })

上述例子的模板是不会更新的。

Vue.$set

通过$set方法可以将添加一个具备响应式特性的属性，并且其子属性也具备响应式特性，但是必须是新属性才可以，如果是本身已有的属性该方法是不起作用的。

new Vue({
            el: '#app',
            data: {
                dataObj: {}
            },
            ready: function () {
                var self = this;

                /**
                 * 异步请求模拟
                 */
                setTimeout(function () {
                    var data = {
                        name: 'xiaofu',
                        age: 18
                    };
                    var data01 = {
                        name: 'yangxiaofu',
                        age: 19
                    };
                    self.dataObj['person'] = {};
                    self.$set('dataObj.info', data);
                    self.$set('dataObj.person', data01); 
                }, 3000);
            }
        })

如上所示，.person属性是不具备响应式特性的。
@xiaofuzi xiaofuzi added the post label Dec 13, 2016
@zhengcaiyunjob
Copy link

牛掰掰的孩子，膜拜

@DanielWLam
Copy link

可以可以，我也是今天才彻底明白这个坑

@lanxin1234
Copy link

真厉害，解决了我的困惑，谢谢

@yangjiayang222
Copy link

写多了，知道数据渲染是异步的。避开了一些坑

@gladysyang
Copy link

可以可以

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
post
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@xiaofuzi @DanielWLam @zhengcaiyunjob @gladysyang @lanxin1234 @yangjiayang222