Vue监测数据的原理

最新推荐文章于 2025-12-20 00:52:11 发布

原创最新推荐文章于 2025-12-20 00:52:11 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #javascript

Vue学习专栏收录该内容

63 篇文章

订阅专栏

存在的问题：
vue没有监测到数据的变化

<body>
    <div id="root">
        <h2>列表</h2>
        <button @click="updateMa">更新马冬梅</button>
        <ul>
            <li v-for="(per,index) in person" :key="per.id">
                {{per.name}}-{{per.age}}-{{per.sex}}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            keyword:'',
            sortType:0,
            person:[
              {id:'001',name:'马冬梅',age:18,sex:'女'},
              {id:'002',name:'周冬雨',age:19,sex:'女'},
              {id:'003',name:'周杰伦',age:20,sex:'男'},
              {id:'004',name:'温兆伦',age:17,sex:'男'},
            ],
        },
        methods:{
            updateMa(){
                //成功
                //this.person[0].name='马老师'
                //this.person[0].age='40'
                //this.person[0].sex='男'
                //vue没有监测到
                this.person[0]={id:'001',name:'马老师',age:40,sex:'男'}
            }
        }
    })
</script>

Vue中存储data的逻辑：

模拟一个监视器：

模拟一个数据监视：

<body>
        <script type="text/javascript" >
            let data = {
                name:'Gui',
                address:'北京',
            }
            //创建一个监视的实例对象，用于监视data中属性的变化
            const obs = new Observer(data)      
            console.log(obs)    
            //准备一个vm实例对象
            let vm = {}
            vm._data = data = obs
            function Observer(obj){
                //汇总对象中所有的属性形成一个数组
                const keys = Object.keys(obj)
                //遍历
                keys.forEach((k)=>{
                    Object.defineProperty(this,k,{
                        get(){
                            return obj[k]
                        },
                        set(val){
                            console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
                            obj[k] = val
                        }
                    })
                })
            }
            
            

        </script>
    </body>

Vue.set的使用：

<body>
        <!-- 准备好一个容器-->
        <div id="root">
            <h1>学校信息</h1>
            <h2>学校名称：{{school.name}}</h2>
            <h2>学校地址：{{school.address}}</h2>
            <h2>校长是：{{school.leader}}</h2>
            <hr/>
            <h1>学生信息</h1>
            <button @click="addSex">添加一个性别属性，默认值是男</button>
            <h2>姓名：{{student.name}}</h2>
            <h2 v-if="student.sex">性别：{{student.sex}}</h2>
            <h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
            <h2>朋友们</h2>
            <ul>
                <li v-for="(f,index) in student.friends" :key="index">
                    {{f.name}}--{{f.age}}
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:'#root',
            //没有set数据（即undefined），输出的话不会报错，但是没有值
            //如果一个值没有确定，可以先不添加值，之后有操作了再添加
            data:{
                school:{
                    name:'***',
                    address:'北京',
                },
                student:{
                    name:'tom',
                    age:{
                        rAge:40,
                        sAge:29,
                    },
                    friends:[
                        {name:'jerry',age:35},
                        {name:'tony',age:36}
                    ]
                }
            },
            methods: {
                addSex(){
                    //两个写法：set和this.$set
                    
                    // Vue.set(this.student,'sex','男')
                    //set有三个属性，target，key，value
                    this.$set(this.student,'sex','男')
                }
            }
        })
    </script>

Vue监测数组的变化：

数组的操作：push，pop，shift，unshift，splice，sort，reserves 会修改数组内容

例如filter不会修改数组的内容

所以：Vue是能检测到那些能影响数组的值的那些操作所改变的值

利用vue.set的方法也可以修改数组内的值，vue可以检测到

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

总结：

Vue监视数据的原理：

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

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

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

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

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value)或

vm.$set(target，propertyName/index，value)

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

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

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

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

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set() 或vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！！

练习代码：

<body>
        <!-- 准备好一个容器-->
        <div id="root">
            <h1>学生信息</h1>
            <button @click="student.age++">年龄+1岁</button> <br/>
            <button @click="addSex">添加性别属性，默认值：男</button> <br/>
            <button @click="student.sex = '未知' ">修改性别</button> <br/>
            <button @click="addFriend">在列表首位添加一个朋友</button> <br/>
            <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
            <button @click="addHobby">添加一个爱好</button> <br/>
            <button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
            <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
            <h3>姓名：{{student.name}}</h3>
            <h3>年龄：{{student.age}}</h3>
            <h3 v-if="student.sex">性别：{{student.sex}}</h3>
            <h3>爱好：</h3>
            <ul>
                <li v-for="(h,index) in student.hobby" :key="index">
                    {{h}}
                </li>
            </ul>
            <h3>朋友们：</h3>
            <ul>
                <li v-for="(f,index) in student.friends" :key="index">
                    {{f.name}}--{{f.age}}
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:'#root',
            data:{
                student:{
                    name:'tom',
                    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:20})
                },
                updateFirstFriendName(){
                    //修改的不是数组，是对象的属性
                    this.student.friends[0].name='张三'
                },
                addHobby(){
                    this.student.hobby.push('唱歌')
                },
                updateHobby(){
                    //this.student.hobby.splice(0,1,'开车')
                    //Vue.set(this.student.hobby,0,'开车')
                    this.$set(this.student.hobby,0,'开车')
                },
                removeSmoke(){
                    //替换数组
                    this.student.hobby=this.student.hobby.filter((h)=>{
                        return h!=='抽烟'
                    })
                }
            }
        })

数据劫持：

将数据中的每一个数据，都用setter和getter来包裹，然后重新解析模板