1.computed(计算属性)
根据一个现有数据去生成一个新数据,并且这两个数据会永久的建立关系,还会建立缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值
<div id="app"> <p>计算属性fullName:{{fullName}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) </script>
需要注意的是,就算在data中没有直接声明出要计算的变量,也可以直接在computed中写入。
2.computed的缓存功能
<div id="app"> <h1>{{message}}</h1> <p class="test1">{{methodTest}}</p> <p class="test2-1">{{methodTest()}}</p> <p class="test2-2">{{methodTest()}}</p> <p class="test2-3">{{methodTest()}}</p> <p class="test3-1">{{computedTest}}</p> <p class="test3-2">{{computedTest}}</p> </div> <!--script部分--> let vm = new Vue({ el: '#app', data: { message: '我是消息,' }, methods: { methodTest() { return this.message + '现在我用的是methods' } }, computed: { computedTest() { return this.message + '现在我用的是computed' } } })
methods
定义的方法是以函数调用的形式来访问的,那么test2-1,test2-2,test2-3
是反复地将methodTest
方法运行了三遍,如果我们碰到一个场景,需要1000个methodTest的返回值
,那么毫无疑问,这势必造成大量的浪费
更恐怖的是,如果你更改了message的值,那么这1000个methodTest
方法每一个又会重新计算。。。。
computed依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值
如上例,在Vue实例化的时候,computed定义computedTest方法会做一次计算,返回一个值,在随后的代码编写中,只要computedTest方法
依赖的message数据
不发生改变,computedTest方法
是不会重新计算的,也就是说test3-1,test3-2
是直接拿到了返回值,而非是computedTest方法重新计算的结果。
这样的好处也是显而易见的,同样的,如果我们碰到一个场景,需要1000个computedTest的返回值
,那么毫无疑问,这相对于methods
而言,将大大地节约内存
哪怕你改变了message的值,computedTest
也只会计算一次而已