vue2響應(yīng)式的缺點(diǎn)影響
更新時(shí)間：2022年05月26日 09:34:40 作者：pain_past_is_pleasur?
這篇文章主要介紹了vue2響應(yīng)式的缺點(diǎn)影響，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
前言：
響應(yīng)式：數(shù)據(jù)改變-->視圖跟著變
對(duì)象新增的屬性沒有響應(yīng)式 數(shù)組的部分操作沒有響應(yīng)式
push()，pop()，shift()，unshift()，splice()，sort()，reverse()
以上7中API會(huì)修改原數(shù)組(vue2的內(nèi)部重寫了這7個(gè)API)
其他的操作都不會(huì)有響應(yīng)式
實(shí)際簡單操作一波：
<template>
<div>
<span v-for="(item,index) in arr " :key="index">{{item}}</span>
<hr>
<button @click="arr[0]=100">點(diǎn)擊把第一個(gè)元素變成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>
你們會(huì)發(fā)現(xiàn)vue里面的數(shù)據(jù)其實(shí)已經(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)">點(diǎn)擊把第一個(gè)元素變成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ù)修改的同時(shí),dom也成功渲染
到此這篇關(guān)于vue2響應(yīng)式的缺點(diǎn)影響的文章就介紹到這了,更多相關(guān)vue2響應(yīng)式缺點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中的計(jì)算屬性和axios基本使用回顧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中vee validate表單校驗(yàn)的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下2018-06-06
vue實(shí)現(xiàn)消息列表向上無縫滾動(dòng)效果
本文主要實(shí)現(xiàn)vue項(xiàng)目中,消息列表逐條向上無縫滾動(dòng),每條消息展示10秒后再滾動(dòng),為了保證用戶能看清消息主題,未使用第三方插件,本文實(shí)現(xiàn)方法比較簡約,需要的朋友可以參考下2024-06-06
對(duì)于Element組件的使用,最主要的就是明確自己想要達(dá)到的效果,從官網(wǎng)中將對(duì)應(yīng)代碼復(fù)制粘貼即可,最重要的是要讀懂不同組件官網(wǎng)中提供的文檔,以便實(shí)現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫Element-常見組件表格,感興趣的朋友一起看看吧2023-10-10
在vue中更換字體,本地存儲(chǔ)字體非引用在線字體庫的方法
今天小編就為大家分享一篇在vue中更換字體,本地存儲(chǔ)字體非引用在線字體庫的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue動(dòng)態(tài)權(quán)限登錄實(shí)現(xiàn)(基于路由與角色)
很多應(yīng)用都會(huì)需要對(duì)不同的用戶進(jìn)行權(quán)限控制，本文主要介紹了Vue動(dòng)態(tài)權(quán)限登錄實(shí)現(xiàn)(基于路由與角色)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了Monorepo風(fēng)格的組件工程搭建示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了如何手動(dòng)銷毀Vue中掛載的組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
el-form組件使用resetFields重置失效的問題解決
用el-form寫了包含三個(gè)字段的表單,使用resetFields方法進(jìn)行重置,發(fā)現(xiàn)點(diǎn)擊重置或要清空校驗(yàn)時(shí)是失效的,所以本文給大家介紹了el-form組件使用resetFields重置失效的問題解決,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue中如何使用base64編碼和解碼問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02