conputed
原理
- computed计算属性,依赖一个值的变化而变化且具有缓存作用,computed在vue内部维护了一个dirty属性,默认为true
- 当取值的时候dirty为true,执行用户的方法,且将值缓存起来吧dirty设为false
- 再次取值的时候判断dirty,dirty为false的时候直接从缓存里面取
- 当依赖的数据发生改变时 将dirty修改为true,下次用到computed时会重新调用用户的方法
- 每一个计算属性都会创建一个watcher,计算属性里面的watcher不会立即执行lazy字段true
- 通过object.defineProperty将计算属性定义到实例上面去
- 当用户取值时会会调用getter方法会计算相应的watcher,如果dirty为true在求值
- 如果依赖的值没有发生变化则取缓存
watch
监听值的变换,当值发生改变的时候则调用watch里的方法
区别
- computed具有缓存作用,性能消耗低
- computed不支持异步操作
- computed可以简化模板中的表达式,不推荐在模板中写大量的逻辑表达式不利代码后期维护
