多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# ## **一.computed和watch** computed计算属性顾名思义就是通过其他变量计算得来的另一个属性,计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要它们的响应式数据没有发生改变,多次访问 这个数据 计算属性会立即返回之前的计算结果,而不必再次执行函数。**(需要有return,主要return中的依赖不会发生改变,不会二次执行computed,有缓存机制)** watch侦听器是侦听一个特定的值,当该值变化时执行特定的函数。例如分页组件中,我们可以监听当前页码,当页码变化时执行对应的获取数据的函数。 >***watch更擅长一对多***:就是主要监听一个可以影响多个数据的数据 **computed擅长多对一**:主要监听多个数据影响一个数据的数据,一定要reture ***** ## **二.computed和methods** **computed是计算属性,methods是方法,都可以实现对 data 中的数据加工后再输出。** 不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 没有发生改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于methods ,只要发生重新渲染,methods 调用总会执行该函数。 当有一个性能开销比较大的的计算属性 A ,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ,这时候,我们就需要缓存。也就是使用 computed 而不是 methods。但对于每次都需要进行重新计算的属性,我们最好使用 methods。 ***** ## **三.什么情况下分别使用computed、watch、methods** (1)数据量大,需要缓存的时候用computed;每次确实需要重新加载,不需要缓存时用methods。 (2)尽量用computed计算属性来监视数据的变化,因为它本身就这个特性,用watch没有computed“自动”,手动设置使代码变复杂。 (3)虽然计算属性在大多数情况下是非常适合的,但是在有些情况下我们需要自定义一个watcher,在数据变化时来执行异步操作,这时watch是非常有用的。 ***** methods是通过事件驱动来执行函数的是被动的 watch、computed是当监听的数据发生变化时主动执行这个函数 watch,可监听同一属性值前后改变的值变化 (可监听数组,对象,字符串)