vue2響應(yīng)式的缺點影響

更新時間：2022年05月26日 09:34:40 作者：pain_past_is_pleasur?

這篇文章主要介紹了vue2響應(yīng)式的缺點影響，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

前言：

響應(yīng)式：數(shù)據(jù)改變-->視圖跟著變

對象新增的屬性沒有響應(yīng)式數(shù)組的部分操作沒有響應(yīng)式

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

以上7中API會修改原數(shù)組(vue2的內(nèi)部重寫了這7個API)

其他的操作都不會有響應(yīng)式

實際簡單操作一波：

<template>
  <div>
<span v-for="(item,index) in arr " :key="index">{{item}}</span>
<hr>
<button @click="arr[0]=100">點擊把第一個元素變成100</button>
  </div>
</template>
<script>
export default {
data() {
    return {
        arr:[1,2,3]
    }
},
}
</script>
<style>
span{
    margin: 10px;
    background-color: orange;
    padding: 10px;
    border-radius: 5px;
} button{
    background-color: orange;
    font-size: 20px;
    border: 0;
    cursor:pointer;

}
</style>

你們會發(fā)現(xiàn)vue里面的數(shù)據(jù)其實已經(jīng)改成100了,但是頁面并沒有渲染出來.

現(xiàn)在我們換一種,換成splice來操作：

<template>
  <div>
<span v-for="(item,index) in arr " :key="index">{{item}}</span>
<hr>
<button @click="arr.splice(0,1,100)">點擊把第一個元素變成100</button>
  </div>
</template>
<script>
export default {
data() {
    return {
        arr:[1,2,3]
    }
},
}
</script>
<style>
span{
    margin: 10px;
    background-color: orange;
    padding: 10px;
    border-radius: 5px;
} button{
    background-color: orange;
    font-size: 20px;
    border: 0;
    cursor:pointer;

}
</style>

數(shù)據(jù)修改的同時,dom也成功渲染

到此這篇關(guān)于vue2響應(yīng)式的缺點影響的文章就介紹到這了,更多相關(guān)vue2響應(yīng)式缺點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中的計算屬性和axios基本使用回顧
這篇文章主要介紹了Vue中的計算屬性和axios基本使用回顧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue中vee validate表單校驗的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗的基本使用,需要的朋友可以參考下
2018-06-06
vue實現(xiàn)消息列表向上無縫滾動效果
本文主要實現(xiàn)vue項目中,消息列表逐條向上無縫滾動,每條消息展示10秒后再滾動,為了保證用戶能看清消息主題,未使用第三方插件,本文實現(xiàn)方法比較簡約,需要的朋友可以參考下
2024-06-06
Vue組件庫Element-常見組件表格示例代碼
對于Element組件的使用,最主要的就是明確自己想要達(dá)到的效果,從官網(wǎng)中將對應(yīng)代碼復(fù)制粘貼即可,最重要的是要讀懂不同組件官網(wǎng)中提供的文檔,以便實現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫Element-常見組件表格,感興趣的朋友一起看看吧
2023-10-10
在vue中更換字體,本地存儲字體非引用在線字體庫的方法
今天小編就為大家分享一篇在vue中更換字體,本地存儲字體非引用在線字體庫的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue動態(tài)權(quán)限登錄實現(xiàn)(基于路由與角色)
很多應(yīng)用都會需要對不同的用戶進(jìn)行權(quán)限控制，本文主要介紹了Vue動態(tài)權(quán)限登錄實現(xiàn)(基于路由與角色)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Monorepo風(fēng)格的組件工程搭建示例詳解
這篇文章主要介紹了Monorepo風(fēng)格的組件工程搭建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
如何手動銷毀Vue中掛載的組件
這篇文章主要介紹了如何手動銷毀Vue中掛載的組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
el-form組件使用resetFields重置失效的問題解決
用el-form寫了包含三個字段的表單,使用resetFields方法進(jìn)行重置,發(fā)現(xiàn)點擊重置或要清空校驗時是失效的,所以本文給大家介紹了el-form組件使用resetFields重置失效的問題解決,需要的朋友可以參考下
2023-12-12
Vue中如何使用base64編碼和解碼
這篇文章主要介紹了Vue中如何使用base64編碼和解碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02