Vue数据响应式

1.数据响应变化

在页面上显示会随着值的变化而变化(响应式),,这样更加直观的看到数据的变化

如果将这个数组或对象输出到页面上,并不会像JS一样输出[Object object]Vue会输出JSON编码后的值

当一个 Vue 实例被创建时,通过插值语法将数据显示在页面上,当我们修改数据时,页面也会发生变化

1.1基本类型数据

<div id="app">{{name}}</div>

let data = {
    name:"张三",
    age:""//初始值 
}
const vm = new Vue({
    el:"#app",
    data:data
})
//data.name == vm.name  =>true
setTimeout(()=>{
    vm.$data.name="李四"
    // data.name="李四"
},2000)

1.data数据属性中的数据name和age被Vue实例通过get,和set一直在检测着。
2.也就是说vue的响应系统一直在观察数据的变化,一旦发生变化,响应系统做出反应,改变视图.所以当数据值发生改变，视图也会产生响应。

property.png

特列

使用Object.freeze(),这个方法是冻结方法,意思是不允许修改对象的属性值,
这就会阻止修改现有的属性， 数据没发改变,也就不会触发Vue的响应系统

let data = {
    name:"张三",
    age:"" //以后可能用到赋上默认值
}
Object.freeze(data);
const vm = new Vue({
    el:"#app",
    data:data
})

1.2引用类型数据

<div id="app">{{job.name}}{{job.year}}</div>

//数据为对象
let data = {
    job:{
        name:"医生"，
    },
    hero:["钟南山","张伯礼","张定宇","陈薇"]
}
const vm = new Vue({
    el:"#app",
    data:data
});
setTimeout(()=>{
    data.job={   
        name:"抗疫",  //=>触发响应系统
        year:"2020"  //视图显示
    };
    //data.job.name="抗疫"
},2000)

1.2.1 将不是响应系统检测的数据添加到响应系统

$set添加的属性会自动被响应式监听

$set每次只能新增一个属性,如果要添加多属性时方法不适合

let data = {
    job:{
        name:"医生"，
    },
    hero:["钟南山","张伯礼","张定宇","陈薇"]
}
const vm = new Vue({
    el:"#app",
    data:data
});
setTimeout(()=>{
    vm.$set(data.job,"year",2020)
},2000)

1.2.2 修改多个不是响应系统检测的数据

我们可以采用直接替换属性对象内容的方法来触发响应式,因为响应系统会测试job数据整体的变化
采用替换对象值的方法来触发响应式

let data = {
    job:{
        name:"医生"
    },
    hero:["钟南山","张伯礼","张定宇","陈薇"]
}
const vm = new Vue({
    el:"#app",
    data:data
});

setTimeout(()=>{
  data.job={   
        name:"抗疫", //=>触发响应系统
        year:"2020"  //视图改变
    };
},2000)

1.2.3 解决直接替换对象数据的缺点

同样的如果采用替换原对象,通过字面量的方式替换,会发现如果我原对象已有多个属性,在通过替换原对象的方式触发响应式的时候,需要不断重写原对象的属性, 就很繁琐.

所以关于替换原对象,我们可以采用Object.assign 来给原对象扩展属性,然后在赋值给原对象

let data = {
    job:{
        name:"医生"
    },
    hero:["钟南山","张伯礼","张定宇","陈薇"]
}
const vm = new Vue({
    el:"#app",
    data:data
});
//在合并后形成新的对象, 在把新对象赋值给vue的数据对象
setTimeout(()=>{
    data.job = Object.assign({},data.job,{
    year:2020;   
    })
},2000)

1.2.4 数组数据响应变化

数组的方法分为两类 （变异和变异）
变异：会修改原数组的方法(会触发响应) push() pop() shift() unshift() splice() sort() reverse()
这些方法本身会触发响应系统,而是Vue 包含观察数组的变异方法的功能，所以它会触发响应系统, 然后更新视图

<div id="app">{{hero}}</div>

let data = {
    hero:["钟南山","张伯礼","张定宇"]
}
const vm = new Vue({
    el:"#app",
    data:data
});
setTimeout(()=>{
   data.hero.push("陈薇");
    })
},2000)

非变异：不会改变原数组(不会触发响应) 例如：filter() concat() 和slice()

let data = {
    hero:["钟南山","张伯礼","张定宇"]
}
const vm = new Vue({
    el:"#app",
    data:data
});
setTimeout(()=>{
    data.hero=data.hero.map(item=>{
       return "抗疫英雄:"+item
    })
},2000)

2. 选项对象method属性

在vue中,函数被定义成为方法来使用,这些方法定义在methods属性中,然后就可以在vue 表达式中调用函数.

2.1 定义方法

vue 选项对象中有一个叫methods的属性.这个属性里面专门来存放一些函数,用来给别人调用

函数表达式
function a(){} let a = function(){}

方法let obj = {
a:function(){},
b:function(){}
}

Mastache语法中可以使用JavaScript表达式,所以我们可以在Mastache语法中调用函数

<div id="app">
    {{ state }}
    {{ show(state) }}
</div>

const vm = new Vue({
    el:"#app",
    data:{
        state:1,
    },
    methods:{
        show:function(id){
            let arr=["苹果","菠萝","梨子"];
            return arr[id]; 
        }
    }
});

2.2 方法中的this指向

通过this 获取到实例对象,来拿到data中的数据

const vm = new Vue({
    el:"#app",
    data:{
        state:1,
    },
    methods:{
        //不需要传参
        show(){
            let arr=["苹果","菠萝","梨子"];
            return arr[this.state]; 
        }
    }
});

注意, 方法不能使用箭头函数,因为箭头函数的this不是Vue实例, 未来我们在方法中可能会大量使用到Vue实例对象中的属性. 比如获取数据,或者调用其他方法, 如果我们使用了箭头函数就会丢失this,只能通过Vue实例对象来获取。

2.3 关于方法的数据响应

数据变化了依赖数据的都可能变化

<div id="app">
    {{ arr }}
    {{ show() }}
</div>

const vm = new Vue({
    el:"#app",
    data:{
        arr:[10,20,30,40,50]
    },
    methods:{
        //不需要传参
        show(){
            return this.arr.filter((number)=>{
                     return number >= 20;
            })
        }
    }
});
////arr:[10,20,30,40,50]
//改变后arr:[20,30,40,50]

方法过滤后的数据也发生了变化
数据变化触发了Vue响应系统, 进而触发函数重新执行.
原著：无为