客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
一、computed介绍
//基础使用
{{msg}}
<input v-model="name" />
//计算属性
computed:{
msg:function(){
return this.name
}
}
在输入框中，改变 注意： 1.1、get 和 set 用法
<input v-model="full" ><br>
<input v-model="first" > <br>
<input v-model="second" >
data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{
full:{
get(){ //回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
return this.first + ' ' + this.second
},
set(val){ //监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
let names = val.split(' ')
this.first = names[0]
this.second = names[1]
}
}
}
get 方法： set 方法：修改 1.2、计算属性缓存我们通过方法，拼接数据，也可以实现该效果，代码如下。
<div> {{ full() }} </div>
data(){
return{
first:'美女',
second:'姐姐'
}
},
methods:{
full(){
return this.first + ' ' + this.second
}
},
一个页面内，数据有可能多次使用，我们把
<div>
computed计算值：
{{full}} {{full}} {{full}} {{full}}
</div>
<div>
methods计算值：
{{fullt}} {{fullt}} {{fullt}} {{fullt}}
</div>
data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{
full:function(){
console.log('computed')
return this.first + ' ' + this.second
}
},
methods:{
fullt(){
console.log('方法')
return this.first + ' ' + this.second
}
}
运行结果为：
根据结果，我们不难发现，根据方法获取到的数据，使用几次就需要重新计算几次，但计算属性不是，而是基于它们的响应式依赖进行缓存的，之后依赖属性值发生改变的时候，才会重新计算。由于它计算次数少，所以性能更高些。 二、watch介绍
Demo1：监测简单数据
<input v-model="first" > <br>
data(){
return{
first:'美女',
}
},
watch:{
first( newVal , oldVal ){
console.log('newVal',newVal) // first 的最新值
console.log('oldVal',oldVal) // first上一个值
}
},
// 修改 first的值的时候，立马会打印最新值
Demo2：监测对象 监听对象的时候，需要使用深度监听。
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
per:{
handler(oldVal,newVal){
console.log('newVal',newVal)
console.log('oldVal',oldVal)
},
deep:true,
}
},
修改 Demo3：监听对象的单个属性
// 方法1：直接引用对象的属性
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
'per.name':function(newVal,oldVal){
console.log('newVal->',newVal)
console.log('oldVal->',oldVal)
}
},
也可以借助
// 方法2：借助computed
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
perName(){
console.log('name改变了')
}
},
computed:{
perName:function(){
return this.per.name
}
},
Demo4：监听
props:{
mm:String
},
//不使用 immediate
watch:{
mm(newV,oldV){
console.log('newV',newV)
console.log('oldV',oldV)
}
}
//使用 immediate
watch:{
mm:{
immediate:true,
handler(newV,oldV){
console.log('newV',newV)
console.log('oldV',oldV)
}
}
不使用 使用
三、两者区别3.1、对于 computed
computed:{
//属性值为函数
perName:function(){
return this.per.name
},
//属性值为属性值
full:{
get(){ },
set(val){ }
}
},
3.2、对于 watch
四、应用场景
|
请发表评论