vue的【选项式api】 vs 【组合式api】

前言

伴随着新到的vue3，我们编写组件的书写方式也发生了变化。

除了底层的更新，编写方式的改变 或许才是我们最能直观感受到的。

其实就是vue3多了一种名为组合式api(composables api)的写法，相对应的式传统选项式api(options api)

组合式api简单来说就是使用setup方式编写组件

传统的 选项式api

来看看这种传统的写法：65行

<template>
  <div class="home" v-if="userInfo">
    <my-header/>
    用户详情：{{fullUname}},{{userInfo.age}}岁
  </div>
</template>
<script>
import MyHeader from '../components/my-header.vue';

export default {
  // 组件：公共头部
  components: { MyHeader },

  // 属性： 接受属性用户id
  props: {
    userId: {
      type: String,
      default: '2022-01-01'
    }
  },

  // 状态：用户信息
  data() {
    return {
      userInfo: null
    }
  },

  // 计算属性：给用户名加一个牛逼的前缀
  computed: {
    fullUname() {
      if(this.userInfo && this.userInfo.name){
        return '牛逼的' + this.userInfo.name;
      }
      return ''
    }
  },

  // 监听：用户id改变
  watch: {
    userId: {
      handler(newVal, oldVal) {
        console.log('用户id变化啦:'+newVal);
      },
      immediate: true
    }
  },

  // 方法：同步用户信息
  methods: {
    syncUserInfo(userId) {
      this.userInfo = {
        id: userId,
        name: '小明',
        age: 20
      };
    }
  },

  // 钩子：初始化
  mounted() {
    this.syncUserInfo(this.userId)
  }
}
</script>

先进的 组合式api

来看看这种先进的写法：48行

<template>
  <div class="home" v-if="userInfo">
    <my-header />
    用户详情：{{ fullUname }},{{ userInfo.age }}岁
  </div>
</template>
<script setup>// <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。
import { ref, onMounted, watch, computed } from 'vue';
import MyHeader from '../components/my-header.vue';

// 属性： 接受属性用户id
const props = defineProps({
  userId: {
    type: String,
    default: '2022-01-01'
  }
})

// 状态：用户信息
const userInfo = ref(null);

// 计算属性：给用户名加一个牛逼的前缀
const fullUname = computed(() => {
  if (userInfo.value && userInfo.value.name) {
    return '牛逼的' + userInfo.value.name;
  }
  return ''
})

// 监听：用户id改变
watch((newVal, oldVal) => {
  console.log('用户id变化啦:' + newVal);
}, { immediate: true })

// 方法：同步用户信息
const syncUserInfo = (userId) => {
  userInfo.value = {
    id: userId,
    name: '小明',
    age: 20
  };
}

// 钩子：初始化
onMounted(() => {
  syncUserInfo(props.userId)
})
</script>