vue中watch和computed的区别

好久没更新了，不知道你们想我了没有，今天重点来谈谈vue中computed和watch

1、先来谈谈computed

• 是具有缓存特性的：缓存通俗的意思可以说是记录在一个仓库，如果没有特定的情况不会发生变化和清空，只有在依赖数据发生变化时才会更新。
• 无法支持异步
• 当一个数值是一对多时，一般使用computed
• 默认set方法，可以手动写set方法来设定修改数据的方法

一起看看computed的源码是如何实现的

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

//这里初始化
stateMixin(Vue)

在stateMixin方法里会有一个方法调用initState

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

在这里调用初始化computed方法

//调用Watcher 为当前的computed 属性设置一个Watcher
watchers[key] = new Watcher(
        vm,
        lazy:true
      )

然后查询是否有重复的属性

if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    } else if (process.env.NODE_ENV !== 'production') {
      if (key in vm.$data) {
        warn(`The computed property "${key}" is already defined in data.`, vm)
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(`The computed property "${key}" is already defined as a prop.`, vm)
      }
    }

在defindeComputed下的源码简化完就是调用createComputedGetter（key)

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
    //如果当前的dirty属性是true，表示属性值脏了，则重新计算属性，并设置dirty为false
      if (watcher.dirty) {
        watcher.evaluate()
      }
      if (Dep.target) {
       
        watcher.depend()
      }
      return watcher.value
    }
  }
}

下面来说说watch原理

• 写法

list:function(newVal,oldVal){

    dosomething...
}
list:{
    handler(newVal,oldVal){
         dosomething...
    },
    deep:true,//开启深度监听
    immediate:true,//是否在第一次绑定时立即运行，否则只会在数据又变化的时候运行
    
}

• watch不支持缓存
• watch支持异步请求
• 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数