Vue的computed和watch有什么区别？

1。computed简介Computed用于监控自己定义的变量。这个变量没有在data中声明，直接在computed中定义，可以直接在页面中使用。//{{msg}}的基本使用//计算属性computed:{msg:function(){returnthis.name}}在输入框中，改变name值时,msg也会变。这是因为computed监听了自己的属性msg，一旦发现name有变化，就会立即更新msg。注意：data中不能定义msg，否则会报错。1.1、获取和设置用法

data(){return{first:'Beauty',second:'姐姐'}},computed:{full:{get(){//需要读取当前属性值时执行回调函数，根据相关数据returnthis.first+''+this.second},set(val){//监听当前属性值的变化，当属性值发生变化时执行，更新相关属性数据letnames=val.split('')this.first=names[0]this.second=names[1]}}}get方法：当first和second发生变化时，会调用get方法更新full的值。set方法：当修改full的值时，会调用set方法，val为full的最新值。1.2.计算属性缓存我们也可以通过方法拼接数据来达到这个效果。代码如下。

data(){return{first:'美女',second:'姐姐'}},methods:{full(){returnthis.first+''+this.second}}，在一个页面中，数据可能会被多次使用，我们将computed和method这两个方法一起实现，在页面中多次引用这个数据，试试下面的效果。data(){return{first:'beauty',second:'sister'}},computed:{full:function(){console.log('computed')returnthis.first+''+this.second}},methods:{fullt(){console.log('method')returnthis.first+''+this.second}}结果操作是：根据结果，我们不难发现，根据该方法得到的数据，使用几次后需要重新计算几次，但是计算出来的属性不是，而是基于缓存的基于它们的响应式依赖项，并且将在以后依赖属性的值发生变化时重新计算。由于它的计算量较少，因此性能较高。2.watch介绍watch是监控vue实例上的数据变化。通俗地说，就是检测data中声明的数据。不仅可以监视简单数据，还可以监视对象或对象属性。Demo1：监控简单数据
data(){return{first:'beauty',}},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){控制台.log('newVal',newVal)console.log('oldVal',oldVal)},deep:true,}}，修改per.name时发现newVal和oldVal的值相同，因为它们存储的指针指向同一个地方，所以深度监控虽然可以监控到对象的变化，但是无法监控是哪个属性发生了变化。Demo3：监听对象的单个属性//方法一：直接引用对象的属性data(){return{per:{name:'倩倩',age:'18'}}},观看:{'per.name':function(newVal,oldVal){console.log('newVal->',newVal)console.log('oldVal->',oldVal)}}，也可以使用computed作为中间转换，如下：//方法二：使用computeddata(){return{per:{name:'倩倩',age:'18'}}},watch:{perName(){console.log('namechanged')}},computed:{perName:function(){returnthis.per.name}},Demo4:监听值props组件传递的props:{mm:String},//不要使用immediatewatch:{mm(newV,oldV){console.log('newV',newV)console.log('oldV',oldV)}}//使用immediatewatch:{mm:{immediate:true,handler(newV,oldV){console.log('newV',newV)console.log('oldV',oldV)}}不使用immediate时，当第一次加载页面，手表监测到的mm打印的不是e执行。使用立即数时，结果也会在第一次加载时打印出来：newV11oldVundefined。immediate的主要作用是在组件加载完成后立即触发回调函数。3.两者的区别3.1．对于computed监控的数据，数据中没有声明computed不支持异步操作。当computed有异步操作时，无法监听到数据的变化。Computed有缓存，页面重新渲染。返回之前的计算结果，不再重新计算。如果一个属性是由其他属性计算的，则该属性依赖于其他属性。一般计算属性值是函数时使用computedcomputed，默认使用get方法。如果属性值是属性值，属性有get和set方法，当数据发生变化时会调用set方法。computed:{//属性值为函数perName:function(){returnthis.per.name},//属性值为属性值full:{get(){},set(val){}}},3.2、watch监听的数据必须在data中声明或者props中的data支持不缓存的异步操作。当页面重新渲染时，即使值没有改变也会执行。当一个属性值发生变化时，需要执行相应的操作来监控数据的变化。,其他操作都会被触发，该函数有两个参数：immediate：组件加载立即触发回调函数deep：深度监控，主要针对复杂数据，比如监控对象时，添加深度监控，任何属性值变化都会触发。注意：对象添加深度监控后，输出的新旧值是一样的。当computed页面重新渲染时，不会重新计算，但是watch会重新计算，所以computed的性能更高。4.应用场景当需要进行数值计算，依赖其他数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次取到一个值都重新计算。当你需要在数据发生变化时执行异步操作或昂贵的操作时，应该使用watch，computed不支持异步。如果需要限制操作频率，可以使用computed作为中间状态。