zoukankan      html  css  js  c++  java
  • vue响应数据的原理

    vue最大的特点就是数据驱动视图。

    vue的数据改变,页面一定发生改变?不一定。

    当操作引用类型的数据,动态添加属性时,页面不会发生改变。

    vue响应式数据原理(也叫数据绑定原理、双向数据绑定原理):

      底层是Object.defineProperty(),目前用的vue2.6版本和将来更新的vue3.0(proxy)都是通过给data中的数据加一个数据劫持(setter和getter方法)。但是不管哪种版本,ie浏览器都有兼容性问题,vue2.6不兼容ie8及以下,vue3.0不兼容ie11。

      Object.defineProperty()处理data里的数据,数据就添加上get和set方法,数据获取的时候触发get,数据修改的时候触发set。在修改数据的时候,优先触发set,触发watcher监听,再通知界面。

      vue中如果动态添加属性,该属性就没有经历过处理,就没有set和get方法,所以数据变页面不变。

      vue提供一个实例方法:vm.$set(目标对象,'动态添加的属性名','属性值')可以添加一个响应式属性,会触发视图的更新。

  • 相关阅读:
    js将时间戳转化为时间,(不省略0)
    SpringMVC路径传参
    贪心算法及实例
    剪绳子(贪心算法)
    c语言输入一行未知个数数字存入数组
    Netlink机制详解
    new和malloc的区别
    堆 和 栈的 区别
    strlen与sizeof区别(转载)
    任务
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11370824.html
Copyright © 2011-2022 走看看