vue computed和watch的区别

conputed

原理

  1. computed计算属性,依赖一个值的变化而变化且具有缓存作用,computed在vue内部维护了一个dirty属性,默认为true
  2. 当取值的时候dirty为true,执行用户的方法,且将值缓存起来吧dirty设为false
  3. 再次取值的时候判断dirty,dirty为false的时候直接从缓存里面取
  4. 当依赖的数据发生改变时 将dirty修改为true,下次用到computed时会重新调用用户的方法
  5. 每一个计算属性都会创建一个watcher,计算属性里面的watcher不会立即执行lazy字段true
  6. 通过object.defineProperty将计算属性定义到实例上面去
  7. 当用户取值时会会调用getter方法会计算相应的watcher,如果dirty为true在求值
  8. 如果依赖的值没有发生变化则取缓存

watch

监听值的变换,当值发生改变的时候则调用watch里的方法

区别

  1. computed具有缓存作用,性能消耗低
  2. computed不支持异步操作
  3. computed可以简化模板中的表达式,不推荐在模板中写大量的逻辑表达式不利代码后期维护

你可能感兴趣的:(前端葵花宝典,vue.js,前端,javascript)