vue响应式原理

响应式原理基于Object.define(object, propertyname, descriptor)方法
object: 要添加和修改属性的对象,必需
propertyname:要添加和修改的属性,必需
descriptor: 属性描述符。

let data = {}
let initValue = '初始值'
Object.defineProperty(data, 'title', {
    get() {
        return initValue
    },
    set(newValue){
        DOM.innerText = newValue
        initValue  = newValue
    }
})
这样改变 data对象title属性值,DOM元素的内容也随之变化

插图

1 .png

2.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 几种双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定,我认为的双向数据绑定其实就是在单向绑定的基...
    Picidae阅读 5,649评论 2 4
  • 在上一篇文章中,我们发现改了 data 中的数据之后,界面上相应部分也会自动发生变化,那么这就是响应式的。 为什么...
    yibuyisheng阅读 521评论 0 1
  • vue框架 中最核心的就是 vue的响应式 ,通过对vue中data数据的变更实现页面效果的重新渲染。但在实际开发...
    郝小淞阅读 4,371评论 1 1
  • 在js对象传给data时,Vue将遍历这个对象中的属性,并用Object.defineProperty()将属性转...
    二货豆子阅读 185评论 0 0
  • 上一节的,响应式基本原理只适用当前组件(实例),当其他子组件也依赖这些数据,或者有多个地方用到这个数据的时候,数据...
    安石0阅读 835评论 0 0