vue中为什么方法要写在methods里面?

一、methods是什么？

首先先来段代码,我们在template中设定一个按钮,在点击按钮的时候打印

.<template>
  <div>
    <button @click="buttry">测试</button>
  </div>
</template>

<script>
export default {
    
    
  methods: {
    
    
    buttry() {
    
    
      console.log(this);
    },
  },
};
</script>
<style>
</style>

打印出来的结果表明:这个this是当前的单文件的组件实例,并可以拿到组件定义的成员,可以进行相关业务操作.

二、如果把方法写在data中会怎么样？

.<template>
  <div>
    <button @click="buttry">测试</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      buttry() {
    
    
        console.log(this);
      },
    };
  },
  //   methods: {
    
    
  //       buttry() {
    
    
  //         console.log(this);
  //       },
  //   },
};
</script>
<style>
</style>

得到的结果是null,是空值,代表无法取值,无法进行任何业务处理

总结:

1.不同调用模式this指向不一样
2.methods、data等就类似家里的柜子，不用的柜子盛放不同的物品，就代表每个柜子的功能不一样，但地位相同。
data：变量
methods：自定义变量
computed：计算属性
watch：监听器
directives:指令
filters:过滤器
3.只有methods里面才可以拿到组件,才可以进行业务处理