由浅入深学习Object.defineProperty(实现数据绑定)

最新推荐文章于 2023-04-05 23:05:16 发布

代码源?

最新推荐文章于 2023-04-05 23:05:16 发布

阅读量464

点赞数 1

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_45300422/article/details/127708169

版权

由浅入深学习Object.defineProperty(实现数据绑定)

objectdefinePropetry这个方法在vue2中用来双向数据绑定实现

首先这个方法接受三个参数

属性所在的对象
属性名
描述属性对象

  value：包含这个属性的数据值。默认值为undefined。
  configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
 enumerable：表示能否通过for in循环访问属性，默认值为false
 writable：表示能否修改属性的值。默认值为false。

实践Object.defineProperty

  1.value
     let obj={
            name:'张三',
            sex:'男',
       }
      Object.defineProperty(obj,'age',{
            value:19
       })
       console.log(obj)

问题在浏览器控制台中打印的age的颜色相对于他两个属性较浅？(抛出问题)
解决上面这个疑问

 当我们用for in变量obj是不打印age 说明用value赋值的属性默认不能被遍历
    for (const key in obj) {
            console.log(`${key}--${obj[key]}`)
        }

我们想让他遍历需要设置enumerable属性

 let obj={
        name:'张三',
        sex:'男',
    }
    Object.defineProperty(obj,'age',{
        value:19,
        enumerable:true//表示能否通过for in循环访问属性，默认值为false
    })
    console.log(obj)
    for (const key in obj) {
        console.log(`${key}--${obj[key]}`)
    }

第二问题通过使用 delete obj.name 删除不掉用definefineProperty创建的属性

  let obj={
        name:'张三',
        sex:'男',
    }
    Object.defineProperty(obj,'age',{
        value:19,
        enumerable:true
    })
    for (const key in obj) {
        console.log(`${key}--${obj[key]}`)
    }
    console.log(obj)//
    delete obj.name;
    console.log(obj)
    delete obj.age
    console.log(obj)

解决delete删除不掉的问题

et obj={
            name:'张三',
            sex:'男',
        }
        Object.defineProperty(obj,'age',{
            value:19,
            enumerable:true,
            configurable:true
        })
        console.log(obj)
        for (const key in obj) {
            console.log(`${key}--${obj[key]}`)
        }
        console.log(obj)
        delete obj.name;
        console.log(obj)
        delete obj.age
        console.log(obj)

第三个问题修改问题

let obj={
        name:'张三',
        sex:'男',
    }
    Object.defineProperty(obj,'age',{
        value:19,
        enumerable:true,//表示能否通过for in循环访问属性，默认值为false
        configurable:true,//configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
        writable:false//表示能否修改属性的值。默认值为false。
    })
    console.log(obj)
    for (const key in obj) {
        console.log(`${key}--${obj[key]}`)
    }
    console.log(obj)
    obj.name='李四'
    console.log(obj)
    obj.age=20
    console.log(obj)

writable属性为false是不能进行修改

当writable为true是可以进行修改

vue2双向数据绑定原理解析（实现简单的双向数据绑定）

<style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        body{
            width: 100vw;
            height: 100vh;
            background-color:#2ecc71 ;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        div{
            width: 200px;
            height: 100px;
            border: 2px solid #ddd;
            margin-bottom: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px;
        }
        #input input{
            width: 100%;
            height: 50%;
            padding-left: 10px;
            font-size: 1.5rem;
        }
        input:focus{
            border: 1px solid #2ecc71;
        }
    </style>
    
	<body>
        <div id="input">
            <input type="text">
        </div>
        <div id="content"></div>
     </body>

<script>
    let input =document.querySelector('input')
    let content = document.querySelector('#content')
    console.log(input,content)
    let text;
    window.data={}
    input.oninput=function(e){
        text = e.target.value;
        window.data.value=text;
    }
    Object.defineProperty(window.data,'value',{
        set(v){
            content.innerHTML=v
        }
    })
</script>

<script>
    let input =document.querySelector('input')//拿到input框
    let content = document.querySelector('#content')//拿到显示文本的地方
    console.log(input,content)
    window.data={}//定义全局相应对象
    input.oninput=function(e){
        window.data.value=e.target.value;//获取输入的值
    }
    Object.defineProperty(window.data,'value',{
        set(v){
            content.innerHTML=v//渲染的dom页面中
        }
    })
</script>