Vue - 监测数据的原理、Vue.set、vm.$set

企鹅d

于 2024-04-18 20:45:51 发布

阅读量623

点赞数 22

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/libingjiedd/article/details/137936759

版权

监测数据的原理

一、更新时的问题

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

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

比如下面这个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <script type="text/javascript" src="../js/vue.js"></script> 
    </head>
    <body>
        <div id="root">
            <h2>人员列表</h2>
       &lt;button &#64;click&#61;&#34;updateMei&#34;&gt;更改马冬梅信息&lt;/button&gt;
        &lt;ul&gt;
            &lt;li v-for&#61;&#34;(p,index) in  persons&#34; :key&#61;&#34;p.id&#34; &gt;
                {<!-- -->{p.name}}-{<!-- -->{p.age}}-{<!-- -->{p.sex}}
            &lt;/li&gt;
        &lt;/ul&gt;

    &lt;/div&gt;

    &lt;script type&#61;&#34;text/javascript&#34;&gt;
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip&#61;false
        
      const vm&#61;  new Vue({
            el:&#39;#root&#39;,
            data:{

              persons:[
                {id:&#39;001&#39;,name:&#39;马冬梅&#39;,age:19,sex:&#39;女&#39;},
                {id:&#39;002&#39;,name:&#39;周冬雨&#39;,age:20,sex:&#39;女&#39;},
                {id:&#39;003&#39;,name:&#39;周杰伦&#39;,age:21,sex:&#39;男&#39;},
                {id:&#39;004&#39;,name:&#39;温兆伦&#39;,age:22,sex:&#39;男&#39;}
              ],
             
            },
            methods: {
                updateMei(){
                    this.persons[0].name &#61; &#39;马老师&#39;
                    this.persons[0].age &#61; 50,
                    this.persons[0].sex &#61; &#39;男&#39;
                }
            },
        })

    &lt;/script&gt;   
&lt;/body&gt;

</html>

当我们点击按钮之后，马冬梅的信息会随之改变

我们不难发现：页面中的内容修改了，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:'男'}
                    }
                },

初始界面和上面还是相同的，但是我们<