Shulou(Shulou.com)06/03 Report--

This article mainly explains the difference between vue3 and vue2 and the introduction of API usage of vue3. Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the difference between vue3 and vue2 and the introduction of API usage of vue3.

Catalogue

Preface

? Preparatory work

? vue3 usage

? Realize

Preface

Recently, due to my first formal project of vue3 + ts, it has entered the acceptance stage. Listening to you always talk about vue3 and vue3, I just want to see what the difference is between vue3 and vue2.

This paper mainly describes the API usage of vue3 and the simple implementation of a vue3. Let's feel the difference between vue3 and previous vue2. And simply take you to uncover a process of vue3 initialization in the source code.

? Preparatory work

To see what happens to the internal source code of vue3, first of all, just like the vue2 source code analysis, the next source code from github to the local source code.

The next step is to install dependencies:

Yarn-ignore-scripts

You may encounter an error that the node version is too low when you execute the command:

To resolve this issue, you can upgrade your own version of node or ignore the engine.

You can set it if you choose to ignore it

Yarn config set-ignore-engines true

Then perform a dependent installation.

After the dependency installation is complete, compile and package to generate the vuejs file:

Yarn dev

If you need to debug, you can create a test file under the packages\ vue\ examples file. Referencing the packaged vue file, you can apply packages\ vue\ dist\ vue.global.js.

? vue3 usage

I won't elaborate on the features of vue3. As far as the use of vue3 is concerned, it is more inclined to functional programming. By exposing the createApp () API in Vue, an application instance is created as a factory function. Compared with the new Vue instance of vue2, it is more appropriate.

In the source file, we create a new init.html file.

{{name}} const {createApp} = Vue const app1 = createApp ({data () {return {name: 'clying'}}, setup () {return {name:' deng'}) .mount ('# app')

From the above example, we can see that vue3 supports both Composition API and Options API, and both can be used at the same time.

However, we can see that in both data and setup, I use a name variable for assignment. So which one will be displayed on the page?

three! two! one! The answer is:

You can clearly see that setup has a higher priority in composition-api.

Of course, you can also see it in packages\ runtime-core\ src\ componentPublicInstance.ts in the source code. Through switch, you can first determine whether the variable in setup exists or not, and then determine the variable in data. So variables in setup take precedence over variables in data.

? Realize

From the above usage, we can know that a Vue variable is exposed in vue3, and there are internal methods such as createApp, reactive, and so on.

Here, let's first implement the initialization framework of vue3. As far as createApp is concerned, it receives the parameters passed in by the user: data (), setup (), and so on, and finally mounts the mount on the instance. So some parameters options will be received in createApp, and there will be mount methods internally.

Const Vue = {createApp (options) {return {mount (selector) {/ / parse, get render, mount}

The host element is obtained through selector in mount.

The next step is to compile the template, because after compiling template to AST, you still have to convert it to the render function. Here we simplify the operation and return a render directly at compile time.

Mount (selector) {/ / parse, get render, mount const parent = document.querySelector (selector) console.log (parent); if (! options.render) {/ / compile returns render options.render = this.compileToFunction (parent [XSS _ clean])}}, compileToFunction (template) {return function render () {const h = document.createElement ('div') h.textContent = this.name return h}}

Once you have the render, execute it, add it to the host element, and delete the old node.

When executing render, we need to pay attention to its this point. If you bind it to data, it will show the name in data.

Mount (selector) {/ / parse, get render, mount const parent = document.querySelector (selector) console.log (parent); if (! options.render) {/ / compile returns render options.render = this.compileToFunction (parent [XSS _ clean])} / / execute render const el = options.render.call (options.data ()) parent [XSS _ clean] =''parent.appendChild (el)}

You can see that clying is displayed on the page. On the other hand, if you bind options.setup (), what appears on the page is deng.

For the use of vue3, we know that setup takes precedence over data. Then we can use the proxy, ah, mix the attribute variables of the two, through the way of the proxy, and give priority to setup. When you access the same name, you are actually accessing the name in the setup.

Mount (selector) {/ / parse, get render, mount const parent = document.querySelector (selector) console.log (parent) If (! options.render) {/ / compilation returns render options.render = this.compileToFunction (parent [XSS _ clean])} if (options.setup) {this.setupState = options.setup ()} if (options.data) {this.data = options.data ()} this.proxy = new Proxy (this, {get (target) Key) {if (key in target.setupState) {return target.setupState [key]} else if (key in target.data) {return target.data [key]} / / there may be other variables of the same name, such as props, watch, etc., set (target, key, value, newVal) {console.log (target, key, value, newVal) }}) / / execution of render this.proxy is the context of integrating setup and data const el = options.render.call (this.proxy) console.log (el, options.render); parent [XSS _ clean] =''parent.appendChild (el)}

In the get of proxy, first look at whether the target attribute exists in setup, and if so, return the attribute variable in setup, otherwise it is in data. When rendering, you can pass in the integrated variable set directly. Of course, there will also be a set method in proxy, which needs to act as an agent first, and then obtain variables externally to be worth modifying before it can be triggered. Students who are interested here can do their own research.

At this point, I believe you have a deeper understanding of "the difference between vue3 and vue2 and the introduction of API usage of vue3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.