Recently, I was listening to the teacher’s class, and I shared some notes with you.

First experience: Hello Vue3

Under the file directory, create a new hello-vue3.html file

<div id="app"> <h3>{{title}}</h3> <h3>{{state.title}}</h3> </div> <script src="https://unpkg.com/vue@next"></script> <script> // new Vue const {createApp, reactive, h} = Vue const app = createApp({ data() { return { title: 'hello vue3! ' } }, setup() { return { state: reactive({ title: 'hello vue3!!!!! ' }) } }, }) app.mount('#app') </script>Copy the code

Vue3 design concept

  1. Functional: Type support is better, TS
  2. Standardization, simplification, consistency: Render function, sync modifier removal, instruction definition, V-model adjustment
  3. tree-shaking
  4. Reusability: Composition API
  5. Performance optimization: responsive, compile-time optimization
  6. Extensibility: Custom renderers

Handwritten VUE3 initialization process

The code is as follows:

<div id="app"> <h3>{{title}}</h3> </div> <script> // createApp Returns what the application instance looks like const Vue = {createApp(options) {// Const renderer = Vue. CreateRenderer ({querySelector(selector) {return document.querySelector(selector)}, insert(child, parent, anchor) { parent.insertBefore(child, anchor || null) } }) return renderer.createApp(options) }, createRenderer({ querySelector, Return {createApp(options) {return {mount(selector) {// What is the target of the mount? Const parent = querySelector(selector) const parent = querySelector(selector) Options.render) {options.render = this.compile(parent-innerhtml)} // Compatibility with options.setup API if (options.setup) { This.setupstate = options.setup()} else {this.data = options.data()} // Proxy // determine the render data from this.proxy = new Proxy(this, { get(target, key) { if (key in target.setupState) { return target.setupState[key] } else { return target.data[key] } }, set(target, key, val) { if (key in target.setupState) { target.setupState[key] = val } else { target.data[key] = val } } }) const el = Options.render. Call (this.proxy) // append to the host element parent.innerhtml = "// parent.appendChild(el) insert(el, parent)}, Template return function render() {const h3 = document.createElement('h3') h3.textContent = this.title return h3 } } } } } } } </script> <script> // new Vue const { createApp } = Vue const app = createApp({ data() { return { title: 'hello vue3! '}}, setup() {// call functions etc // circumvent this return {title: 'hello vue3!!!!!! ' } }, }) app.mount('#app') </script>Copy the code

Source code analysis

Source address (village head teacher GitHub) search vue-next

Add an interview question mentioned by the teacher: what is the goal of mount in VUe3?

Parse the component configuration into the DOM and append it to the host element

Take the innerHtml that the host element depends on, use it as a template, compile it as a rendering function, get the actual current DOM node, and append it

We will share them one after another, we will learn together, come on!!