Vue - 计算属性computed & 监听器watch

448 阅读2分钟

计算属性computed与方法methods的区别

  computed,即计算属性,用于储存计算后的值,定义的时候是函数,但在template中调用时不可以圆括号调用,即,这个函数不得接受形参。

  也就是说methods与computed都用于定义函数,但区别是methods定义的函数可以在template以圆括号调用接收形参,computed定义的函数只能被template调用函数计算后的值。

  相对于methods可以通过定义函数处理各种事件监听以及在template中套入运算逻辑不同,template只能调用computed的计算结果而不能调用其中的计算逻辑。这样一来某些情况一些简单的运算处理就可以写在computed中从而使代码可以简洁一些。

  实质上methods返回的是一个处理数据的运算过程而computed返回的是一个处理数据过后的运算结果,也就是说computed返回的实质是一个因变量,它不能被主动赋值。

  综上所述,computed是有缓存的,经过computed逻辑计算的值会被储存在缓存里可重复利用,有利于节约性能;methods是没有缓存的,每次逻辑被调用都会重新计算,灵活性强。

computed的基本使用 - set和get

  computed中不仅可以写函数,还可以写对象,通过把computed中的对象拆分成get和set两个函数可以将父组件传入的props私有化,get负责获取数据,set负责设置数据。

  这里的privateX之所以只能篡改一次是因为button中的点击事件是以整个ownX为主体的,第一次点击时ownX的值实际上是get从父组件中得到的x值,第二次点击ownX依然要get父组件的x值,但父组件的x值是不变的,所以无论点击多少次得到的结果都是第一次点击的结果。

  computed这项功能现在看起来用处不大,但在VueX中这项功能将会发挥极大的作用。

监听器watch的作用

  watch是一个对象,里面所有属性都是函数,当这些函数的同名data变化时,函数即被触发。

  相当于watch有一个监控data变化的作用,并且可与data产生联动。

methods, computed, watch对比