详解vue的数据劫持以及操作数组的坑


Posted in Javascript onApril 18, 2019

TL;DR

给data添加新属性的时候vm.$set(vm.info,'newKey','newValue')
data上面属性值是数组的时候,需要用数组的方法操作数组,而不能通过index或者length属性去操作数组,因为监听不到属性操作的动作。

安装和初使用vue

vue是构建用户界面的渐进式框架。所谓的渐进式:vue + components + vue-router + vuex + vue-cli可以根据需要选择相应的功能。
来串命令mkdir vue-apply;cd vue-apply;npm init -y;npm i vue。
来一个html文件如下,浏览器瞄下~,浏览器控制台vm.msg=0再看下

<div id="app">{{msg}}</div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
  let vm = new Vue({
    el:'#app',
    // template加上之后会替换掉#app这个标签
    // template:'<h1>en</h1>',
    data:{msg:'msg'}
  })
  vm.msg = 'msg'
  </script>

说说mvvm mvc

mvc其实是model view Model传统所有逻辑在controller,难以维护。用户输入 => 控制器 => 数据改变,如果数据变了需要获取dom,操作属性,再渲染到视图上。

mvvm其实是model view viewModel数据变化驱动视图。数据变了,不需要你获取dom,然后改变dom的内容。这边数据变了,vm负责监听,视图那边自动发生变化。最明显的是不需要document.querySelector之类的了。

vm的实质

上面说了vm负责让数据变了,视图能自动发生变化。这么神奇魔术背后的原理是Object.defineProperty。其实就是属性的读取和设置操作都进行了监听,当有这样的操作的时候,进行某种动作。来一个demo玩下。

// 对obj上面的属性进行读取和设置监听
let obj = {
    name:'huahua',
    age:18
  }
  function observer(obj){
    if(typeof obj === 'object'){
      for (const key in obj) {
        defineReactive(obj,key,obj[key])
      }
    }
  }
  // get的return的值才是最终你读取到的值。所以设的值是为读取准备的。
  // set传的参数是设置的值,注意这里不要有obj.name = newVal 这样又触发set监听,会死循环的。
  function defineReactive(obj,key,value){
    Object.defineProperty(obj,key,{
      get:function(){
        console.log('你在读取')
        // happy的话这边可以value++,这样你发现读取的值始终比设置的大一个,因为return就是读取到的值
        return value
      },
      set:function(newVal){
        console.log('数据更新了')
        value = newVal
      }

    })
  }
  observer(obj)
  obj.age = 2
  console.log(obj.age)

在浏览器执行的时候,控制台随手也可以obj.name="hua1"类似的操作,发现都监听到了。但是如果更深一步,obj.name={firstname:'hua',lastname:'piaoliang'};obj.name.lastname='o'就不能监听到属性修改了。因为并没有将新的赋值对象监听其属性。所以函数需要改进。

需要在defineReactive的第一行加上observer(value)。设置值的时候如果是对象的话,也需要将这个对象数据劫持。同理,set那边也需要加这行。

function defineReactive(obj,key,value){
    // 注意这里!!!!!!!
    observer(value)
    Object.defineProperty(obj,key,{
      get:function(){
        return value
      },
      set:function(newVal){
        // 注意这里!!!!!!!
        observer(newVal)
        console.log('数据更新了')
        value = newVal
      }

    })
  }

继续,如果obj.name=[1,2,3];obj.name.push(4)发现又没有通知了,这是因为Object.defineProperty不支持监听数组变化。所以需要重写数组上面的方法。话说,最近看了个文章,理论上也可以监听数组,但是性能消耗和收益不成正比,所以,vue就没去实现了。

// 把数组上大部分方法重写了,这里不一一列举。但是如果你 [1,2].length--,这是捕捉不到的
  let arr = ['push','slice','split']
  arr.forEach(method=>{
    let oldPush = Array.property[method]
    Array.property[method] = function(value){
      console.log('数据更新')
      oldPush.call(this,value)
    }
  })

vue使用的时候注意的坑

正如上面的解释,vue2.0的底层约莫是这个逻辑,所以使用需要注意的点:

因为是一开始就数据劫持了。所以后来如果新绑定属性,是没有数据劫持的。如果需要调用 vm.$set(vm.info,'newKey','newValue'),vm是vue的实例。

当属性值是数组,数组变化的时候,跟踪不到变化。因为数组虽然是对象,但是Object.defineProperty不支持数组,所以vue改写了数组的所有方法,当调用数组方法的时候,就调动变动事件。但是不能通过属性或者索引控制数组,比如length,index。

总结:data上,绑定所有属性避免后期加新属性。如果是数组,只能通过数组方法修改数组。如下例子,控制台vm.arr--发现视图并不会变化,vm.arr.push(4)就能变化

<div id="app">{{msg}}{{arr}}</div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
  let vm = new Vue({
    el:'#app',
    // template加上之后会替换掉#app这个标签
    // template:'<h1>en</h1>',
    data:{msg:'msg',arr:[1,2,3]}
  })
  vm.msg = 'msg'
  </script>

以上所述是小编给大家介绍的vue的数据劫持以及操作数组的坑详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中的注释使用与注意事项小结
Sep 20 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 #Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 #Javascript
vue.js高德地图实现热点图代码实例
Apr 18 #Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 #Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 #Javascript
详解Vue中的scoped及穿透方法
Apr 18 #Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 #Javascript
You might like
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
python实现神经网络感知器算法
2017/12/20 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
英国床垫在线:Mattress Online
2016/12/07 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
半年思想汇报
2013/12/30 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
副厂长岗位职责
2014/02/02 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
公积金贷款承诺书
2015/04/30 职场文书
校园安全主题班会
2015/08/12 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers