双向数据绑定的魔力
vue . js 2.0版本的双向数据绑定是通过Object.defineProperty方法实现的，俗称属性拦截器。
假设vue.js通过它实现了双向绑定。俗称属性拦截器。此外，专门用于监控对象属性变化的Object.observe方法也被草案的发起者撤回(该方法仍然可以在节点环境中使用)。可以看出，defineProperty是强大的。
Object.defineProperty()不支持Ie8
方法将直接在对象上定义新属性，或者修改现有属性并返回该对象。
//语法：/* *对象。定义属性(对象、道具、描述符)* @ param:obj3360需要定义属性的对象；* prop:要定义或修改的属性；* descriptor:返回已定义或已修改属性{}的描述符*返回值：到传入函数的对象，即第一个参数obj */对象中有两种主要类型的属性描述符：数据描述符和访问描述符。
数据描述符：具有可写或未写值的属性*
可选键值：configurable:当且仅当可配置为真时，可以更改和删除属性描述符。enumerable:当其值为true时，该属性可以出现在对象的枚举属性中，默认值为false writable:当且仅当其值为true时，赋值运算符可以更改此属性，默认值为false。Value:该属性对应的值可以是任何有效的javascript值(数值、对象、函数等)。)，默认值未定义
访问描述符：由一对getter-setter函数描述的属性*
可选键值：configurable:当且仅当可配置为真时，可以更改和删除属性描述符。enumerable:当其值为true时，该属性可以出现在对象的枚举属性中，默认值为false get:为该属性提供getter方法，如果没有getter，则为未定义。当我们读取属性时，我们实际上是在对象内部调用方法，并且这个方法必须有一个return语句。此方法的返回值用作属性值。默认值为undefined set:设置属性值的方法，如果没有setter，则为undefined。方法将接受一个唯一的参数，并将该参数的新值赋给属性。默认值未定义。也就是说，当我们设置一个属性时，我们实际上调用了对象内部的方法
注意：两者不能同时定义，否则报错==
Get和set是我们今天要重点介绍的两种方法。让我们先来看看他们的简单例子：
示例：
var a={ }；Object.defineproperty (a，' b '，{ set : function(NewVaLue){ console . log('赋值操作，赋值' NewVaLue)；}，get : function(){ console . log(' value operation ')；返回2；//这里需要注意的是，我逼他退了2 } })；a . b=1；//赋值操作，赋值1a . b；//Value Operation 2虽然我将a.b的值设置为1，但是在get方法中总是返回2，所以a.b的值总是2。
所以，这很有趣：我们可以监控页面上的一个变量，当变量发生变化时，我们会更新相应的视图。您熟悉数据驱动的视图更新吗？是的，vue的核心思想。js就是这个。让我们写一个小例子：
！doctype html html head metharset=' utf-8 '/title definepreproperty/title/head body div id=' test '这是一个测试/div脚本varview=document . getelementbyid(' test ')；var数据={ }；var I=0；object . definepreproperty(data，' b '，{ set : function(new value){//当data.b的值发生变化时，更新视图视图. view.textContent=newValue of # # test}，get : function(){ } })；setInterval(函数(){ I；数据[' b ']=' data . b]的值已更新。我想更新视图‘我；}, 2000);/script /body/html视图的更改过程：
第一种观点：
2秒后查看：
专注于理解：
//3.对象。定义属性(obj，propertyname，{}) :将属性(指定描述符)添加到对象const obj={firstname3360' a '，lastname3360' b '，}//将fullName属性添加到obj //obj.fullName='A-B' /* 1。数据描述符configurable:是否可以重新定义enumerable:是否可以枚举value:writable:是否可以修改属性值2。访问描述符get:回调函数。根据其他相关属性，动态计算当前属性值set:的回调函数，监控当前属性值的变化，更新其他相关属性值*/object。定义属性(obj，'全名'，{get () {return this。名字-这个。姓氏；}，set(value){ const name=value . split('-')；this . first NAmE=name[0]；this . last name=name[1]；} })console . log(obj . full name)；//A-B obj . first name=' C '；obj.lastName=' Dconsole . log(obj . full name)；//C-D obj . full name=' E-F '；console.log(obj.firstName，obj . last name)；//E FObject对象有一个冻结方法，用于实现不可改变的对象属性和方法
//用法：const arr=[1，2，3，4]；Object .冻结(arr)；//变量arr不能更改arr . push(5)；//错误：不能添加Object.definePropperty属性，也可以使指定的变量不变。
const obj={ key: 'chris '，vlaue : ' person ' }；对象。defineproperty (obj，' key '，{可配置： false，//writable: false，//可写})；})如有不足，请指教！希望给大家带来帮助！
摘要
以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接
