SOURCE

// vue2.x 的劫持方式 劫持属性

// const model={
//     message:''
// }

// Object.defineProperty(model,'message',{
//     set:function(newValue){
//         console.log('jiechi', newValue)
        //     for(let item of document.querySelectorAll("[v-model=message]")){
        //     item.value = newValue
        // }
        // for(let k of document.querySelectorAll("[v-bind=message]")){
        //     k.innerHTML = newValue
        //     console.log(k.innerHTML)
        // }
//         this.value = newValue
//         console.log('jiechi2', this.value)

//     },
//     get:function(){
//         return this.value
//     }
// })

// vue3.x 的劫持方式 这个是劫持对象
const model = new Proxy({},{
    get(target,key){
        return target[key]
    },
    set(target, key, newValue){
        for(let item of document.querySelectorAll("[v-model=message]")){
            item.value = newValue
        }
        for(let k of document.querySelectorAll("[v-bind=message]")){
            k.innerHTML = newValue
            console.log(k.innerHTML)
        }

        return Reflect.set(target, key, newValue)
    }
})

app= document.getElementById('learnApp')

const models = document.querySelectorAll("[v-model=message]")
console.log(models)
for( let item of models){
    item.onkeyup= function(){
        model[item.getAttribute('v-model')]= item.value
        console.log(model.message)
    }
}

document.getElementById('addOne').onclick= function(){
    model.message=model.message?model.message+'1':'1'
}


document.getElementById('clear').onclick= function(){
    model.message=''
}


document.getElementById('addThree').onclick= function(){
    model.message=model.message?model.message+'333':'333'
}

<div id="learnApp">
    <input type="text" v-model="message" /><br />
    <span v-bind="message">1234123</span><br/>
    <button id="addOne">加“1”</button>
    <button id="addThree">加“3”</button>
    <button id="clear">清空</button>
</div>