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响应系统, 进而触发函数重新执行.
原著：无为
网友评论