Vue 动态数据绑定核心方法

发布时间:2019-05-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue 动态数据绑定核心方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

引言

我之前经常使用 Vue,后来不满足于仅仅使用它,我想了解其内部实现原理,所以就尝试学习其源码,获益匪浅。所以,如果你跟我一样,希望挑战这高难度的事情,那就开启这一系列吧!

基本上 MVVM 数据双向绑定的框架大都采用了大量的 Object.defineProperty 来实现。

Object.defineProperty 语法


Object.defineProperty(obj, prop, descriptor)

参数:

obj

      需要定义属性的对象。

prop

      需定义或修改的属性的名字。

descriptor

      将被定义或修改的属性的描述符。

返回值

      返回传入函数的对象,即第一个参数obj。

描述


该方法允许精确添加或修改对象的属性。一般情况下,我们为对象添加属性是通过赋值来创建并显示在属性枚举中(for...inObject.keys 方法), 但这种方式添加的属性值可以被改变,也可以被删除。而使用 Object.defineProperty() 则允许改变这些额外细节的默认设置。例如,默认情况下,使用 Object.defineProperty() 增加的属性值是不可改变的。

对象里目前存在的__属性描述符__有两种主要形式:数据描述符存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一;不能同时是两者。

数据描述符和存取描述符均具有以下可选键值:

configurable

      当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,也能够被删除。默认为 false

enumerable

      当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false

数据描述符同时具有以下可选键值:

value

      该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined

writable

      当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false

存取描述符同时具有以下可选键值:

get

      一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined

set

      一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined

脚本宝典总结

以上是脚本宝典为你收集整理的Vue 动态数据绑定核心方法全部内容,希望文章能够帮你解决Vue 动态数据绑定核心方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue