Vue3 Dep

Posted on  by admin
Vue3.0 pre-alpha version was officially released on October 5, 2019, followed by more than 500 PRs and 1000 commits over the next few months, and finally Vue3.0 alpha.1 was released on January 4, 2020.

the core code of Vue3.0 is basically complete, and the main work left so far is server-side rendering, which the Vue team is actively working on. The Vue team is also actively working on it.The responsive API code is basically stable and will not change much (the reactivity package in packages), so I will analyze the responsive principle of Vue3.0 from the source code.

Vue3.0 uses the setup function as the entry point for the entire component, uses the directly imported onXXX function to register lifecycle hooks, and uses the variables from the return in the page.

There are some changes in the whole writeup compared to Vue 2.0, so we won’t discuss the lifecycle code related to the component here (it belongs to the packages/runtime-core package).

The most important thing in responsive is the remaining 4 APIs.

ref and reactive are both methods to convert incoming parameters into responsive objects, the difference is that ref converts basic data types (string, number, bool, etc.) into responsive data, while reactive converts other data types into responsive data.

To ensure that the basic data is responsive, ref wraps the basic data in a layer, so in the code above, you need to use count.value to get the value of count, but in the template, it is automatically unwrapped (unwrap), so you can use count directly.

computed has the same role as vue2.0 and represents the computed property.

Penny Liu
11.6k