深入理解vue中的$set
更新時間：2017年06月01日 08:25:32 作者：payne_pf
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在我們使用vue進行開發(fā)的過程中，可能會遇到一種情況：當(dāng)生成vue實例后，當(dāng)再次給數(shù)據(jù)賦值時，有時候并不會自動更新到視圖上去；
當(dāng)我們?nèi)タ磛ue文檔的時候，會發(fā)現(xiàn)有這么一句話：如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(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>
運行結(jié)果：
姓名：腳本之家 年齡：3 性別： 說明：my name is test
為什么會這樣呢？當(dāng)去查對應(yīng)文檔時，你會發(fā)現(xiàn)響應(yīng)系統(tǒng) ,把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項，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實例方法，這也是全局 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)文章
最近入門vue,用字節(jié)跳動的arco初始化一個項目的時候報錯自己解決后沒來的及截圖,從別人那拷貝個網(wǎng)圖把,是一樣的報錯,本文給大家分享vue 解決報錯問題小結(jié),感興趣的朋友一起看看吧2023-09-09
Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式
在Vue項目中,使用ElementUI渲染表格數(shù)據(jù)時,如果某一個列數(shù)值長度超過列寬,會默認換行,造成顯示不友好,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式,需要的朋友可以參考下2022-09-09
Vue3中使用reactive時,后端有返回數(shù)據(jù)但dom沒有更新的解決
這篇文章主要介紹了Vue3中使用reactive時,后端有返回數(shù)據(jù)但dom沒有更新的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了vue中定義全局聲明vscode插件提示找不到問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣,都是使用了set函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue.set與this.$set的用法與使用場景,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了vue基礎(chǔ)語法之插值表達式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了全面介紹vue 全家桶和項目實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue導(dǎo)出excel多層表頭的實現(xiàn)方案詳解
這篇文章主要為大家詳細介紹了vue導(dǎo)出excel多層表頭的實現(xiàn)方案,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
這篇文章主要介紹了Echarts只圖例legend基本配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04