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


Posted in Javascript onAugust 01, 2017

对于刚接触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属性已经赋值,所以指令更新模板时得到的是新值。

具体流程如下所示:

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

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

对比示例:

模板

<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属性是不具备响应式特性的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
JavaScript实现PC端四格密码输入框功能
Feb 19 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 Javascript
详解jquery选择器的原理
Aug 01 #jQuery
浅谈node中的exports与module.exports的关系
Aug 01 #Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 #Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 #Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 #Javascript
详解js静态资源文件请求的处理
Aug 01 #Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 #Javascript
You might like
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
十天学会php之第九天
2006/10/09 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
PHP7新特性
2021/03/09 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
django-filter和普通查询的例子
2019/08/12 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
制药工程专业应届生求职信
2013/09/24 职场文书
升学宴主持词
2014/04/02 职场文书
手术室护士个人总结
2015/02/13 职场文书
党支部审查意见
2015/06/02 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers