VUE中数据响应式原理

1.vue数据响应式的原理

2.数据属性的四大特性

3.访问器属性

4.getter和setter

vue数据响应式主要运用js中对象的知识，下面稍微研究一下js中的对象

JS

对象的属性：

            命名属性：

                         凡事可以用点访问的属性都是命名属性

            数据属性：

                       直接存储属性值的属性

                       四大特性：

                                     value  实际存储属性值

                                    writable： true/false    规定当前属性是否只读的

                                    enumerable：true/false  控制是否可遍历

                                   configurable： true/false    控制是否可修改或删除其他特性

                       如何读取：

                                    Object.getOwnPrpertyDescriptor(

                                                   obj,"属性名"

                                      )

                       如何设置属性特性：

                                   Object.defineProperty(

                                     obj,"属性"，{特性：值，.........} 

                                     )

     访问器属性：

                  不直接存储属性值，仅对其他属性提供保护

                 四大属性：

                                get（）负责返回一个值

                               set（）设置一个属性的值   

                              enumerable：  true/false 控制是否可遍历

                              configurable：  true/false  控制是否可修改或删除其他特性

                何时使用：只需要用自定义属性的规则保护属性时 

                如何使用：

                           1.定义数据属性，实际存储属性值

                           2.定义访问器属性，保护数据属性    真实属性保护起来(如图一)，放一个傀儡      采用闭包匿名函数自调（如图二）  把受保护的数据隐藏起来

                          Object.defineProperty{

                                       obj,"属性"，{

                                            get:function(){return},

                                            set:function(val){xxx=val},

                                           enumerable：，

                                         configurable：

                                    }

                             }

     内部属性：

                  不允许用点直接访问的属性

                        防篡改：

                                  1，防扩展    不能放进去  但能取东西

                                         Object.preventExtensions(obj)

                                2，密封     不能放也不能取  在防扩展之上

                                    Object.seal(obj)

                                3.冻结   禁止修改所有属性的值

                                     Object.freeze(obj)    

图一 真实属性保护起来，放一个傀儡 

图二 采用闭包匿名函数自调  把受保护的数据隐藏起来