Vue的2种API风格了解这篇就够了

目录

1.选项式API

2. 组合式API

---

1.选项式API

在data中声明响应式对象

在methods中声明方法

在mounted中声明钩子函数

注意：在选项式API中的<script>标签中不能加入setup

示例格式为:

<script>
  export default{
    data() {
      return{
        message:"Hello Vue",
        count:0
      } 
    },
    methods: {
      increment :function() {
          this.count++;
      }
    },
    mounted(){
        
    }
  }
</script>
<template>
  <h2>{{message}}</h2>
</template>

2. 组合式API

使用组合式API的时候要script标签上加上setup标识，还需要导入ref用于接收一个内部值

基本使用格式示例：

<script setup>
  import { onMounted,ref } from 'vue';
  const message = ref('Hello Vue');
  const count = ref(0);

  function hello(){
   count.value++;
  }
  onMounted(()=>{
    
  })
</script>
<template>
  <h2>{{message}}</h2>
</template>