06、Object.defineProperty方法

最新推荐文章于 2022-08-17 17:25:06 发布

终是痴情负了空

最新推荐文章于 2022-08-17 17:25:06 发布

阅读量119

点赞数

分类专栏： vue基础文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51092575/article/details/126389138

版权

vue基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文详细介绍了Object.defineProperty方法在Vue数据双向绑定中的应用，通过实例解析其参数及属性描述符，包括get和set方法的使用，展示了如何创建响应式属性。同时，代码示例演示了如何为对象添加具有访问器属性的age属性，实现值的获取与设置监听。

摘要由CSDN通过智能技术生成

重点：Object.defineProperty方法是Vue数据双向绑定原理的常见面试题

Object.defineProperty方法，直接在一个对象上新增一个属性，或者修改一个已存在的属性。
1.Object.defineProperty方法的参数
Object.defineProperty 需要三个参数（object , propName , descriptor）

object：必须，要在其上添加或修改属性的对象。
propertyname：必需。一个包含属性名称的字符串。
descriptor：属性描述符。它可以针对数据属性或访问器属性
descriptor的属性：
- enumerable//控制属性是否可以被删除（遍历），默认false；
- writable,//控制属性是否可以被修改，默认false；
- configurable,//控制属性是否可以被删除，默认false；

2.属性的设置与修改
set: 目标属性设置值的方法
get：目标属性获取值的方法
注意：当使用了getter或setter方法，不允许使用writable和value这两个属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--容器-->
<div id="root">
</div>
<script type="text/javascript">
  Vue.config.productionTip = false
  //创建vue实例
  let person ={
    name:'css',
    sex:'男',
    // age:18
  }
  Object.defineProperty(person,'age', {
    // value: 18,
    // enumerable: true,//控制属性是否可以被删除（遍历），默认false
    // writable: true,//控制属性是否可以被修改，默认false
    // configurable: true,//控制属性是否可以被删除，默认false
    //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get() {
      console.log('有人读取age属性了')
      return number
    },
//当有人修改person的age属性时，set图 数(setter)就会被调用，且会收到修改的具体值
    set(value){
      console.log('有人修改了age属性，且值是value')
      number =value
    }
  })

</script>
</body>
</html>