解決vue修改數(shù)據(jù)頁面不重新渲染問題

更新時間：2023年03月24日 10:44:01 作者：MmM豆

這篇文章詳細介紹了vue渲染機制和如何解決數(shù)據(jù)修改頁面不刷新問題的多種方法，想了解更多的小伙伴可以借鑒閱讀

vue渲染機制和如何解決數(shù)據(jù)修改頁面不刷新問題的多種方法

本文不講原理，只講干貨易懂易學

首先第一點，vue底層是將data對象傳人，使用Object.definePropety,轉換為getter和setter，所以，vue不支持IE8.

1.簡單介紹一下Object.definePropety,

Object.defineProperty(obj, prop, descriptor)
//參數(shù)
obj
要在其上定義屬性的對象。
prop
要定義或修改的屬性的名稱。
descriptor
將被定義或修改的屬性描述符

  var obj = {}
  Object.defineProperty(obj, 'name', {
    get: function() {
      console.log('我的名字叫'+name);
      return name;
    },
    set: function(value) {
      console.log('你叫'+value)
      name = value;
    }
  });
    obj.name ='張三';//你叫張三
    obj.name//我的名字叫張三

從上述我們可以簡單發(fā)現(xiàn)。當我們對這個對象的name屬性賦值的時候，就會觸發(fā)set方法，獲取name屬性的時候就會觸發(fā)get方法；

2.因此在vue中寫在data中的屬性是是可以轉換成getter和setter，換一句話就是響應式的，其他定義在data之外的數(shù)據(jù)，是無法響應的渲染，意思就是改變數(shù)據(jù)頁面也不會刷新，所以一切要渲染到頁面上的數(shù)據(jù)，必須寫在data中，

不需要的，可以定義在this上，

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是響應式的

vm.b = 2
// `vm.b` 是非響應式的

3.簡單介紹完了，我們來列舉幾個不刷新的實例當然上述也是一種

第一種：修改對象的某一屬性

vue只會將已經(jīng)在data中聲明的屬性變?yōu)轫憫瑳]有聲明的是不響應的

<template>
  <div>
      <div v-for='item in list'>{{item}}</div>
      <button @click='click'>改變</button>
      <button @click='hadelClick'>解決方法</button>
  </div>
</template>
<script>
  export default({
    data(){
      return{
        list:{a:'a',b:'b'},
      }
    },
    methods: {
          click() {
          //  未聲明不觸發(fā)渲染
           this.list.c='c'

          },
          hadelClick(){
            // 解決方法，使用vue提供的$set方法來觸發(fā)渲染
            this.$set(this.list,'d','d')
          }
        }
  })
   
</script>

當然如果我們要添加多個屬性，可以使用 Object.assign() 用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象，并返回目標對象。(簡單說就是合并到第一個參數(shù)中)

this.list = Object.assign({},this.list,{c:'c',d:'d'})

第二種：修改數(shù)組對象的某一屬性

<template>
  <div>
      <div v-for='item in list'>{{item.a}}</div>
      <button @click='click'>改變</button>
      <button @click='hadelClick'>解決方法</button>
  </div>
</template>
<script>
  export default({
    data(){
      return{
        list:[{a:'vue'},{a:'react'},{a:'js'}],
      }
    },
    methods: {
          click() {
            //想這樣直接給數(shù)組中的某一個對象直接賦值，是無法動態(tài)渲染的（即改變了數(shù)據(jù)，頁面不渲染）
            this.list[0] = {a:'css'} //頁面不渲染
            console.log(this.list)  //[{a:'css'},{a:'react'},{a:'js'}]
          },
          hadelClick(){
            // 解決方法，使用vue提供的$set方法來觸發(fā)渲染
            this.$set(this.list[1],'a','css')
            console.log(this.list)//[{a:'css'},{a:'css'},{a:'js'}]
          }
        }
  })
   
</script>

當然前文講過，vue會遍歷data中的數(shù)據(jù)，將對象轉換成setter和getter。所以數(shù)組中的也不例外，所以上述操作

改成：
click(){
	this.list[0].a = css //依舊能夠觸發(fā)setter。實現(xiàn)數(shù)據(jù)重新渲染
    }
}

在vue中更多的是數(shù)組的操作不刷新，一種是通過索引賦值，一種是修改數(shù)組長度，如何解決呢？

vue官方也給了方法

數(shù)組的API，中能夠改變原始數(shù)組的都能觸發(fā)更新；

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

第二種是返回一個新數(shù)組的，這種數(shù)組在引用地址上已經(jīng)發(fā)生根本改變，這樣的賦值操作是能觸發(fā)更新的（這是處理不刷新的思路，就是改變引用地址，重新賦值觸發(fā)更新）

簡單說，用數(shù)組的API就是直接用原數(shù)組接收改變的數(shù)組，

  <template>
  <div>
      <div v-for='item in list'>{{item.a}}</div>
      <button @click='click'>改變原數(shù)組</button>
      <button @click='hadelClick'>不改變原數(shù)組</button>
  </div>
</template>
<script>
  export default({
    data(){
      return{
       list:[{a:'vue'},{a:'react'},{a:'js'}],
      }
    },
    methods: {
          click() {
           //改變數(shù)組刷新頁面
              this.list.push({a:'css'})
          },
          hadelClick(){
        //重新賦值刷新頁面      
            this.list =  this.list.map(item=>{
                  item.a = 'css'
                  return item
                })
        }
  })
   
</script>

最后提供解決思路（以上都搞不定的話）

對象和數(shù)組都是引用傳遞，要變成新數(shù)組，來接受，就需要改變源，

第一種

let arr = []//新數(shù)組
this.list.forEach(item=>{  //需要渲染的數(shù)組
    //執(zhí)行你的操作，最后用放到arr中
    arr.push(item)
})
this.list = arr //相當于返回一個新數(shù)組可以觸發(fā)渲染

第二種

//想要直接改變渲染數(shù)組中的數(shù)據(jù)，但沒有渲染
//解決方法：
let arr = this.list.slice(0);//深拷貝，（等價一個新的數(shù)組）
arr.forEach(item=>{
    //執(zhí)行你的操作
})
//賦值操作
this.list =  arr

上述如果都無法執(zhí)行，但你的數(shù)據(jù)缺實修改了，可以使用this.$forceUpdate()方法（強制刷新）

//this.$forceUpdate();//強制刷新


<template>
  <div>
      <div v-for='item in list'>{{item.a}}</div>
      <button @click='click'>改變</button>
      <button @click='hadelClick'>解決方法</button>
  </div>
</template>
<script>
  export default({
    data(){
      return{
        list:[{a:'vue'},{a:'react'},{a:'js'}],
      }
    },
    methods: {
          click() {
            this.list[0] = {a:'css'} //頁面不渲染
            console.log(this.list)  //[{a:'css'},{a:'react'},{a:'js'}]
          },
          hadelClick(){
            this.list[0] = {a:'css'} //頁面不渲染
            console.log(this.list)  //[{a:'css'},{a:'react'},{a:'js'}]
              this.$forceUpdate();//強制刷新
          }
        }
  })
   
</script>

到此這篇關于解決vue修改數(shù)據(jù)頁面不重新渲染問題的文章就介紹到這了,更多相關vue修改數(shù)據(jù)頁面不渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue?cli3?chainWepack使用方法示例詳解
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11
vue2.0 父組件給子組件傳遞數(shù)據(jù)的方法
在父組件 App.vue 中引用子組件 A.vue，把 name 的值傳給 A 組件。這篇文章主要介紹了vue2.0 父組件給子組件傳遞數(shù)據(jù)的方法,需要的朋友可以參考下
2018-01-01
vue?innerHTML?綁定單擊事件不生效的解決
這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue extend使用示例深入分析
這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
詳解基于vue-cli配置移動端自適應
本篇文章主要介紹了詳解基于vue-cli配置移動端自適應，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
使用vite搭建ssr活動頁架構的實現(xiàn)
本文主要介紹了使用vite搭建ssr活動頁架構，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-07-07
vue 通過綁定事件獲取當前行的id操作
這篇文章主要介紹了vue 通過綁定事件獲取當前行的id操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue el-table表頭上引入組件不能實時傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實時傳參解決方法，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路
2022-11-11
vue中插槽整理及用法分析
在本篇文章里小編給大家整理的是一篇關于vue中插槽整理及用法分析內(nèi)容，對此有興趣的朋友們可以跟著學習下。
2021-12-12
詳解Vue爬坑之vuex初識
本篇文章主要介紹了詳解Vue爬坑之vuex初識，Vue 的狀態(tài)管理工具 Vuex可以解決大型項目中子組件之間傳遞數(shù)據(jù)，有興趣的可以了解下
2017-06-06