• 热门专题

vue源代码里的数据应该如何进行访问介绍

作者:whl  发布日期:2018-12-13 08:34:00
  • 相信很多程序员朋友对于vue应该都并不陌生了,毕竟平日里都经常使用他来进行一些操作,但是有些朋友对vue的一些相关知识可能了解的只是一小部分,今天小编就以vue数据的代理访问作为示例来给大家具体的讲解一下,希望对大家有所帮助。

    概念解析:

    1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)

    2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作

    3) 好处: 更方便的操作 data 中的数据

    4) 基本实现流程

    a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符

    b. 所有添加的属性都包含 getter/setter

    c. getter/setter 内部去操作 data 中对应的属性数据

    疑问

    不知道你在使用Vue的时候有没有想过,为什么定义在 data 对象中的属性,可以用 Vue 的实例 this 进行访问?

    我们来看看源码的实现。

    源码的实现

    比如有个如下demo

    如下dem

    也就是说当我们这样 this.message 写的时候, Vue 通过 Object.defineProperty 给 this.message 设置一层代理,实际访问的是 this._data 里的 message 属性,而 this._data 指向的对象就是我们写的 data 对象。

    好了,今天给大家介绍的vue源代码里的数据之间的代理访问过程就给大家介绍到这里了,是不是很简单清晰呢?如果大家对于这方面还想了解更多内容的话也可以自行搜索一番,小编这里就不一一进行讲解了。

     

延伸阅读:

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规