Vue中，计算属性computed和methods的区别
写在前面：
关键点：
计算属性
computed是有缓存的。
计算第一次结果后会存入缓存，第二次调用该计算属性computed的时候，他会先读取需要返回的结果是否发生改变，如果没有就直接返回缓存的结果，如果改变了才会从新计算。
应用场景小demo：
在内容拼接时，直接在html代码中书写mustache语法{
{ }}的时候，若内容较多，则会导致篇幅较大。因此可以通过创建methods中的方法或者创建computed中的属性来进行代码可读性优化。
代码如下：
<body>
<div id="app">
<!-- 1.直接拼接：语法过于繁琐 -->
<h2>{
{
firstName+' ' + lastName}}</h2>
<!-- 2.通过定义methods -->
<h2>{
{
getFullName()}}</h2>
<h2>{
{
getFullName()}}</h2> <!-- methods中的方法打印了4次 -->
<h2>{
{
getFullName()}}</h2>
<h2>{
{
getFullName()}}</h2>
<!-- 3.通过computed属性 -->
<h2>{
{
fullName}}</h2>
<h2>{
{
fullName}}</h2> <!-- computed打印了1次 -->
<h2>{
{
fullName}}</h2>
<h2>{
{
fullName}}</h2>
</div>
<script src="../JS/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'Kobe',
lastName:'Beyant'
},
methods:{
getFullName: function(){
console.log('调用的methods');
return this.firstName + ' ' + this.lastName;
}
},
computed:{
fullName: function(){
console.log('调用的computed');
return this.firstName + ' ' + this.lastName;
}
}
})
// 计算属性会做一次缓存， 如果内容没有改变，则这个缓存就不会改变，每次访问都是访问这个缓存
// 因此， 计算属性的性能 要好于 methods属性
</script>
</body>
执行结果：
说明：
计算属性会做一次缓存， 如果内容没有改变，则这个缓存就不会改变，每次访问都是访问这个缓存。
因此， 计算属性computed的性能 要好于 methods属性