[vue] computed 和 method
计算属性
计算属性只有在它的相关依赖发生改变时才会重新取值
Method
method每次渲染的时候都会被执行
举一个栗子
<template>
...
<div>
<p>计算属性: {{ getComputedTotal }}</p>
<p>计算属性: {{ getComputedTotal }}</p>
<p>方法: {{ getTotal() }}</p>
<p>方法: {{ getTotal() }}</p>
</div>
...
</template>
<script>
...
data() {
return {
a: 1,
b: 2,
c: 3
}
},
computed:{
getComputedTotal() {
console.log('触发computed')
return this.a + this.b + this.c
}
},
methods:{
getTotal() {
console.log('触发method')
return this.a + this.b + this.c
}
}
...
</script>
运行结果:
触发computed
触发method
触发method
可见，尽管计算属性在页面上'调用'了两次，实际上函数只执行了第一次，而方法每次都会执行
计算属性的好处
可以减少函数的执行，这对于巨大运算量的函数是一个很好的选择
什么场景下不能使用计算属性
我们需要获取一个运算结果，但是该结果是由非响应式属性组成时，比如 Date.now()
在这种场景下，如果我们采用计算属性，那么由于不是响应式依赖，我们得到的都是初始的结果，这不是我们所期望的
再举一个栗子
<template>
...
<div>
<p>计算属性时间: {{ getComputedTime }}</p>
<p>计算属性时间: {{ getComputedTime }}</p>
<p>计算属性时间: {{ getComputedTime }}</p>
<p v-if="showTime">几秒后, 计算属性时间: {{ getComputedTime }}</p>
<p>方法时间: {{ getTime() }}</p>
<p>方法时间: {{ getTime() }}</p>
<p>方法时间: {{ getTime() }}</p>
<p v-if="showTime">几秒后, 方法时间: {{ getTime() }}</p>
</div>
...
</template>
<script>
...
data() {
return {
showTime: false,
}
},
created () {
setTimeout(() => {
this.showTime = true
}, 5000)
},
computed:{
getComputedTime () {
return Date.now();
},
},
methods:{
getTime () {
return Date.now()
},
}
...
</script>
观察界面初次渲染结果
计算属性时间一直不变，每处都是初始值
方法时间，每处都是重新计算的结果(如果看不出可能是相隔时间太短…没关系，我们可以用下面的方式来观察)
由于我们设置了一个定时器来控制界面新的显示内容，因此过大约5s后再观察界面渲染的结果，我们发现
计算属性时间仍旧未改变，还是原来的值
方法时间，不仅新显示的内容重新计算了结果，而且之前的方法时间也都进行了重新计算(这是由于定时器触发了组件的重渲染, 因此所有的方法时间又都重新计算了一遍)
关于组件的重渲染，可以看一下另外一个栗子，有助于更加深刻的理解
...
<p>方法时间: {{ getTime() }}</p>
<button @click="setFullName">setFullName</button>
...
methods:{
getTime () {
console.log('触发method时间')
return Date.now()
},
setFullName () {
console.log('触发name改变')
this.fullName = 'John Doe'
}
}
点击setFullName按钮后，运行结果:
console: 触发name改变
console: 触发methond时间
很惊讶，获取时间的方法也被执行了(尽管我们触发的是改变名字的事件)；按照正常思路，大家肯定觉得，方法改变了哪一块，就应该重新渲染对应的那一块视图，而不应该将未改变的那块进行重渲染(时间)
但是, 查了官网之后，发现vue2.x并不是这样处理的，它的处理方式如下
在vue2.x中只要组件使用的众多状态中有一个发生变化，那么整个组件就要重新渲染
在这里vue做了优化：如果组件只有一个节点发送了变化，直接重新渲染整个组件的所有节点，会造成很大的性能浪费，因此vue使用了vnode，并对其进行缓存，在发生变化时，将上一次缓存的vnode和当前新创建的vnode进行对比，只更新发生变化的节点
也就是说会触发重渲染和重新计算，但是更新只是局部的更新(patch)，不知道这样大家能不能明白
vue2.x改成这种方式，主要是出于性能的考虑，如果将每个节点都绑定一个watcher确实能达到咋们预期的哪块改变就重新渲染哪块，但是这样的话，再编译阶段给每个节点绑定一个watcher是一种很大的浪费，尤其是在界面上有成千上万的节点时，因此vue2.x采用了较vue1.x更加粗粒度的监听方式，也就是组件级别，只要组件级别监听到数据改变，那么就重渲染整个组件，但是在重渲染组件时采用了虚拟dom来优化这个过程，将每次计算的结果进行缓存，然后对比前后的两次的计算结果，只对发生变化的节点进行更新
以上就是关于vue的计算属性和方法之间区别的分享，在写栗子的过程中我们还捎带研究了下vue2.x的渲染原理。
每一次的疑惑，都是我们接近真理的最好机会，希望我们能把握这样的机会，而不是白白地错过真理，共勉!
