双向数据绑定

v-model

<script setup>
    import {ref} from 'vue'
    const msg = ref('hellow')
</script>

<template>
  <h1>{{msg}}</h1>
  <input type="text" v-model="msg" >
</template>

v-model 就是 v-input v-bind 的语法糖

<script setup>
    import {ref} from 'vue'
    const msg = ref('hellow')
    const setMsg = e => msg.value = e.target.value
</script>

<template>
  <h1>{{msg}}</h1>
  <input type="text" v-bind:value="msg" v-on:input="setMsg" >
</template>

原理

<div id="app">
    <input type="text" id="input" >
    <h3 id="tittle"></h3>
</div>

VUE2

let obj = {}
// 数据监听 : m --> v
Object.defineProperty(obj, 'txt', {
    set: function (newValue) {
        document.getElementById('input').value = newValue
        document.getElementById('tittle').innerHTML = newValue
    }
})
// dom事件 : v --> m
document.addEventListener('keyup', function (e) {
    obj.txt = e.target.value
})

VUE3

let obj = { txt: "" };
// 数据监听 : m --> v
let o = new Proxy(obj, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    document.getElementById("input").value = value;
    document.getElementById("tittle").innerHTML = value;
    return Reflect.set(target, key, value, receiver);
  }
});
// dom事件 : v --> m
document.addEventListener("keyup", function (e) {
  o.txt = e.target.value;
});

MVVM

• M: 数据
• V: 视图
• VM: let vm = new VUE({...})

数据通过发布订阅改变界面
界面通过dom事件改变数据