vue2中Object.definePeroperty()_vue2 definepro-优快云博客

本文链接：https://blog.youkuaiyun.com/baidu_38730364/article/details/129736749

文章详细讲解了Vue2中实现数据双向绑定的核心技术，涉及Object.defineProperty方法的使用，包括其参数配置如configurable,enumerable,writable和value等数据属性，以及get和set方法。通过示例代码展示了如何模拟数据双向绑定，监听input事件改变data值，并同步更新DOM内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里有具体详细的讲解，自己再总结下重点

vue2中在了解双向绑定原理中会用到。

Object.defineProperty()中有三个参数，分别是

属性所在的对象

属性名

描述符对象：可以是数据属性（默认为false），也可以是get,set属性访问方法

数据属性：

configurable:能否删除属性，默认值为false

enumerable:能否通过for in循环访问属性，默认值为false

writable:能否修改属性的值，默认值为false

value:属性的数值，默认为undefined

属性访问方法：

Object.defineProperty(属性所在的对象,属性名,{
    get:function(){},
    set:function(){}
})

PS:定义多个属性：Object.defineProperties(对象，{属性1:{}, 属性2:{}, 属性3:{}, ...})

模拟数据双向绑定原理的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>测试</title>
  <style type="text/css">
    
</head>

<body>
  <div></div>
  <input type="text" id="myInput" style="width: 400px;height: 50px;font-size: 40px;">
  <div id="contain" style="width: 400px;height: 200px;font-size: 40px;border: 1px solid salmon;"></div>


</body>
<script>
  //2.0响应式
  var text;
  window.data = {}

  document.getElementById("myInput").addEventListener('input', function (e) {
    text = e.target.value
    window.data.value = text
  })
  Object.defineProperty(window.data, 'value', {
    set: function (val) {
      document.getElementById('contain').innerHTML = val
    },
    get: function () {
      return ""
    }
  })

</script>

</html>