vue 數據改變視圖沒有刷新

marek 發布于2019-08-22 15:02 / 1510人閱讀

摘要：最近在用做項目的時候，經常遇到一個問題，當數據改變之后，視圖卻沒有刷新，下面我就總結一下我在開發過程中遇到的幾種視圖無法刷新的情況，不一定全面為了方便演示，我們來創建一個最最簡單的。

最近在用Vue做項目的時候，經常遇到一個問題，當數據改變之后，視圖卻沒有刷新，下面我就總結一下我在開發過程中遇到的幾種視圖無法刷新的情況，不一定全面~！為了方便演示，我們來創建一個最最簡單的demo。

//html


//js
var app = new Vue({
     el:"#test",
     data:{
          msg:"Vue大法好！"
     }
});

一、直接用索引值改變數組的某個值，或者直接改變數組的長度

問題描述：有關于數組的改變而引發的視圖刷新應該是最常見的問題了，在Vue官方文檔中提到，由于 JavaScript 的限制，當你利用索引直接設置一個項，或者直接改變數組的長度時，Vue將不會檢測到數據的變化。

像上圖的兩種寫法，將無法刷新視圖，只有使用文檔中列出來的數組方法，才能實現數據的改變，包括push()、pop()、shift()、unshift()、splice()、reverse()、sort()。其實這些列出來的數組的方都是能改變原數組的，所以能夠被watcher監測到，從而引發視圖的重新渲染，原理相同，這邊就不一一的測試啦~列出下面一個作為參考:

那么如果只想要改變數組中某一個數據的值，可以使用的方法有兩種：
1、使用splice()方法，刪除并替換原數組中的值
2、使用Vue提供的set方法

云服務器 GPU云服務器 js 保存數據刷新不改變刷新視圖 html5無刷新改變url 查詢視圖數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93103.html

vue改變數據視圖刷新問題

摘要：視圖不更新有幾個原因根屬性不存在，而想要直接給根屬性賦值導致的視圖不更新。只有通過以下幾個方法更新數組才能檢測到數組更新。如果想直接通過下標修改數組的話，就需要使用方法來通知你更新了這個數組。視圖不更新有幾個原因： 1、根屬性不存在，而想要直接給根屬性賦值導致的視圖不更新。此時初始化屬性的時候給根屬性初始化一個空值就可以了。 2、只有通過以下幾個方法更新數組 push()pop()s...

SimpleTriangle 2019-08-23 13:47 評論0 收藏0
vue 起步

摘要：的二大核心響應式數據變化當視圖發生改變，數據自動更新。組合的視圖組件頁面映射為組件樹劃分組件可復用利于維護。正在不斷的學習中希望各位指點錯誤，一起討論，一起進步，后續更新中 Vue是一套用于構建用戶界面的漸進式框架，Vue的核心庫只關注視圖層，不僅容易上手，還便于與第三方庫既有項目整合，相互獨立而又可以任意整合。 showImg(https://segmentfault.com/img...

hyuan 2019-08-26 11:49 評論0 收藏0
學習MVVM及框架的雙向綁定筆記

摘要：的數據劫持版本內部使用了來實現數據與視圖的雙向綁定，體現在對數據的讀寫處理過程中。這樣就形成了數據的雙向綁定。 MVVM由以下三個內容組成 View：視圖模板 Model：數據模型 ViewModel：作為橋梁負責溝通View和Model，自動渲染模板在JQuery時期，如果需要刷新UI時，需要先取到對應的DOM再更新UI，這樣數據和業務的邏輯就和頁面有強耦合。在MVVM中，U...

VioletJack 2019-08-23 15:04 評論0 收藏0
利用 JavaScript 數據綁定實現一個簡單的 MVVM 庫

摘要：和刷新函數是一對多的關系，即一個可以有任意多個處理它的回調函數刷新函數，比如和兩個指令共用一個數據模型字段。添加數據訂閱實現方式為建立緩存回調函數的數組緩存回調函數當數據模型的字段發生改變時，就會觸發緩存數組中訂閱了的所有回調。 MVVM 是 Web 前端一種非常流行的開發模式，利用 MVVM 可以使我們的代碼更專注于處理業務邏輯而不是去關心 DOM 操作。目前著名的 MVVM 框架有...

hzx 2019-08-19 18:00 評論0 收藏0
Vue全局API總結

摘要：帶圖原文鏈接地址用于創建一個子類用來掛載在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。而則是在引入組件之后，則是將組件內部的內容如等方法等屬性與父組件相應內容進行合并。只在獨立構建時有效帶圖原文鏈接地址：http://www.cnblogs.com/douyae...1.extend用于創建一個子類Vue,用$mount來掛載 con...

lemon 2019-08-01 17:46 評論0 收藏0