[JavaScript知识库]Vue-计算属性

计算属性是继data,methods,watch之后的新成员

书写位置:

<script>
  export default {
    name: 'app',
    // 计算属性
    computed: {},
  };
</script>

计算属性的写法:

<script>
  export default {
      name: "app",
      data:function(){
          return {
              message:"hello world!"
          }
      }
      // 计算属性
      computed:{
      //让字符串反转
          reverseMessage:function(){
              return this.message.split('').reverse().join('')
          }
      }
  };
</script>

计算属性和方法的区别:
上述的案例也可以用methods来实现但二者区别在于:

• 计算属性
  当message改变时,reverseMessage计算属性会重新计算,然后返回计算结果,message不改变时,reverseMessage计算属性会返回缓存的值而不会重新计算
• 方法
  每次访问时,都会去执行方法体里的逻辑然后返回结果

总结: 计算属性避免了不必要的代码执行,性能更优