vue中向data添加新属性的三种方式小结

2024-04-02 19:04:59 590人浏览泡泡鱼

摘要

目录向data添加新属性的三种方式原理分析三种方式Vue组件 data等属性介绍向data添加新属性的三种方式原理分析首先在了解这三种方式之前，我觉的有必要说一下，为啥不能直接手

向data添加新属性的三种方式

原理分析

首先在了解这三种方式之前，我觉的有必要说一下，为啥不能直接手动给data中的对象添加属性呢？

下面咱们一块分析下：

vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式；

    const obj = {};
        let val = 'kk'
        Object.defineProperty(obj,'name',{
            get(){
                console.log('访问了')
                return val
               
            },
            set(newval){
                if(newval !==val)
                val = newval;
                 console.log('设置',newval)
            }
        })

在我们访问或者设置obj.name的时候，会相继出发 setter，getter；然而在给obj添加属性的时候，却没有触发属性拦截；

其实上边的代码是将obj对象的name属性设置成了响应式数据，但是新添加的属性并没有通过Object.defineProperty 设置成响应式，所有这就是为什么vue 的data中对象新加属性页面无法更新，但是数据上却又我们新加属性的原因。

三种方式

1.Vue.set()

Vue.set( target, propertyName/index, value ) 参数

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

返回值：设置的值

通过Vue.set向响应式对象中添加一个property，并确保这个新 property同样是响应式的，且触发视图更新

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

2.Object.assign()

直接使用Object.assign()添加到对象的新属性不会触发更新。

应创建一个新的对象，合并原对象和混入对象的属性

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

3.$forceUpdate

$forceUpdate迫使Vue 实例重新渲染

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

小结一下吧：

对象中添加少量的新属性，可以直接采用Vue.set()
对象中添加多个新属性，则通过Object.assign()创建新对象
如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)

vue组件 data等属性介绍

注意：

1.组件中的data属性的内容，必须是一个function类型，并且必须要有返回值。用法跟实例中的data使用是一样的，同时也有实例化对象的其他属性如，methods

2.因为如果，不是这里面的对象，而是一个公共的对象实例，可能会出现错误。不同的组件如果改变了公共的对象然后返回，对其他组件有影响

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内容'
                 }
             }
         });
         //组件中的data属性的内容，必须是一个function类型，并且必须要有返回值。用法跟实例中的data使用是一样的，同时也有实例化对象的其他属性如，methods
         //因为如果，不是这里面的对象，而是一个公共的对象实例，可能会出现错误。不同的组件如果改变了公共的对象然后返回，对其他组件有影响
         
         var vm = new Vue({
            el:'#app',
            data:{} 
         });
     </script>
</body>
</html>

效果：