Object.defineProperty理解

html

<div id="app">
    <span>firstName:</span>
    <input type="text" id="firstName" value="" /><br />
    <span>lastName:</span>
    <input type="text" id="lastName" value="" /><br />
    <!-- <span>fullName(vue计算) :</span>
    <input type="text" id="fullName" /><br />
    <span>fullName1(vue监视) :</span>
    <input type="text" id="fullName1" /><br /> -->
    <span>fullName2(原生js):</span>
    <input type="text" id="fullName2" value="" />
  </div>

js

<script type="text/javascript">
  let obj = {
    firstName: 'babao',
    lastName: 'wang',
    fullName2: 'baobao-wang'
  }
  // 使用Object.definproperty来设置fullname2的属性
  Object.defineProperty(obj, 'fullName2', {
    // 1.数据描述符(属性)
    // value: 'yong-he',
    configurable: true, //是否可以删除
    enumerable: true, //是否可遍历
    // writable: false, //是否可修改

    // 2.存取描述符(访问)
    get: function () {
      return this.firstName + "-" + this.lastName
    },
    set: function (value) {
      const [lastName, firstName] = value.split('-')
      this.firstName = firstName
      this.lastName = lastName
    }
  })


  obj.fullName2 = "yong-he"
  console.log(obj);

  // 获取dom
  const firstN = document.getElementById('firstName')
  const lastN = document.getElementById('lastName')
  const fullN = document.getElementById('fullName2')
  // 添值
  firstN.value = obj.firstName
  lastN.value = obj.lastName
  fullN.value = obj.fullName2
</script>