计算属性及计算属性与methods的使用区别

1.计算属性的概念和简单使用

计算属性：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

1. 声明在computed配置项中，一个计算属性对应里面的一个函数
2. 使用起来和普通属性一样使用 { {计算属性名}}

示例：

<div id="app">
  {
  {sum}}
</div>

<script>
  let app = new Vue({
    
    el:'#app',
    data:{
    
      num1:10,
      num2:20
    },
    computed:{
    
      sum(){
    
        let rs = this.num1+this.num2
        return rs
      }
    }
  })
</script>

通过上面的代码，可以看出计算属性貌似和方法差不多，但实际上不是，计算属性会有一个缓存，效率高的多。

2.计算属性 vs methods 方法

1. computed 计算属性
   作用：封装了一段对于数据的处理，求得一个结果。
   语法：
   ① 写在 computed 配置项中
   ② 作为属性，直接使用 → this.计算属性 { { 计算属性 }}

计算属性的缓存特性 ，计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 然后 并再次缓存。

1. methods 方法
   作用：给实例提供一个方法，调用以处理业务逻辑。
   语法：
   ① 写在 methods 配置项中
   ② 作为方法，需要调用 → this.方法名( ) { { 方法名() }} @事件名=“方法名”

2. 一个小例子，带你搞懂计算属性和methods方法

<div id="app">
    <h2>methods======={
  {getSum()}}</h2>
    <h3>computed======={
  {sum}}</h3>
    <p>computed======={
  {sum}}</p>
    <span>methods======={
  {getSum()}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
    
        el:'#app',
        data:{
    
            num1:0,
            num2:3,
        },
        computed:{
    
            sum(){
    
                let rs = this.num1 + this.num2
                console.log("Sum()-----computed")
                return rs
            }
        },
        methods:{
    
            getSum(){
    
                let rs = this.num1 + this.num2
                console.log("getSum()-----methods")
                return rs 
            }
        }
    })
</script>

tips:计算属性使用了两次只在初始化调用了一次，methods方法使用两次调用两次。

计算属性具有缓存的特性，一次计算可以多次使用，而methods方法不是，调用一次便是一次。
计算属性用于对数据的处理，求得一个结果。methods方法主要是用来处理业务逻辑体。