vue용 Object.defineProperty에서 간단한 양방향 귀속 예시를 손으로 씁니다




  var model = document.querySelector("#model");
  var modelText = document.querySelector("#modelText");
  var defaultName = "defaultName";
  var userInfo = {}
  model.value = defaultName;
  Object.defineProperty(userInfo, "name", {
    get: function () {
      console.log("     ！");
      return defaultName;
    },
    set: function (value) {
      defaultName = value;
      model.value = value;
      console.log("      ！");
      console.log(value);
      modelText.textContent = value;
    }
  })

  userInfo.name = "new value";
  var isEnd = true;

  model.addEventListener("keyup", function () {
    if (isEnd) {
      userInfo.name = this.value;
    }
  }, false)
  //          
  model.addEventListener("compositionstart", function () {
    console.log("       ");
    isEnd = false;
  })
  model.addEventListener("compositionend", function () {
    isEnd = true;
    console.log("       ");
  })

vue용 Object.defineProperty에서 간단한 양방향 귀속 예시를 손으로 씁니다

좋은 웹페이지 즐겨찾기