vue2的数据响应式面试手写题

最新推荐文章于 2024-06-19 14:45:15 发布

东方萝卜

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量181

点赞数

分类专栏： js面试题文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_44746317/article/details/126550126

版权

js面试题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前两天面试某公司，让我实现input框和data对象的响应式变化。我直接表示不会。。。。以此记录我的菜狗日常

<body>
  <input type="text" name="" id="">
  <script>
    let input = document.querySelector('input')
    const data = {
      msg: ''
    }
    input.value = data.msg

    // Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
    Object.defineProperty(data, 'msg', {
      get: function () { // 当访问data的msg属性时，会调用get这个函数，即直接返回msg属性
        console.log('get')
        return msg
      },
      set: function (newVal) { // 当修改data的msg属性时，会调用set函数，将msg修改为新的值
        console.log('set')
        msg = newVal
      }
    })

    // keyup：事件在按键被松开时触发
    input.addEventListener('keyup', e => {
      // console.log(e.target.value);
      data.msg = e.target.value // 这里触发了data的set函数，将其msg属性改为了键盘事件值
      console.log(data.msg); // 这里触发了data的get函数，返回了data的msg
    })

  </script>
</body>

我的想法大概是这样，但是有可能不对，如果朋友你有幸看到了，仅供参考哈。