Vue3 and Vue2 all-round comparison

Optional APIs and Combined APIs


First implement the same logic (click to switch page data) to see their direct difference

Option API





Combined APIs






setup syntactic sugar





Summarize:
Option Api manages data and methods including the following watch, computed, etc. separately, while combined Api puts related logic together (similar to native js development).
The setup syntactic sugar can make variable methods no longer need to write return, and subsequent components and even custom instructions can be automatically obtained in our template.
ref and reactive
We all know that in the optional API, the data in the data function is responsive, and the page will change with the data in the data. What if there is no data function in the combined API? So in order to solve this problem Vue3 introduced ref and reactive functions to make variables responsive data

Combined APIs




setup syntactic sugar



Summarize:
When using ref, you need to add .value when taking the value in js.
reactive is more recommended to define complex data types ref is more recommended to define basic types
The life cycle
The following table contains: Differences in Vue2 and Vue3 lifecycles

Vue2 (option API) Vue3 (setup) description beforeCreate-before instance creation created-after instance creation beforeMountonBeforeMountDOM mount call mountedonMountedDOM mount complete call beforeUpdateonBeforeUpdate data update call updatedonUpdated call after data update beforeDestroyonBeforeUnmount call destroy component before destruction destroy complete call
Give an example of a commonly used onMounted

Option API




Combined APIs




setup syntactic sugar




It can be seen from the above that the combined API in Vue3 uses the hook function to introduce the life cycle; in fact, not only the life cycle is introduced by the hook function, such as watch, computed, routing guard, etc. are all implemented by the hook function
Summarize
Lifecycles in Vue3 have been tweaked a bit relative to Vue2, with some naming changes and the removal of beforeCreate and created, which are no longer needed since setup runs around the beforeCreate and created lifecycle hooks.
The life cycle is introduced by the hook function
watch and computed

Options API





Combined APIs





setup syntactic sugar




In addition to watch, Vue3 also introduced the side effect monitoring function watchEffect. After using it, I found that it is very similar to useEffect in React, except that watchEffect does not need to pass in dependencies.
So what is watchEffect?
watchEffect immediately executes a function passed in, while reactively tracking its dependencies and re-running the function when its dependencies change.
For example this code



First, when the page is entered, the function in watchEffect will be executed to print out: 0. As the timer runs, watchEffect will monitor the change of dependent data and the callback function will be executed every second.
Summarize
The data on which computed and watch depend must be reactive. Vue3 introduces watchEffect, watchEffect is equivalent to merging watch's dependency source and callback function. When any responsive dependency you use is updated, the callback function will be re-executed. Unlike watch, the callback function of watchEffect will be executed immediately, that is ({ immediate: true })

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00