3-4 vue生命周期及实例的属性和方法-实例方法/数据
目录:
- 实例方法/数据
一、实例方法/数据
关于数据的实例方法就只有三个，vue.js的官方文档如下：实例方法/数据。
vm.$set(object,key,value) => 更新对象的属性，存在更新，不存在则创建 vm.$delete(object,key) => 删除对象的属性 vm.$watch(data,callback[,options]) => 监视数据变化,data:数据 callback:回调函数 options:选项，可有可无
1、vm.$set(object,key,value) => 通过vue实例的$set方法为对象添加属性，可以实时监视。
有同学疑问了，我为啥要用这种方式为对象添加属性呐，我按照以往的方式不行吗？接下来我们就试试看：
<body>
<div id="box">
<button @click="doUpdate">修改属性</button>
<button @click="doAdd">添加属性</button>
<hr>
<h2>{{user.name}}</h2>
<h2>{{user.age}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
user:{
id:1001,
name:'tom'
}
},
methods:{
doUpdate(){
this.user.name = "汤姆";
},
doAdd(){
//通过这种方式为对象添加属性时，vue无法实施监视到
this.user.age = 25;
console.log(this.user);
}
}
});
</script>
</body>
输出结果：
很明显，通过这种方式为对象添加属性时，vue无法实施监视到，所以我们需要通过另外一种方式，使得Vue 实时监控，所以我们doAdd()函数可以这样改造：
doAdd(){
//通过vue实例的$set方法为对象添加属性，可以实时监视
//this.$set(this.user,'age',25);//存在则修改，不存在则添加
//全局方式添加
//Vue.set(this.user,'age',18);
//console.log(this.user);
//一般情况下都是通过判断的方式设置age的值
if(this.user.age){
this.user.age++;
}else {
Vue.set(this.user,'age',18);
}
},
2、vm.$delete(object,key) => 删除对象中的某个属性
doDelete(){
if(this.user.age){
//局部的
//this.$delete(this.user,"age");
//全局的
//Vue.delete(this.user,"age");
}
}
3、vm.$watch(data,callback[,options]) => 监视数据变化
①有2种方式监视数据变化：
- 方式1：使用vue实例的提供watch()方法
- 方式2：使用vue实例提供的watch选项
<body>
<div id="box">
<input type="text" v-model="name">
<h3>{{name}}</h3>
<hr>
<input type="text" v-model="age">
<h3>{{age}}</h3>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
name: 'tom',
age: 23
},
watch:{ //方式2：使用vue实例提供的watch选项
age:(newVal,oldVal) => { //监视age属性，newVal:更新后的值、oldVal更新前的值
console.log('age被修改啦:原值:'+oldVal+',新值:' + newVal);
}
}
});
//方式1:使用vue实例的提供watch()方法
vm.$watch('name',(newVal,oldVal) => { //监视name属性，newVal:更新后的值、oldVal更新前的值
console.log('name被修改啦:原值:'+oldVal+',新值:' + newVal);
});
</script>
</body>
console控制台输出：
那这边有同学要说了，我用计算属性不也是一样的嘛？为啥要用$watch去监视数据的变化呐，$watch把变化后的数据发送ajax请求到后台，这边有计算属性不太合适，场合不对，自己监视用$watch。
注意：$watch这个只有局部的方法，没有全局的watch，如果有全局的，这下如果有两个实例，两个实例有同一个变量，我到底要监视哪一个呐，随意$watch没有全局方法。
②对象数据变化的监视
对象的数据监视跟普通属性变化不一样，对象的值虽然变了，但是内存地址没有变，所以无效，所以要深度监视。
<body>
<div id="box">
<!--我想这个Name发生改变,我也能监视-->
<input type="text" v-model="user.name">
<h2>{{user.name}}</h2>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
//创建vue实例
let vm = new Vue({
el: "#box",
data:{
user:{
id:1001,
name:'jerry' //对象的值虽然变了，但是内存地址没有变，所以无效，所以要深度监视
}
},
watch:{ //方式2：使用vue实例提供的watch选项
user:{
handler:(newVal,oldVal) => { //newVal,oldVal拿的都是user对象，当你执行下一句的时候，地址空间已经更新了
console.log('user被修改啦:原值:'+oldVal+',新值:' + newVal);
},
deep: true //深度监视，当对象中的属性发生变化时也会监视
}
}
});
//方式1:使用vue实例的提供watch()方法
vm.$watch('user',(newVal,oldVal) => { ////newVal,oldVal拿的都是user对象
console.log('name被修改啦:原值:'+oldVal+',新值:' + newVal);
},{deep: true}); //在后面加一个true表示深度监视，当对象中的属性发生变化时也会监视
</script>
</body>
console控制台输出：
浙公网安备 33010602011771号