Vue3基础+代码语法+例子大全（二）——data property、methods、计算属性和侦听器

export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted` 是生命周期钩子，之后会讲到
  mounted() {
    // `this` 指向当前组件实例
    console.log(this.count) // => 1

    // 数据属性也可以被更改
    this.count = 2
  }
}

2、方法

要为组件添加方法，需要用到 methods 选项。它应该是一个包含所有方法的对象：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 在其他方法或是生命周期中也可以调用方法
    this.increment()
  }
}

Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。这确保了方法在作为事件监听器或回调函数时始终保持正确的 this 指向。在定义 methods 时应避免使用箭头函数，因为箭头函数的指向是静态的，这会阻止 Vue 绑定恰当的 this 指向。

这些 methods 和组件实例的其它所有 property 一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用:

<button @click="increment">{
  { count }}</button>

在上面的例子中，increment 方法会在 <button> 被点击时调用。

四、计算属性和侦听器

1、计算属性

（1）基本例子

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。例如：

<script>
export default{  //导出对象
  data(){  //data会默认进行解析
    return{
      message:"helloWorld",
    }
  }
};
</script>

<template>
  <div>
      <p>{
  {message}}</p>
      <!-- 翻转 -->
      <p>{
  {message.split('').reverse().join('')}}</p>
  </div>
</template>

使用计算属性来描述依赖响应式状态的复杂逻辑。这是重构后的示例：

<script>
export default{  //导出对象
  data(){  //data会默认进行解析
    return{
      message:"helloWorld",
    }
  },
  computed:{ //计算属性:只要依赖值不变，就不会重新计算
    reverseMsg:function(){
      return this.message.split('').reverse().join('')
    }
  }
};
</script>

<template>
  <div>
      <p>{
  {message}}</p>
      <!-- 翻转 -->
      <p>{
  {reverseMsg}}</p>
  </div>
</template>

所以，对于任何包含响应式数据的复杂逻辑，都应该使用计算属性。