全面分析 Vue 的 computed 和 watch 的区别

}

}

get 方法：first 和 second 改变时，会调用 get 方法，更新 full 的值。

set 方法：修改 full 的值时，会调用 set 方法，val 是 full 的最新值。

1.2、计算属性缓存

我们通过方法，拼接数据，也可以实现该效果，代码如下。

{{ full() }}

data(){

return{

first:‘美女’,

second:‘姐姐’

}

},

methods:{

full(){

return this.first + ’ ’ + this.second

}

},

一个页面内，数据有可能多次使用，我们把 computed 和 method 两个方法放一起实现，并把这个数据在页面内多次引用，试看以下效果。

computed计算值：

{{full}} {{full}} {{full}} {{full}}

methods计算值：

{{fullt}} {{fullt}} {{fullt}} {{ 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 fullt}}

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介绍

---

watch 是监测 Vue 实例上的数据变动，通俗地讲，就是检测 data 内声明的数据。不仅可以监测简单数据，还可以监测对象或对象属性。

Demo1：监测简单数据

data(){

return{

first:‘美女’,

}

},

watch:{

first( newVal , oldVal ){

console.log(‘newVal’,newVal) // first 的最新值

console.log(‘oldVal’,oldVal) // first上一个值

}

},

// 修改 first的值的时候，立马会打印最新值

Demo2：监测对象

监听对象的时候，需要使用深度监听。

data(){

return{

per:{

name:‘倩倩’,

age:‘18’

}

}

},

watch:{

per:{

handler(oldVal,newVal){

console.log(‘newVal’,newVal)

console.log(‘oldVal’,oldVal)

},

deep:true,

}

},

修改 per.name 的时候，发现 newVal 和 oldVal 的值是一样的，是因为他们存储的指针指向的是同一个地方，所以深度监听虽然可以监听到对象的变化，但是无法监听到具体的是哪个属性发生变化了。

Demo3：监听对象的单个属性

// 方法1：直接引用对象的属性

data(){

return{

per:{

name:‘倩倩’,

age:‘18’

}

}

},

watch:{

‘per.name’:function(newVal,oldVal){

console.log(‘newVal->’,newVal)

console.log(‘oldVal->’,oldVal)

}

},

也可以借助 computed 作为中间转换，如下：

// 方法2：借助computed

data(){

return{

per:{

name:‘倩倩’,

age:‘18’

}

}

},

watch:{

perName(){

console.log(‘name改变了’)

}

},

computed:{

perName:function(){

return this.per.name

}

},

Demo4：监听 props 组件传过来的值

props:{

mm:String