computed计算属性
规则:
1.使用已有的属性来计算不存在的属性
2.默认调用一次get
3.简写形式(函数)没有set方法,如果需要更改值必须使用对象写法,不能使用函数
4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})
watch监听属性
规则
1.监听已有的属性
2.immediate设置为true默认触发一次,false不会默认触发
3.handler(新值,旧值)函数,当监听值发生改变时就会触发handler函数
4.写法:第一种Vue实例中,第二种实例化vm.$watch("监听的属性",{})
5.watch默认监听一层,需要监听多级如对象中的值,需要添加深度监听deep:true
6.简写,只有handler函数,才可以简写。写法:监听的属性名(新值,旧值){}
computed与watch
1.computed能做到的watch都可以,watch能做到的computed不一定能
2.被Vue实例管理的函数最好都使用普通函数,不被Vue实例管理的函数最好都使用箭头函数,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<select name="" id="" v-model="abc">
<option :value="index" v-for="(item,index) of dataList" :key="index+item">
{{item}}
</option>
</select>
<select name="" id="">
<option value="" v-for="(item,index) of baseList[abc]" :key="index+item">
{{item}}
</option>
</select>
<hr>
<div>
<h1>今天天气{{info}}</h1>
<h2>{{userName}}</h2>
<h3>{{obj.id}}</h3>
<button @click="func()">点击切换天气</button>
</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.config.productionTip = false;
var vm = new Vue({
el:"#app",
data() {
return {
// abc:"1",
dataList:["江西省","湖南省","广东省"],
baseList:[
["南昌市","宜春市","赣州市","上饶市"],
["长沙市","株洲市","怀化市"],
["广州市","深圳市","潮汕市"],
],
bool:true,
userName:"",
obj:{
id:99
}
}
},
// computed计算属性
// 规则:
// 1.使用已有的属性来计算不存在的属性
// 2.默认调用一次get
// 3.简写形式(函数)没有set方法,如果需要更改值必须使用对象写法,不能使用函数
// 4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})
computed:{
info(){
return this.bool?"炎热":"凉爽";
},
// abc:{
// get(){
// console.log("触发了get");
// return 2;
// },
// set(value){
// console.log("触发了set");
// console.log(value);
// }
// },
abc(){
console.log("触发了get");
return 1;
}
},
// watch监听属性
// 规则
// 1.监听已有的属性
// 2.immediate设置为true默认触发一次,false不会默认触发
// 3.handler(新值,旧值)函数,当监听值发生改变时就会触发handler函数
// 4.写法:第一种Vue实例中,第二种实例化vm.$watch("监听的属性",{})
// 5.watch默认监听一层,需要监听多级如对象中的值,需要添加深度监听deep:true
// 6.简写,只有handler函数,才可以简写。写法:监听的属性名(新值,旧值){}
watch:{
bool:{
immediate:false,
handler(newValue,oldValue){
console.log(newValue);
console.log(oldValue);
console.log(this);
if(newValue==true){
this.userName = "张三";
this.obj.id = 100;
}else{
this.userName = "李四";
this.obj.id = 99;
}
}
},
// obj:{
// immediate:false,
// deep:true,
// handler(newValue,oldValue){
// console.log(newValue);
// console.log(oldValue);
// }
// },
// bool(newValue,oldValue){
// console.log(newValue);
// console.log(oldValue);
// console.log(this);
// }
},
directives:{
},
methods: {
func(){
this.bool = !this.bool;
}
},
})
// vm.$watch("userName",{
// immediate:true,
// handler(newValue,oldValue){
// console.log("---------------------");
// console.log(newValue);
// console.log(oldValue);
// console.log(this);
// }
// })
vm.$watch("userName",function(newValue,oldValue){
console.log("---------------------");
console.log(newValue);
console.log(oldValue);
console.log(this);
})
// computed与watch
// 1.computed能做到的watch都可以,watch能做到的computed不一定能
// 2.被Vue实例管理的函数最好都使用普通函数,不被Vue实例管理的函数最好都使用箭头函数,
</script>
</html>