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

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

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

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

//html


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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/93103.html

相關(guān)文章

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

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

SimpleTriangle 2019-08-23 13:47 評(píng)論0 收藏0
vue 起步

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

hyuan 2019-08-26 11:49 評(píng)論0 收藏0
學(xué)習(xí)MVVM及框架的雙向綁定筆記

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

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

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

hzx 2019-08-19 18:00 評(píng)論0 收藏0
Vue全局API總結(jié)

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

lemon 2019-08-01 17:46 評(píng)論0 收藏0