谈谈对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 相关文章推荐
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
layui导出所有数据的例子
Sep 10 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
详解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
建立文件交换功能的脚本(一)
2006/10/09 PHP
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
Python 正则表达式操作指南
2009/05/04 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
自我评价的正确写法
2013/09/19 职场文书
高中生的学习总结自我鉴定
2013/10/26 职场文书
个人简历自我评价范文
2014/02/04 职场文书
招商专员岗位职责
2014/02/08 职场文书
教学质量评估实施方案
2014/03/17 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书