计算属性
计算属性实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例_计算属性实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
计算属性
1.定义:要用的属性不存在,要通过已有属性计算得来
2.原理:底层借助了Object.defineproperty方法提供得getter和setter
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去相应修改,且set中要引起计算时依赖的数据
-->
<!-- 准备好一个容器 -->
<div id="root">
姓:<input type="text" v-model="firstName"><br/><br/>
名:<input type="text" v-model="lastName"><br/><br/>
全名:<span>{{fullName}}</span>
<!-- 插值里面写语法/(函数):改一次调用一次 -->
</div>
</body>
<script type="text/javascript">
// 创建一个实例
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
// 计算属性和属性是分开的
computed:{
fullName:{
//get有什么用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
//值得注意的是,计算属性往Vue身上放的时候,会自动调用get,拿到get的返回值,再放在vm身上
get(){
console.log('get被调用了')
return this.firstName+'-'+this.lastName //this:Vue
},
//set什么时候调用?当fullName被修改时。
set(value){
console.log('set',value)
const arr=value.split('-')
this.firstName=arr[0]
this.lastName=arr[1]
}
}
}
})
</script>
</html>
计算属性简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例_计算属性实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName"><br/><br/>
名:<input type="text" v-model="lastName"><br/><br/>
全名:<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
//完整写法
// fullName:{
// get(){
// console.log('get被调用了')
// return this.firstName+'-'+this.lastName //this:Vue
// },
// set(value){
// console.log('set',value)
// const arr=value.split('-')
// this.firstName=arr[0]
// this.lastName=arr[1]
// }
// }
fullName(){
//简写:只考虑读取不考虑修改
console.log('get被调用了')
return this.firstName+'-'+this.lastName
}
}
})
</script>
</html>
天气案例(点击按钮天气发生变化)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 -->
<!-- <button @click="isHot=!isHot">切换天气</button> -->
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot=!this.isHot
}
},
})
</script>
</html>
天气案例–监视属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气案例_监视属性</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
监视属性watch:
1.当被监视的属性变化是,回调函数(handler)自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watvh监视
-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot=!this.isHot
}
},
// watch:{
// isHot:{
// immediate:true,//初始化时让handler调用一下
// //handler什么时候调用?当isHot发生改变时
// handler(newValue,oldValue){
// console.log('isHot被修改了',newValue,oldValue)
// }
// }
// }
})
vm.$watch('isHot',{
immediate:true,//初始化时让handler调用一下
//handler什么时候调用?当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
</script>
</html>
深度检测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气案例_监视属性</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
深度监视:
(1).Vue中的watch默认补检测对象内部值的改变(一层)。
(2).配置deep:true可以检测对象内部值改变(多层)。
备注:
(1).Vue自身可以检测对象内部值改变,但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构,决定是否采用深度监视。
-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr/>
<h3>a的值是:{{number.a}}</h3>
<button @click="number.a++">点我让a+1</button>
<hr/>
<h3>b的值是:{{number.a}}</h3>
<button @click="number.b++">点我让b+1</button>
<button @click="number={a:0,b:0}">点我让number改变</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
isHot:true,
number:{
a:1,
b:1
},
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
}
},
methods: {
changeWeather(){
this.isHot=!this.isHot
}
},
// Vue默认可以检测到多层级数据,但是Vue为程序员提供的watch默认是不行的
watch:{
isHot:{
//immediate:true,//初始化时让handler调用一下
//handler什么时候调用?当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//监视多级结构中所有属性的变化
// 'number.a':{
// handler(newValue,oldValue){
// console.log('a被修改了',newValue,oldValue)
// }
// }
number:{
deep:true,
handler(){
console.log('number改变了')
}
}
}
})
</script>
</html>