vue中向data添加新屬性的三種方式小結(jié)

更新時(shí)間：2022年04月20日 14:50:39 作者：a@do?it

這篇文章主要介紹了vue中向data添加新屬性的三種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

向data添加新屬性的三種方式

原理分析

首先在了解這三種方式之前，我覺的有必要說一下，為啥不能直接手動(dòng)給data中的對(duì)象添加屬性呢？

下面咱們一塊分析下：

vue2 是通過數(shù)據(jù)劫持 “Object.defineProperty” 實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式；

? ? const obj = {};
? ? ? ? let val = 'kk'
? ? ? ? Object.defineProperty(obj,'name',{
? ? ? ? ? ? get(){
? ? ? ? ? ? ? ? console.log('訪問了')
? ? ? ? ? ? ? ? return val
? ? ? ? ? ? ? ?
? ? ? ? ? ? },
? ? ? ? ? ? set(newval){
? ? ? ? ? ? ? ? if(newval !==val)
? ? ? ? ? ? ? ? val = newval;
? ? ? ? ? ? ? ? ?console.log('設(shè)置',newval)
? ? ? ? ? ? }
? ? ? ? })

在我們訪問或者設(shè)置obj.name的時(shí)候，會(huì)相繼出發(fā) setter，getter；然而在給obj添加屬性的時(shí)候，卻沒有觸發(fā)屬性攔截；

其實(shí)上邊的代碼是將obj對(duì)象的name屬性設(shè)置成了響應(yīng)式數(shù)據(jù)，但是新添加的屬性并沒有通過Object.defineProperty 設(shè)置成響應(yīng)式，所有這就是為什么vue 的data中對(duì)象新加屬性頁面無法更新，但是數(shù)據(jù)上卻又我們新加屬性的原因。

三種方式

1.Vue.set()

Vue.set( target, propertyName/index, value ) 參數(shù)

{Object | Array} target
{string | number} propertyName/index
{any} value

返回值：設(shè)置的值

通過Vue.set向響應(yīng)式對(duì)象中添加一個(gè)property，并確保這個(gè)新 property同樣是響應(yīng)式的，且觸發(fā)視圖更新

data() {
? ? return {
? ? ? ? msg:{
? ? ? ? ? ? name:'黑澤明',
? ? ? ? ? ? hero:true
? ? ? ? } ? ?
? ? }
},
methods: {
? ? addProperty(){
? ? ? ? this.$set(this.msg, 'sex', '男')
? ? }
},

2.Object.assign()

直接使用Object.assign()添加到對(duì)象的新屬性不會(huì)觸發(fā)更新。

應(yīng)創(chuàng)建一個(gè)新的對(duì)象，合并原對(duì)象和混入對(duì)象的屬性

? ? data() {
? ? ? ? return {
? ? ? ? ? ? msg:{
? ? ? ? ? ? ? ? name:'黑澤明',
? ? ? ? ? ? ? ? hero:true
? ? ? ? ? ? } ? ?
? ? ? ? }
? ? },
? ?addProperty(){
? ? ? ? ? ? this.msg = Object.assign({},this.msg,{sex:'name'});
? ? ? ? },

3.$forceUpdate

$forceUpdate迫使Vue 實(shí)例重新渲染

data() {
? ? return {
? ? ? ? msg:{
? ? ? ? ? ? name:'黑澤明',
? ? ? ? ? ? hero:true
? ? ? ? } ? ?
? ? }
},
addProperty(){
? ? ? ?this.msg.sex = '男';
? ? ? ?this.$forceUpdate()?
? ? },

小結(jié)一下吧：

對(duì)象中添加少量的新屬性，可以直接采用Vue.set()
對(duì)象中添加多個(gè)新屬性，則通過Object.assign()創(chuàng)建新對(duì)象
如果你實(shí)在不知道怎么操作時(shí)，可采取$forceUpdate()進(jìn)行強(qiáng)制刷新 (不建議)

vue組件 data等屬性介紹

注意：

1.組件中的data屬性的內(nèi)容，必須是一個(gè)function類型，并且必須要有返回值。用法跟實(shí)例中的data使用是一樣的，同時(shí)也有實(shí)例化對(duì)象的其他屬性如，methods

2.因?yàn)槿绻?，不是這里面的對(duì)象，而是一個(gè)公共的對(duì)象實(shí)例，可能會(huì)出現(xiàn)錯(cuò)誤。不同的組件如果改變了公共的對(duì)象然后返回，對(duì)其他組件有影響

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
     <div id="app">
         <my-com></my-com>
     </div>
     
     <script>
         Vue.component('myCom',{
             template:'<h3>陳小帥是真的帥呢 +++ {{ msg }}</h3>',
             data:function () {
                 return{
                     msg:'組件中的data內(nèi)容'
                 }
             }
         });
         //組件中的data屬性的內(nèi)容，必須是一個(gè)function類型，并且必須要有返回值。用法跟實(shí)例中的data使用是一樣的，同時(shí)也有實(shí)例化對(duì)象的其他屬性如，methods
         //因?yàn)槿绻?，不是這里面的對(duì)象，而是一個(gè)公共的對(duì)象實(shí)例，可能會(huì)出現(xiàn)錯(cuò)誤。不同的組件如果改變了公共的對(duì)象然后返回，對(duì)其他組件有影響
         
         var vm = new Vue({
            el:'#app',
            data:{} 
         });
     </script>
</body>
</html>

效果：