深入理解vue中的$set
更新時間：2017年06月01日 08:25:32 作者：payne_pf
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在我們使用vue進(jìn)行開發(fā)的過程中，可能會遇到一種情況：當(dāng)生成vue實(shí)例后，當(dāng)再次給數(shù)據(jù)賦值時，有時候并不會自動更新到視圖上去；
當(dāng)我們?nèi)タ磛ue文檔的時候，會發(fā)現(xiàn)有這么一句話：如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會觸發(fā)視圖更新。如下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://static.jb51.net/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
姓名：{{ name }}<br>
年齡：{{age}}<br>
性別：{{sex}}<br>
說明：{{info.content}}
</div>
<!-- JavaScript 代碼需要放在尾部（指定的HTML元素之后） -->
<script>
var data = {
name: "腳本之家",
age: '3',
info: {
content: 'my name is test'
}
}
var key = 'content';
var vm = new Vue({
el:'#app',
data: data,
ready: function(){
//Vue.set(data,'sex', '男')
//this.$set('info.'+key, 'what is this?');
}
});
data.sex = '男'；
</script>
</body>
</html>
運(yùn)行結(jié)果：
姓名：腳本之家 年齡：3 性別： 說明：my name is test
為什么會這樣呢？當(dāng)去查對應(yīng)文檔時，你會發(fā)現(xiàn)響應(yīng)系統(tǒng) ,把一個普通 Javascript 對象傳給 Vue 實(shí)例來作為它的 data 選項(xiàng)，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter,如上示例，將data在控制臺打印出來會發(fā)現(xiàn)：
在age及name都有g(shù)et和set方法,但是在sex里面并沒有這兩個方法，因此，設(shè)置了sex值后vue并不會自動更新視圖；
解決方法：
<script>
var data = {
name: "腳本之家",
age: '3',
info: {
content: 'my name is test'
}
}
var key = 'content';
new Vue({
el:'#app',
data: data,
ready: function(){
Vue.set(data,'sex', '男');
this.$set('info.'+key, 'what is this?');
}
});
</script>
1、通過Vue.set方法設(shè)置data屬性，如上：
Vue.set(data,'sex', '男')
2、您還可以使用 vm.$set實(shí)例方法，這也是全局 Vue.set方法的別名:
var key = 'content'; //這種主要用于當(dāng)對象中某個屬性值動態(tài)生成時處理方式
this.$set('info.'+key, 'what is this?');
//或
this.$set('info.content', 'what is this?');
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用elementuiadmin去掉默認(rèn)mock權(quán)限控制的設(shè)置
這篇文章主要介紹了使用elementuiadmin去掉默認(rèn)mock權(quán)限控制的設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了ESLint 是如何檢查 .vue 文件的，幫助大家更好的理解和使用ESLINT，感興趣的朋友可以了解下2020-11-11
一文掌握Pinia使用及數(shù)據(jù)持久化存儲超詳細(xì)教程
這篇文章主要介紹了Pinia安裝使用及數(shù)據(jù)持久化存儲的超詳細(xì)教程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue-cli4打包靜態(tài)資源到指定目錄方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue3中Vant的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue中for循環(huán)作用域問題處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue打包相關(guān)細(xì)節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細(xì)節(jié)整理(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue中的keep-alive實(shí)例代碼，vue實(shí)現(xiàn)組件信息緩存的方法，在文中也給大家提到,需要的朋友可以參考下2018-07-07
在頁面進(jìn)行pdf預(yù)覽的時候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來通過本文給大家介紹vue使用pdf.js來進(jìn)行pdf預(yù)覽,需要的朋友可以參考下2021-12-12
這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12