來源：https://blog.csdn.net/my_atlassian_yhl/article/details/87364896
先來解決問題 : 當我們數據發生變化，視圖卻沒有變化時，三種方法
1. 使用$set
此時我們需要知道Vue.set()需要哪些參數，官方API：Vue.set()
調用方法：Vue.set( target, key, value )
target：要更改的數據源(可以是對象或者數組)
key：要更改的具體數據
value ：重新賦的值
this.$set(this.arr[key], 'title', '1')
這種方法就可以進行視圖刷新
2.使用$forceUpdate()
數據層次太多，render函數沒有自動更新，需手動強制刷新
this.$forceUpdate() 就是強制刷新視圖 很粗暴
3. 通過改變data來觸發新的渲染
<div style="display:none;"> {{is_show}}</div>
在你操作數據的方法下加以下這段就可以達到目的
this.$nextTick(() => {
this.is_show = !this.is_show
})
解析:
Vue2.+ 現在是通過Object.defineProerty來進行數據的雙向數據綁定
Object.defineProerty目前主要有三個問題
不能監聽數組的變化
必須遍歷對象的每個屬性
必須深層遍歷嵌套的對象
咱們的這種視圖不能更新的問題是出在數組上比如this.arr[key].title = '1'
這種賦值就有可能會存在這種問題
就比如在我們進行watch的時候 , 需要加上deep為true才可以解析對象是否變化
watch: {
obj: {
handle: (n) {
// 新值
},
deep: true
}
}
在即將尤大大Vue3.0的時代里，Object.defineProerty即將被Proxy淘汰
沒錯就是ES6新增的Proxy
Proxy 對象用於定義基本操作的自定義行為（如屬性查找，賦值，枚舉，函數調用等）
優勢:Proxy 的第二個參數可以有 13 種攔截方法，比 Object.defineProperty() 要更加豐富,Proxy 作為新標准受到瀏覽器廠商的重點關注和性能優化，相比之下 Object.defineProperty() 是一個已有的老方法。
劣勢:Proxy 的兼容性不如 Object.defineProperty() (caniuse 的數據表明，QQ 瀏覽器和百度瀏覽器並不支持 Proxy，這對國內移動開發來說估計無法接受，但兩者都支持 Object.defineProperty()),不能使用 polyfill 來處理兼容性