js实现v-model

vue中的v-model很好用，我们经常用它做双向绑定：

<template>
  <div id="app">
    {{username}} <br/>
    <input type="text" v-model="username">
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      username: ''
    }
  }
}
</script>

v-model其实是个语法糖，它实际上是做了两步动作：
1、绑定数据value
2、触发输入事件input
也就是说，v-model等同于：

<template>
  <div id="app">
    {{username}} <br/>
    <input type="text" :value="username" @input="username=$event.target.value">
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      username: ''
    }
  }
}
</script>

那么怎样用js实现一个v-model呢？具体实现请参考一下代码：

<input type="text" id="text">
<p id="show"></p>
<script>
    let obj = {};
    const text = document.getElementById('text');
    const show = document.getElementById('show');
    Object.defineProperty(obj, 'text', {
        get() {
            return text;
        },
        set(newval) {
            show.innerHTML = newval;
        }
     })
     text.addEventListener('keyup', function(e) {
         obj.text = e.target.value;
     })
</script>