vite

Webpack packs a variety of modules into static bundles, which will be packed in regardless of whether the code is used or not, so as the project gets bigger and bigger, the packaging becomes more and more time-consuming. vue.config.js

3.x

Fast cold start instant hot module update true on-demand build environment with rollup package tree-shaking viet.config.js

conclusion

The source code is provided directly to the browser via ES Import, so there is no packaging to do so the cold boot is very fast. 2. The code is compiled on demand, only if the code is actually imported on the current page. 3. Hot module Update (HMR) performance decoupled from the total number of modules. Speed up development by reducing unnecessary restarts or module updates. Lacking: the ecosphere is not complete enough; The native ES module import function of the browser does not support IE11

Introduce vite

Vite is a Web development and construction tool developed by the author of Vue, especially Yuji. It is a development server based on the browser native ES module import. Under the development environment, the browser is used to parse import, and the server is compiled and returned as required. At the same time, Vue files are not only supported, but also support hot update, and the speed of hot update does not slow down with the increase of modules. Use Rollup packaging in a production environment.

Vite role

Using Vite to develop Vue 3 projects can speed up development by reducing unnecessary waiting time for project restarts or module updates. In a build environment, projects still need to be package-rollup packed to avoid frequent network requests,

rollup

The great thing about Rollup is tree-shaking, the ability to statically analyze imports in your code and exclude any unused code. This allows us to build on top of existing tools and modules without adding additional dependencies or swelling the size of the project.

Hijack way

2.x

Object. DefineProperty (get, set, value, writable, enumerable, configurable) whether can traverse directly whether can directly modify the value attribute is configurable

3.X

ES2015 Proxy Proxy API hijacks the entire object getter to recurse the response. The advantage of this is that the actual access to the internal object becomes reactive, rather than mindless recursion. ES module

conclusion

  • Can be directly to monitor the change of the array, 2.0 is rewrote the seven methods of array push, pop, shift, unshift, splice, sort, reverse
  • You can now listen directly on objects. 2.0 listens for properties of objects. The particle performance is low after hours
  • Can listen to a variety of data format (Array, Object, Map, Set, WeakSet, WeakMap)
  • Returns a new object that can be manipulated to modify it; ,2.0 Traversal object properties are modified on the original object

Missing: Compatibility, abandoned ie whole system including IE11

Why do you need the virtual DOM

Dom is expensive. On the one hand, it is expensive in terms of the weight of the DOM itself, the description of DOM nodes in JS is a very complex property and many prototypes are very long super objects. On the other hand, the browser rendering process and JS process are separate, the communication when manipulating the DOM and the browser itself need to redraw time are very high. So we tactically made a lightweight VDOM to simulate DOM, VDOM each node only mount the js operation of the necessary attributes, each component update will operate vDOM first, through vDOM comparison, get a real DOM need to operate the set. The whole mechanism is calculated at the JavaScript level and does not manipulate the DOM until the data is stable and then precise changes are made.

diff

2.X

Virtual DOM is compared in full (all nodes are compared in sequence through cyclic recursion), and patchVNode is recursively called continuously in the case of multilayer parent-child relationship

3.x

When PatchFlag is generated, only those with dynamic identification will be updated, and those with static identification will be created only once

conclusion

Excellent: Solves the pain of virtual DOM full comparison, especially in the parent-child multi-layer nesting. Net transmission speed increased by 6 times

Source code writing language

2.x

Js, flow

3.x

typescript,monorepo

conclusion

Excellent: Improves the maintainability of your code

directory

2.x

SRC > routet > index.js static in the project root directory

3.x

SRC > router.js public folder

conclusion

The router promotes a layer of static file replication to public files

slot

2.x

The parent component is rerendered

3.x

The scope slot has been changed to function

conclusion

Only the re-rendering of child components is affected

The life cycle

2.x

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeDestroy
  8. destroyed

3.x

  1. onBeforeMount
  2. onMounted
  3. onBeforeMount
  4. onMounted
  5. onBeforeUpdate
  6. onUpdated
  7. onBeforeUnmount
  8. onUnmounted

conclusion

The setup() function replaces beforeCreate and created; A whole bunch of stuff goes into the setup function

component

2.x

Option code composition related business code needs to follow option’s configuration to write to a specific region asynchronous component: is created by returning a Promise

3.x

Composition API for composing logic code functions

  • setup()
  • reactive
  • ref()
  • isRef
  • torefs()
  • toRef
  • watchEffect
  • shallowReactive
  • ShallowRef:
  • customRef
  • readonly
  • shallowReadonly
  • Fragments

Asynchronous components: Functional components – pure functions. By wrapping it in a new defineAsyncComponent

conclusion

Solve code coupling degree, better code reuse. React? Doesn’t it feel a little simplified into complicated?

Composition Api

  • The setup() function is an entry point to the Composition Api, a special new method in VUe3;
  1. Execute after beforecreate and beforecreate.
  2. The second argument to context:setup() is a context object that roughly contains these properties,
  3. Note: This is not accessible in the setup() function

  • Reactive is used to create a reactive object, equivalent to the ue. Observable of 2.x

  • The ref() function creates a responsive data object for the given value, and the return value of ref() is an object that contains only a.value attribute

  • IsRef is used to determine whether a value is an object created by ref

  • The torefs() function transforms a reactive object created by Reactive () into a normal object, except that each attribute node on the object is reactive data of type REF ()

  • ToRef creates a REF object for an attribute on the source responsive object, and both internally operate on the same data value and are updated synchronously. Equivalent to a shallow copy of a property

  • WatchEffect: Without specifying listening properties, dependencies can be collected automatically. Whenever we reference reactive properties in a callback, the callback will be executed whenever those properties change

  1. Watch gets new and old values, but watchEffect does not
  2. WatchEffect executes once during component initialization, just like computed, and only after the dependency changes are collected does the callback execute

  • ShallowReactive: Only responds to the outermost properties of an object, so if the outermost properties change and the view is updated, the view will not be updated if other properties change

  • ShallowRef: Only value responses are processed, and reactive is not implemented.

  • CustomRef: create a customRef with explicit control over its dependency trace and update trigger.

  • Readonly: deep read-only data.

  • ShallowReadonly: indicates shallow read-only data

  • Fragments: Allow a component to have multiple root nodes

grammar

2.x

  1. A component can have only one root node
  2. V-model a value propo,updata
  3. V-for has a higher priority than V-if
  4. V-for nested V-for is inefficient
  5. This.$children accesses the child component
  6. The modifier
  7. Hooks for custom directives (bind, Inserted, Update, componentUpdated, unbind,)
  8. Dynamic component IS
  9. The $data option can be Object or Function
  10. Mixin $Data merge when deep merge – subphase fetch component
  11. Global event listeners on,on,on,off,$once
  12. The filter
  13. Vue.nextTick()
  14. The render function automatically receives the H function
  15. Normal slot and scope slot 16.
  17. Transition class V-enter, V-leave
  18. The transition should be triggered by a quilt element, not by itself
  19. @hook:updated=”onUpdated”

3.x

  1. Multiple node components are supported
  2. V-model :title can now be bound to multiple titles
  3. V-if has a higher priority than V-for
  4. A single binding takes multiple refs and binds the refs to a more flexible function
  5. Remove the
  6. Removed the. Native modifier
  7. Directive and component hooks are unified
  8. Dynamic components were changed to V-IS instructions
  9. We only accept the Function
  10. Mixin Data merge, shallow merge. Data merge, shallow merge. Data merge, shallow merge. Data returns the same object. Instead of merging children, use the component’s $Data
  11. Remove on,on,on,off, once. Fortunately for Once. Fortunately for Once. Glad emit is still there
  12. Remove filters and recommend calculated attributes
  13. Import {nextTick} from ‘vue’; NextTick (() => {})
  14. H is now imported globally and is no longer passed automatically as a parameter
  15. this.$slots
  16. Components make asynchronous requests before rendering, and Suspense allows for further processing of waits in the component tree
  17. V – enter – the from, v – leave – the from
  18. Repair the
  19. @vnode-updated=”onUpdated” Lifecycle Monitor prefix name change

extension

Monorepo

Monorepo is a way to manage project code by managing multiple modules/packages in a project repository (REPO), as opposed to the usual repO for each module. Most Monorepos use both Lerna and declare workspaces in package.json. This way, whether your package manager is NPM or YARN, you can take advantage of Monorepo; If package management is YARN, Lerna will hand over the dependency installation to YARN. Git adds a submodule: Git submodule add [email protected]: XXX /xxx.git path/to/ XXX You can see the submodules, names, branches, etc in the.gitModule file

  • Initialize git submodule information –> Git subModule init

  • Git subModule update –> Git submodule update