v-model的实现原理

• 浅层理解：将触发input事件来修改value值
• 深层理解：利用Object.defineProperty()数据劫持来实现

<div>
    <button id="myBtn">改变username</button>
    <input type="text" id="myInput">
    <h1 id="myTitle"></h1>
</div>

当我们修改userInfo的值的时候，进行拦截，然后更新dom

window.onload=function(){
    let userinfo = {
        username:'小明',
    };
    //开始监控
    watcher();
    function watcher(){
        Object.defineProperty(userinfo, "username", {
        set(value) {
            updateDom(value);
        },
        get(val) {
          return val;
        },
      });
    }
    //更新dom数据
    function updateDom(value){
        document.querySelector('#myInput').value = value;
        document.querySelector('#myTitle').innerHTML = value;
    }
    //给input绑定input事件，实时修改username的值
    document.querySelector('#myInput').oninput=function(e){
        let value = e.target.value;
        userinfo.username = value;
    }
    //给button绑定点击事件，修改username的值
    document.querySelector('#myBtn').onclick=function(){
        let value = '小明';
        userinfo.username = value;
    }
}

作者：糖小羊儿
链接：https://www.jianshu.com/p/8bc85354c87c

 

 

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>


明白了这一点非常有用，我们可以在自定义的input组件中使用它：

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

<script>
import myinput from './components/myinput'
export default {
  name: 'App',
  components:{'my-input': myinput},
  data(){
    return {
      username:''
    }
  }

}
</script>

myinput.vue：

<template>
    <div class="my-input">
        <input type="text" class="my-input__inner" @input="handleInput"/>
    </div>
</template>

<script>
    export default {
        name: "myinput",
        props:{
            value:{ //获取父组件的数据value
                type:String,
                default:''
            }
        },
        methods:{
            handleInput(e){
                this.$emit('input',e.target.value) //触发父组件的input事件
            }
        }
    }
</script>

<style lang="scss" scoped>
    .my-input {
        width: 180px;
        position: relative;
        font-size: 14px;
        display: inline-block;
    .my-input__inner {
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;

    &:focus {
         outline: none;
         border-color: #409eff;
     }
    }
    }
</style>

作者：姜治宇
链接：https://www.jianshu.com/p/2012c26b6933