1. computed 的特点和用法
特点:
(1)支持缓存:默认走缓存,多次调用,只会执行一次计算。只有依赖的数据发生改变,才会重新计算;
(2)不支持异步,如果有异步操作,无法监听
(3)属性值为函数,默认使用get方法,当数据改变时,会调用set方法
(4)主要解决模版中放入过多的逻辑导致不好维护的问题
computed: { crontabValueString: function() { console.log(555) // 多次调用,只会执行一次 let str = this.queryParams.memberName return str; }, },
2. watch 的特点和用法
特点:
(1)不支持缓存:只要数据发生变化,就会触发相应的操作;
(2)支持异步监听
(3)接收两个参数,第一个是最新值,第二个是之前的值
(4)监听 data 或者 props 的数据,发生变化时会触发操作,还有两个其他参数:
deep:默认false,深度监听,发现数据内部变化,在复杂的数据内部使用,默认false无法监听到数组和对象内部的变化,为true时,能监听数据变化,但是参数新值和旧值都是新值
immediate:默认false,初始化时执行回调函数
watch: { 'queryParams.memberName': { // 监听的数据字段 handler: (n,o) => { // 数据改变调用的事件 console.log('-----') console.log('n::::',n) console.log('o::::',o) }, deep: false, // 深度监听 immediate: false // 初始化立即执行 } }
3. 区别总结
computed计算属性,他依赖其他属性值,有缓存,只有依赖的值发生变化才会去重新计算,但是不能异步
watch监听,监听数据的变化,无缓存,数据变化就会执行回调,可以异步,默认false无法监听到数组和对象内部的变化,为true时,能监听数据变化,但是参数新值和旧值都是新值
标签:异步,缓存,false,computed,watch,监听 From: https://www.cnblogs.com/liql/p/16914454.html