資料變頁面變

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
}