Vue监测数据的原理（对象、数组）、Vue.set()、vm.$set()

偏执的太偏执、 2024-04-07 12:21 83阅读 0赞

**目录**

一、Vue监测数据的原理---对象

二、Vue.set()

1.Vue.set()

其他用法

2.vm.$set(target,key,val)

3.重要注意：

二、Vue监测数据的原理---数组

1.push()

2.shift

3.splice()

三、总结

总结：Vue监视数据的原理

--------------------

为什么我们要研究一下Vue监测数据的原理？

以防我们后续在给data赋值或者修改data中数据时导致修改不成功

比如下面这个例子：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
                <h2>人员列表</h2>
    
               <button @click="updateMei">更改马冬梅信息</button>
                <ul>
                    <li v-for="(p,index) in  persons" :key="p.id" >
                        {
       {p.name}}-{
       {p.age}}-{
       {p.sex}}
                    </li>
                </ul>
    
            </div>
    
            <script type="text/javascript">
                //阻止vue在启动时生成生产提示
                Vue.config.productionTip=false
                
              const vm=  new Vue({
                    el:'#root',
                    data:{
    
                      persons:[
                        {id:'001',name:'马冬梅',age:19,sex:'女'},
                        {id:'002',name:'周冬雨',age:20,sex:'女'},
                        {id:'003',name:'周杰伦',age:21,sex:'男'},
                        {id:'004',name:'温兆伦',age:22,sex:'男'}
                      ],
                     
                    },
                    methods: {
                        updateMei(){
                            this.persons[0].name = '马老师'
                            this.persons[0].age = 50,
                            this.persons[0].sex = '男'
                            
    
                        }
                    },
                   
                })
    
            </script>   
        </body>
    </html>

![63f863d30d6d4d1bbec00add2b8d6b92.png][]

当我们点击按钮之后，会发生下面这种情况

![ae581b6b97034b47865c6d4802e6692e.png][]

我们不难发现：页面中的**内容修改了，Vue中的数据也修改了**

但是如果我们把代码中的**数据改成下面**这个样子：

methods: {
                        updateMei(){
                            //this.persons[0].name = '马老师'
                            //this.persons[0].age = 50,
                            //this.persons[0].sex = '男'
                             this.persons[0] ={id:'001',name:'马老师',age:50,sex:'男'}
    
                        }
                    },

初始界面和上面还是相同的，但是我们**点击按钮之后，页面和Vue并没有反应**

![ce4be3c6ed64400d9934e1945f295306.png][]

**原因：我们直接操作的数组的索引值，用赋值的方式去改（具体参照Vue监测数据的原理---数组）**

**数组中 persons\[0\] persons\[1\] persons\[2\].....这种没有getter和setter，但是persons\[0\] persons\[1\]里面的属性有getter和setter，比如name、age、sex都会有getter和setter**

![6cecd56cea4949e3a2fdee80e74fcf01.png][]

修改成下面这个样子：

![85bde2f27f204442b456acc91f92feab.png][]

所以我们就要研究一下Vue监测数据的原理

## 一、Vue监测数据的原理---对象 ##

过程：

![9dee2a3502b2499e809d975c8b99afd7.png][]

![9f0950be3f48463ba3ec546235812fcb.png][]

![11e19903824249fab89f3463587bf966.png][]

对于上面监视对象的例子我们不难发现，**只要我们有对象，就会有getter和setter**

## 二、Vue.set() ##

### 1.Vue.set() ###

我们在代码中没有写某个对象，但是在后期我们想添加上

比如下面这种情形

我们在页面的Vue中给学生添加一个性别，我们不难发现我们新添加的这个性别没有getter和setter

![dc87ae737aaf46a08aa96badf063e4f5.png][]

![84ffce99e5ac483992ca23b60ae494fe.png][]

那如果我们前期没添加，但是后期又想添加怎么把？

**API给我提供了一个Vue.set（target,key,val）方法**

**target:我们要往谁的身上追加一个属性**

**key：往target身上加一个什么属性**

**val:值**

![84e20525559f4dc4b6d8e9e795b91f29.png][]

虽然我们是后天添加，但是我们依然享有getter和setter

![ab6dc82066494bfbbf9c204a3b43bb0d.png][]

#### 其他用法 ####

![93e9ce977c0c4919933d650e740ed9b5.png][]

### **2.vm.$set(target,key,val)**  ###

**另外一种方法：**

![a6de6ffbbcea4df6af32b8be9061ad59.png][]

### 3.重要注意： ###

案例：我们要点击一个按钮，给学生追加性别

![218da6c962e44bf8b2a9f238621f9fb3.png][]

![c72de203137343af8f8c8a804ef65670.png][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
    
        <body>
            <div id="root">
                、<h1>学校信息</h1>
                 <h2>学校名称：{
       {name}}</h2>
                 <h2>学校地址：{
       {address}}</h2>
                 <hr/>
                 <h1>学生信息</h1>
                 <button @click="addSex" >添加一个学校信息，默认值是男</button>
    
                 <h2>学生姓名：{
       {student.name}}</h2>
                 <h2>学生性别：{
       {student.sex}}</h2>
                 <h2>学生年龄：真实{
       {student.age.rAge}},对外{
       {student.age.sAge}}</h2>
                 <hr/>
                 <ul>
                    <li v-for="(f,index) in student.friends">
                        {
       {f.name}}---{
       {f.age}}
                    </li>
                 </ul>
            </div>
    
        </body>
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
          const vm=  new Vue({
                el:'#root',
                data:{
                  name:'尚硅谷',
                  address:'北京',
                  student:{
                    name:'tom',
                    // sex:'男',
                    age:{
                        // 真实年龄
                        rAge:40,
                        sAge:29
                    },
                    friends:[
                        {name:'jerry',age:35},
                        {name:'tony',age:36}
                    ]
                },
                },
    
                methods: {
                    addSex(){
                     Vue.set(this.student,'sex','男')
                    }
                },
            })
        </script>   
    </html>

不难发现，我们上面那个案例成功了

但是！！！！！我们现在要变一下，我们不给data里面的对象追加属性了，我们给data追加！

![269fe7853e0a4a2c80bd2240328b4530.png][]

不难发现，出错了！

![9d550dd5168940ce962e35accc9594b0.png][]

**结论：Vue.set不能给data追加属性（也不能给vm 追加），但是可以给data里面的对象追加属性**

![686dcbff2bea4a6ea1fd50a258d66f9e.png][]

## 二、Vue监测数据的原理---数组 ##

![83d7491325e8453e82584f056ffa5ecc.png][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
    
        <body>
            <div id="root">
                、<h1>学校信息</h1>
                 <h2>学校名称：{
       {school.name}}</h2>
                 <h2>学校地址：{
       {school.address}}</h2>
                 <h2>校长是:{
       {school.leader}}
                 <hr/>
                 <h1>学生信息</h1>
                 <button @click="addSex" >添加一个学校信息，默认值是男</button>
    
                 <h2>学生姓名：{
       {student.name}}</h2>
                 <h2>学生性别：{
       {student.sex}}</h2>
                 <h2>学生年龄：真实{
       {student.age.rAge}},对外{
       {student.age.sAge}}</h2>
                 <hr/>
                 <h1>爱好</h1>
                 <ul>
                    <li v-for="(h,index) in student.hobby">
                        {
       {h}}
                    </li>
                 </ul>
                 <h1>朋友们</h1>
                 <ul>
                    <li v-for="(f,index) in student.friends">
                        {
       {f.name}}---{
       {f.age}}
                    </li>
                 </ul>
            </div>
    
        </body>
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
          const vm=  new Vue({
                el:'#root',
                data:{
                    school:{
                    name:'尚硅谷',
                     address:'北京'
                    },
                  student:{
                    name:'tom',
                    // sex:'男',
                    age:{
                        // 真实年龄
                        rAge:40,
                        sAge:29
                    },
                    hobby:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'jerry',age:35},
                        {name:'tony',age:36}
                    ]
                },
                },
    
                methods: {
                    addSex(){
                     Vue.set(this.student,'sex','男')
                    }
                },
            })
        </script>   
    </html>

![9dcb84306f594625ac1109637e46741e.png][]

注意看，我们的爱好写成的是一个数组的形式，我们在下面观察，我们**并没有发现爱好的getter和setter**（如果**把爱好的属性写成对象的模式，会有getter和setter**），那说明我们直接修改数组的话，页面的内容可能不会改变

![08e3d5d7adf746cab30d8278bdfdfcab.png][]

那我们怎么修改数组呢？

### 1.push() ###

--------------------

这个push已经和我们以前学的数组的push有一点不一样了

下面这个是数组中的push

![d56aea0b49a34b64ae128d78567300e6.png][]

![a9d4de97b538462db788054fbe21ec80.png][]

--------------------

![d97751932c6c403587896ccf00cbd6b7.png][]

### 2.shift ###

![502b0cf092d545cfae3ed7cd9b6569ef.png][]

### 3.splice() ###

参数0 代表数组的下标 参数1 代表干掉 参数‘打台球’代表替换成打台球

![e61b0ac0fdbd44d791cc79a40ef5c060.png][]

## 三、总结 ##

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
    
        <body>
            <div id="root">
                 <button @click="student.age++">年龄+1岁</button><br/>
    
                 <button @click="addSex">添加性别属性，默认值：男</button><br/>
    
                 <button @click="addFriend">在列表首位添加一个朋友</button><br/>
    
                 <button @click="updateFirstFriendName">修改第一个好友的名字</button><br/>
    
                 <button @click="addHobby">添加一个爱好</button><br/>
    
                 <button @click="updateHobby">修改第一个爱好为：开车</button><br/>
    
                 <h1>学生信息</h1>
                 <h2>学生姓名：{
       {student.name}}</h2>
                 <h2>学生年龄：{
       {student.age}}</h2>
                 
                 <h2 v-if="student.sex">学生性别：{
       {student.sex}}</h2>
                 <hr/>
                 <h1>爱好</h1>
                 <ul>
                    <li v-for="(h,index) in student.hobby">
                        {
       {h}}
                    </li>
                 </ul>
                 <h1>朋友们</h1>
                 <ul>
                    <li v-for="(f,index) in student.friends">
                        {
       {f.name}}---{
       {f.age}}
                    </li>
                 </ul>
            </div>
    
        </body>
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
          const vm=  new Vue({
                el:'#root',
                data:{
                  student:{
                    name:'tom',
                    // sex:'男',
                    age:18,
                    hobby:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'jerry',age:35},
                        {name:'tony',age:36}
                    ]
                },
                },
    
                methods: {
                    addSex(){
                        Vue.set(this.student,"sex",'男')
                    },
                    addFriend(){
                        // 往前面加一个
                        this.student.friends.unshift({name:'jack',age:70})
                    },
                    updateFirstFriendName(){
                        // 下面注释这么写就费了
                        // this.student.friends[0] ='123'
                        this.student.friends[0].name ='张三'
                    },
                    addHobby(){
                        this.student.hobby.push('学习')
                    },
                    updateHobby(){
                        // 从第0个开始，删除一个，并再加入一个开车
                        // this.student.hobby.splice(0,1,'开车')
                        
                        // 将数组中的下标为0的修改为开车
                        Vue.set(this.student.hobby,0,'开车')
    
                    }
                },
            })
        </script>   
    </html>

![fa9b79c7ad0a46ae9578a4a3a0219be0.png][]

### 总结：Vue监视数据的原理 ###

1.vue会监视data中所有层次的数据

2.如何检测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据

①对象中后追加的属性，Vue默认不做响应式处理

②如需给后添加的属性做响应式处理，需要下面的API

![45a08b3c457d442d98657c0adef69df2.png][]

3. 如何监测数组中额的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

①调用原生对应的方法对数组进行更新

②重新解析模板，进而更新页面

4.在Vue修改数组中的某个元素一定要用如下方法

![a2ce07badaa84836854c99da7694ec3b.png][]

[63f863d30d6d4d1bbec00add2b8d6b92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8c944b534d6b47baba4b282d6abd8f17.png
[ae581b6b97034b47865c6d4802e6692e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0e92bd61fa8a42a788fad3fb16279041.png
[ce4be3c6ed64400d9934e1945f295306.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5d02fed72c2140e998eabdbb8bd23a17.png
[6cecd56cea4949e3a2fdee80e74fcf01.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/917381b0b532452d819b6e9a216d8b2b.png
[85bde2f27f204442b456acc91f92feab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0c02d3afda5d4cadb0fac34ccd029a65.png
[9dee2a3502b2499e809d975c8b99afd7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8e7cfa891ec34a5f8f7676a6e9205368.png
[9f0950be3f48463ba3ec546235812fcb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1e9378425fc74754b61b7314e61de71b.png
[11e19903824249fab89f3463587bf966.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d9f50cb0f4a949a58d8925574e9150b9.png
[dc87ae737aaf46a08aa96badf063e4f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5ab23b2541be49c196fd6407aca12c03.png
[84ffce99e5ac483992ca23b60ae494fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/39214de6591e461fbc36d105d6641ae8.png
[84e20525559f4dc4b6d8e9e795b91f29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6623b990c34a47ea94851ad811f27a41.png
[ab6dc82066494bfbbf9c204a3b43bb0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7c1b4c17c2a448d793feffa7b3cfa91e.png
[93e9ce977c0c4919933d650e740ed9b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b5ebc54f63604d4ea3c774d44b88c9fa.png
[a6de6ffbbcea4df6af32b8be9061ad59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4bbb1db213b14c08a741adf0123029bb.png
[218da6c962e44bf8b2a9f238621f9fb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/85e74065fdc54ddbacafb88dd25a5f59.png
[c72de203137343af8f8c8a804ef65670.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0c2ae3aee1f54592a7870ab0cdae6426.png
[269fe7853e0a4a2c80bd2240328b4530.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f002fcf543a74b86b72372893d2244b1.png
[9d550dd5168940ce962e35accc9594b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b3056a4dda6c4321ade5f97a394be5d1.png
[686dcbff2bea4a6ea1fd50a258d66f9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6a75370881384030a6c8eec9ea59b2fa.png
[83d7491325e8453e82584f056ffa5ecc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/851d6a33cea545b283f621139254e826.png
[9dcb84306f594625ac1109637e46741e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/26b7796a33364212b5becb18de66d60f.png
[08e3d5d7adf746cab30d8278bdfdfcab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/86969b96f0054c6f83b4bf8727bc76fc.png
[d56aea0b49a34b64ae128d78567300e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/77d87d34708546389a372485266cc4bd.png
[a9d4de97b538462db788054fbe21ec80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/835922f35adb46d590c1a62678092f49.png
[d97751932c6c403587896ccf00cbd6b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/cd849afacf7f42f3a6fc11ff71ddfb94.png
[502b0cf092d545cfae3ed7cd9b6569ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4dace922824e4deea8bf97ee6d5535b6.png
[e61b0ac0fdbd44d791cc79a40ef5c060.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/424df3629e3848a3ae0a8ac83a0bb71d.png
[fa9b79c7ad0a46ae9578a4a3a0219be0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/61ad8f74f0904041a9d0426b11e31936.png
[45a08b3c457d442d98657c0adef69df2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7fda2e3e5238412bae9c517b75c29577.png
[a2ce07badaa84836854c99da7694ec3b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e4d89fbf43274d2f9d1ff0cd42c46ede.png