模拟Vue双向数据绑定原理

数据变页面变

1.数据变页面一定变吗？什么情况下不会变？怎么解决问题

参考{

对象 动态添加一个属性 添加的属性没有getter和setter

数组 动态修改数组的length相关 数据的修改也不会引起页面的变化

（原因：没有getter和setter）

在生命周期的创建阶段 vue会用object.defineProperty 将data里的数据处理 处理完了就有getter和setter

}

js模拟双数据绑定
/*
    input框里的数据发生改变之后页面自动变
    原理：
    1.处理数据有getter和setter
    2.数据改变    触发set
    3.set通知watcher监听
    4.watch监听更新页面
*/

//输入框绑定键盘释放事件
<input type='text' onkeyup='inputchange(this)'/>
//模拟页面
<span></span>

//首先数据
let data={
    inputValue:''
}
//中间值
let middle=''
//用Object.defineProperty处理data,中的inputValue数据  有两个方法，一个是get，用来renturn中间值，一个是set，用来修改值
Object.defineProperty(data,'inputValue',{
    get(){
        return middle
    },
    set(param){
        middle = param
        watcher()
    }
})

//添加输入框的方法
function inputchange(e){
//当input内的值发生改变的时候将值赋给inputValue    会触发set方法
    data.inputValue=e.value   
}
//通知watcher监听方法
//目的 通知页面
function watcher(){
    //获取更新后的值 根据修改后的值控制页面刷新
    let value=data.inputValue
    document.getElementsByTagName('span')[0].innerHTML=value
}