vue 數(shù)據(jù)改變視圖沒有刷新

marek 發(fā)布于2019-08-22 15:02 / 1516人閱讀

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

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

//html


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

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

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

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

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

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

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

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

vue改變數(shù)據(jù)視圖刷新問題

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

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

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

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

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

VioletJack 2019-08-23 15:04 評論0 收藏0
利用 JavaScript 數(shù)據(jù)綁定實現(xiàn)一個簡單的 MVVM 庫

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

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

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

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