Javascript

Vue 监测数据改变的原理

本文主要是介绍Vue 监测数据改变的原理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

监测数据改变的原理

代码主要功能:点击按钮,更新第一条数据

    <div id="root">            
        <button @click="updata">更新周冬雨的信息</button>
        <ul>
            <li v-for="p in persons" :key="p.id">
                {{p.name}}---{{p.age}}
            </li>
        </ul>
    </div>
var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:"001", name:"周冬雨", age:19},
                    {id:"002", name:"周杰伦", age:30},
                    {id:"003", name:"夏雨", age:2},
                    {id:"004", name:"温兆伦", age:22}
                ]
            },
            methods: {
                updata(){
                    this.persons[0].name = "周老师"
                    this.persons[0].age = 40
                }
            }
        })

在这里插入图片描述
分批对一个对象的属性进行修改,这样产生的效果是对的,但是我们修改一整条数据(对象),并没有产生我们预想中的效果

        var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:"001", name:"周冬雨", age:19},
                    {id:"002", name:"周杰伦", age:30},
                    {id:"003", name:"夏雨", age:2},
                    {id:"004", name:"温兆伦", age:22}
                ]
            },
            methods: {
                updata(){
                    this.persons[0] = {id:"001", name:"周老师", age:40}
                }
            }
        })

在这里插入图片描述
网页中的数据没有发生改变,但是在控制台输出的结果却是改变了

解释Vue监测对象中的数据的原理

在Vue的设计中对对象的数据进行了一个递归,查找对象中的每一个属性,并且对其进行数据代理,给每一个属性设有getset方法,这样子当对象中的数据发生改变,那么Vue就会察觉并修改页面中的数据

如需给后添加的属性做响应式,请使用如下API:

vm为Vue对象

Vue.set(target, propertyName/index, value)
或
vm.$set(target, propertyName/index, value)

解释Vue监测数组中的数据的原理

通过包裹数组更新元素的方式实现,本质就是做了两件事:

  1. 调整原生对应的方法对数组进行更新
  2. 重新解构模型,进而更新页面

在修改数组的时候,我们只有通过数组的修改方法才能,修改方法有pushpopshiftunshiftsplicesortreverse

注意:Vue.set()和vm.set() 不能给vm或者vm的根数据对象添加属性

这篇关于Vue 监测数据改变的原理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!