Beginner's guide for Vue3 syntax.

If you have started learning Vue or Vue3 you might have found different syntax on different blogs and videos. Today I'm gonna clear the air so next time you see any blog or video you don't confuse yourself. This blog will also help you find difference between Vue2 and Vue3 syntax.

Coming onto the topic Vue3 supports 3 types of syntax
Optional API, Compositional API and SFC. Now let's talk about them one by one.

1. Optional API

In simple word's it's Vue2 syntax where you can export default object from script tag and this object will contain different properties like data, props, computed, mounted, watch etc. Everything will run smoothly if you are running Vue2 code in Vue3, While there are some depreciations like filters but we will discuss them letter.
Most beautiful thing about this style is block design.

Pros

1. Block design.
2. Vue2 supported.
3. Use of data object is simple without ref or reactive;
4. Structured design. Order of properties like data, computed, methods is fixed.

Cons

1. Less reactive code.
2. Adding typescript is hard.
3. Less reusability, separation is difficult.

Here's an example code of Optional API or Vue2 code

<script>
import C from 'Component';
export default {
  props:['p'],
  emits:['e'],
  components:{'C'},
  data(){
    return { 'd':'0' };
  },
  watch:{ 
    p(val, oldVal){}, 
  },
  mounted(){ this.initialize() },
  //other hooks
  computed:{
    computedProperty(){ return this.d+this.p; }
  },
  methods:{
    initialize(){ this.$emit('e') }
  }
}
</script>

2. Compositional API

Compositional API is the real Vue3 code which eventually gets constructed in the end.
It replaces created hook with setup function and all other things can be defined inside the same. You can still define data outside setup or declare ref variable inside setup, which leads to lots of confusion, hence I will suggest to not use this design pattern and instead use it's syntatic sugar SFC.
It emphasise on functional design instead of block design.

Pros

1. Less compile time.
2. More reactivity.
3. More reusability.
4. Better typescript support.
5. Functional design

Cons

1. Difficult to understand. less easy then SFC format.
2. Unstructured code. multiple watch and multiple computed function can be arranged in any order.
3. Defining props and emits with typescript is difficult.

Here's an example of Compositional API

<script>
import C from 'Component';
import { defineComponent, reactive, watch, onMounted, computed } from 'vue';
//export default {} 
//is also supported.
export default defineComponent({
  props:['p'],
  emits:['e'],
  components:{'C'},
  setup(props, {attrs, emits, slots}){

    let data = reactive({ 'd':'0' });

    watch(props.p, (val, oldVal)=>{});

    onMounted(()=>{ initialize() });

    const computedProperty = computed(()=>{ 
       return data.d + props.p;
    });

    function initialize(){ emits('e') };

    return {data, computedProperty, initialize};
  }
});
</script>

3. SFC

SFC or Single file component syntax is syntactic sugar added on top of Compositional API or in other words it's Compositional API with less code. It is officially recommended way. The Official documentation dictates following advantages to do so:

• More succinct code with less boilerplate
• Ability to declare props and emitted events using pure TypeScript
• Better runtime performance (the template is compiled into a render function in the same scope, without an intermediate proxy)
• Better IDE type-inference performance (less work for the language server to extract types from code)

I also recommend the same, If you are beginner to Vue please only use SFC format, It's much closer to writing core js and easy to understand. Also Vue community in future will focus on promoting the same.

Pros

1. Less boilerplate or less code.
2. Better runtime performance.
3. Full typescript support.
4. Distributable design.
5. Compatible with Vapor mode.

Cons

1. Use of reactive properties is complex and difficult to understand.

Here's an example of SFC code

<script setup>
import C from 'Component';
import { reactive, watch, onMounted, computed } from 'vue';
//no component:{} declaration
//no defineComponent({})
//no setup function

const props = defineProps(['p']);

const emits = defineEmits(['e']);

const data = reactive({ 'd':'0'});

watch(props.p, (val, oldVal)=>{});

onMounted(()=>{ initialize() });

const computedProperty = computed(()=>{ 
  return data.d + props.p;
});

function initialize(){ emits('e') };

//no return
</script>

I hope you enjoyed reading this.
Please give your love and support to my Github open source repositories.

Thank You and Have Nice Day!