Make writing a habit together! This is the 7th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Vue. Js 3.0

Next, we will learn about Vue3.0. We will introduce it to you through the following small points

  • Changes in the way source code is organized
  • Composition API
  • Performance improvement
  • Vite

Changes in the way source code is organized

  • Vue3.0 source code all usedTypeScriptI rewrote it
    • Although the code has been rewritten, more than 90% of the API is compatible with version 2.x
  • useMonorepoManage the project structure by extracting individual functions into separate packages
    • Make the division of each function module more clear
    • Dependencies between modules are also more explicit
    • Each module can be individually tested, published, and used

Directory structure for Packages

Next, let’s look at the directory structure for Packages in the source codePackages are independent packages that can be distributed and used independently

  • compiler-core
    • Platform independent compiler
  • compiler-dom
    • The compiler for the browser platform depends oncompiler-core
  • compiler-sfc
    • SFC (Single file Component) is used to compile single-file components, depending oncompiler-core,compiler-dom
  • compiler-ssr
    • The compiler for server-side rendering depends oncompiler-dom
  • reactivity-transform
    • Reactivity transformation is currently an experimental feature. It is disabled by default and requires explicit selection. It could change before it is finalized. To stay up to date, be aware of its proposals and discussions on GitHub.
  • reactivity
    • Data responsive system
  • runtime-core
    • A platform-independent runtime
  • runtime-dom
    • Handle raw DOM API events for browser runtime
  • runtime-test
    • Lightweight runtime for testing. Since the rendered DOM tree is a JS object, it can run in any JS environment, and you can use it to test the render, serialize the DOM tree, and record a dom update
  • server-renderer
    • Used for server-side rendering
  • sfc-playground
    • Vue provides official scaffolding tools to get started with SFCS as quickly as possible
  • shared
    • The public API used internally by Vue
  • size-check
    • Is a private package, not published to NPM, it is used for tree-shaking to check the size of the package
  • template-explorer
    • A real-time compilation component running in a browser outputs the Render function
  • vue-compat
    • Migration builds run in Vue 2 mode by default – most public apis behave exactly the same as Vue 2, with a few exceptions. Using functionality that has been changed or deprecated in Vue 3 will issue a runtime warning. You can also enable/disable compatibility of functionality on a per-component basis.
  • vue
    • Build the full version of Vue, depending oncompiler + runtime

Composition API

learning

The best way to learn from Compostion is to look at the following two documents

  • RFC(Request For Comments)
    • github.com/vuejs/rfcs
  • Composition API RFC
    • Staging-cn.vuejs.org/api/composi…

Design frozen chicken 🐤

First we need to understand that vue2. x is developed using the Options API

  • Options API
    • Contains an object that describes component options (Data, methods, props, and so on)
    • The Options API develops complex components where the code of the same functional logic is split into different Options

This is a bit ambiguous, but let’s take a look at a simple case where we can understand the difference between two different versions of the code

  • Function: Display current mouse position component:

    • Vue2.x
    export default {
    data () {
        rteturn {
            postion: {
                x: 0.y: 0}}},created() {
        window.addEventListener('mousemove', update)
    },

    destroyed() {
        window.removeEventListener('mousemove', update)
    },
    methods: {
        handle(e) {
           position.x = e.pageX
           position.y = e.pageY
        }
    }
}
Copy the code
  • At this time, if we need to add a function, such as search or location, we need to define the parameters and methods we need in data and methods. If there is a lot of code, we need to keep dragging back and forth.
  • It is also difficult to extract reusable code logic, mixins exist, but data sources are not clear, naming conflicts and so on
  • Vue3.0
import { createApp, reactive, onMounted, onUnmounted, toRefs } from 'vue'

function useMousePosition () {
  // The first parameter is props
  // The second argument is context, attrs, emit, slots
  const position = reactive({
    x: 0.y: 0
  })

  const update = e= > {
    position.x = e.pageX
    position.y = e.pageY
  }

  onMounted(() = > {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() = > {
    window.removeEventListener('mousemove', update)
  })

  return toRefs(position)
}

export default {
  setup () {
    // const position = useMousePosition()
    const { x, y } = useMousePosition()
    return {
      x,
      y
    }
  }
}
Copy the code

At this time, if we need to add search, etc., we just need to add a search function, then what page need to use direct import can be, simply have!

The Composition API was developed to solve the problem that Vue could not split and reuse the code of the Options API for large components when developing large projects

summary

That’s all for now, and the rest

  • Performance improvement
  • Vite

I’ll leave that to the next chapter.