使用computed_面试官：Vue中的 computed 和 watch的区别

computed

在Vue中，computed是一个计算属性， 类似于过滤器，对绑定到view的数据进行处理。

特点

• 虽然看上去像是个方法，但实际上是计算属性，使用时不需要使用()来取值
• 它会根据所依赖的数据动态显示新的计算结果，计算结果会被缓存，依赖的响应式属性不变，computed 就不会重新计算值

看一个经典案例：

<template>
  <div class="hello">
      {{fullName}}
  div>
template>

<script>export default {
  data() {return {firstName: '凡',lastName: "范"
    }
  },props: {msg: String
  },computed: {
    fullName() {return this.firstName + ' ' + this.lastName
    }
  }
}script>

watch

watch是一个观察的动作。

它用于观察Vue实例上的数据变动，当被观察的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。

示例1：监听简单数据类型

data(){
  return{
    username:"fanfan"
  }
},
watch:{
  first(newVal, oldVal){
    console.log(newVal, oldVal)
  }
},

示例2：监听复杂数据类型

data(){
  return{
    user:{
      name:"fanfan"
    }
  }
},
watch:{
  user:{
    handler(newUser,oldUser){
      console.log(newUser.name, name)
    },
    deep:true
  }
},

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

并且我们获取到handler中的两个对象值都是变化后的。此时使用字符串形式监听

实例3：监听对象单个属性

"user.name": {
    handler(newName, oldName) {
        console.log("user.name changed", newName, oldName);
    },
},

二者区别

使用上

• watch 中的函数是不需要调用的
• computed 使用时不需要加()
• computed 中的函数必须使用 return返回最终结果
• watch一个对象时， 键(key)是需要观察的表达式，值(value)是对应回调函数

缓存性

• computed 具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
• watch 无缓存性，页面重新渲染时值不变化也会执行

适用于什么场景

• computed : 当一个属性受多个属性影响的时候就需要使用computed。比如常见的：购物车商品结算时

• watch ：当一条数据影响多条数据的时候就需要用 watch, 当你需要在某个数据变化时做一些事情也选择 watch

开发中在不同的场景选择不同的方式，用反或者混用虽然可行，但都不是正确的用法。