06~vue中data选项以及计算属性和方法的区别

data选项

data 选项是一个函数, vue会在创建新组建实例的过程中调用此函数; 它返回一个对象。

该对象的任何顶级propery会直接通过组件实例暴露出来,方便模板访问。

这些实例propery仅在实例首次创建时被添加, 使用的时候, 你要确保他们都在data函数返回的对象中, 必要时, 要对尚未提供所需值的property使用0、null、underfined或其他占位的值。

data () { 
    return {
      age: 0, //当前后端没有返回age的值, 先用0占位,定义一个初始值     
      message:'helloworld'
    }
  },

methods方法选项

methods选项, 给组件实例添加方法, 它是一个包含所需方法的对象

vue自动为methods绑定this, 以便于它始终指向组件实例; 这将确保方法在用作事件监听或回调时保证正确的 this 指向;

在定义methods时要 避免使用箭头函数 , 因为这会阻止vue绑定恰当的this指向, 箭头函数的指向是静态的

methods和组件实例的其它所有的propery一样可以在组件的模板中被访问; 在模板中, 他们通常被当做事件监听使用

methods: { 
   increment:function(){
       // 利用this拿到vue的age属性值
       this.age++
   },
   reverseMessage:function(){
      console.log('methods调用次数')
      return this.message.split('').reverse().join('')
    },
  },

computed计算属性选项

对于任何包含响应式数据的复杂逻辑, 我们都应该使用计算属性

计算属性可以直接当做一个属性来使用, 我们可以像普通属性一样将数据绑定到模版中的计算属性

只要依赖值不变, 那么就不会重新计算, 下面的例子中, 只要message不变, 就不会重新计算

计算属性有个缓存, 只要依赖值不变, 第二次调用的就是缓存的结果

计算属性将基于他们的响应依赖关系缓存, 可以大大提高性能

computed:{
    /**
     * 翻转字符串, 后面的函数计算出结果之后, 复制给reverseMsg, 只要依赖计算的message不改变, 
     * reverseMsg的值就不会重新计算
     */
    reverseMsg:function(){
      console.log('计算属性调用')
      return this.message.split('').reverse().join('')
    }
  }

methods和computed区别

• methods使用几次就要被调用几次
• computed它有缓存, 只要依赖值不变, 第二次调用都是缓存结果, 不管被调用几次, 它都不会重新计算, 可以大大提高性能

demo

<script>
export default {
  /**
   * data 选项是一个函数, vue会在创建新组建实例的过程中调用此函数; 它返回一个对象。
   * 该对象的任何顶级propery会直接通过组件实例暴露出来,方便模板访问。
   * 
   * 这些实例propery仅在实例首次创建时被添加, 使用的时候, 你要确保他们都在data函数
   * 返回的对象中, 必要时, 要对尚未提供所需值的property使用0、null、underfined或
   * 其他占位的值。
   */
  data () { 
    return {
      age: 0, //当前后端没有返回age的值, 先用0占位,定义一个初始值     
      message:'helloworld'
    }
  },
  /**
   * methods选项, 给组件实例添加方法, 它是一个包含所需方法的对象
   * 
   * vue自动为methods绑定this, 以便于它始终指向组件实例; 这将确保方法在用作事件监听
   * 或回调时保证正确的 this 指向;
   * 
   * 在定义methods时要 避免使用箭头函数 , 因为这会阻止vue绑定恰当的this指向, 箭头函数的
   * 指向是静态的
   * 
   * methods和组件实例的其它所有的propery一样可以在组件的模板中被访问; 在模板中, 他们通常
   * 被当做事件监听使用
   */
  methods: { 
   increment:function(){
       // 利用this拿到vue的age属性值
       this.age++
   },
   reverseMessage:function(){
      console.log('methods调用次数')
      return this.message.split('').reverse().join('')
    },
  },
  /**
   * 计算属性
   * 对于任何包含响应式数据的复杂逻辑, 我们都应该使用计算属性
   * 计算属性可以直接当做一个属性来使用, 我们可以像普通属性一样将数据绑定到模版中的计算属性
   * 
   * 只要依赖值不变, 那么就不会重新计算, 下面的例子中, 只要message不变, 就不会重新计算
   * 计算属性有个缓存, 只要依赖值不变, 第二次调用的就是缓存的结果
   * 
   * 计算属性将基于他们的响应依赖关系缓存, 可以大大提高性能
   */
  computed:{
    /**
     * 翻转字符串, 后面的函数计算出结果之后, 复制给reverseMsg, 只要依赖计算的message不改变, 
     * reverseMsg的值就不会重新计算
     */
    reverseMsg:function(){
      console.log('计算属性调用')
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
    <p>年龄: {{ age }}</p>
    <p><button @click="increment">点我+1</button></p>
    <p><button @click="this.age--">点我-1</button></p>    
    <p>{{ message }}</p>
    <!-- 
      翻转message
      如果翻转的地方非常多, 模版就会很臃肿, 计算属性就是为了解决这样一个问题, 避免模板
      放入太多逻辑, 之后维护起来很麻烦

      对于任何包含响应式数据的复杂逻辑, 我们都应该使用计算属性
     -->

     <!-- 第一种: js表达式翻转字符串,总共会计算2次 -->
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>

    <!-- 直接把计算属性 reverseMsg 当做一个属性来使用 -->

    <!-- 第二种computed计算属性翻转字符串,虽然调用2次, 但只会计算1次,效果更高  -->
    <p>{{reverseMsg}}</p>
    <p>{{reverseMsg}}</p>

    <!-- 第三种,使用methods中方法翻转字符串,调用2次, 计算2次 -->
    <p>{{reverseMessage()}}</p>
    <p>{{reverseMessage()}}</p>

    <button @click="message='你好呀'">改变message</button>

  </div>
</template>

<style>

</style>