directory

  • How to debug Vue3 source code breakpoint in browser
  • Try Vue3 part two: The most important changes to the CompositionApi
  • Try Vue3 3: CompositionAPI summary and wrapping objects
  • How do I run Jest unit Tests
  • Try Vue3 five: source code structure
  • Try Vue3 six: innovation of responsive principle – Vue2, Vue3 implementation comparison

Clone Vue3 source code

Vue source location

Github.com/vuejs/vue-n…

git clone [email protected]:vuejs/vue-next.git
Copy the code

Installation depends on compiled source code

Go to the code directory and install the dependencies

yarn
yarn dev
Copy the code

Test the API

  • To do a simple Helloworld test, we will first try whether the original VUe2 Api can be used. In fact, VUe3 advocates the use of composite Api, which is the Api of function definition style. The original VUE prefers configuration configuration style, which we collectively call options style We create folders in the root directory

options.html


      
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src=".. /.. /packages/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id='app'></div>
    <script>
        const App = {
            template: `  `,
            data() {
                return {
                    message: 'Hello Vue 3!! '}},methods: {
                click() {
                    console.log('click .... '.this.message)
                    this.message = this.message.split(' ').reverse().join(' ')}}}let vm = Vue.createApp().mount(App, '#app')
        // console.log(vm)
    </script>
</body>

</html>
Copy the code

Let’s try vue3’s Composition API again


      
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src=".. /.. /packages/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        const {
            createApp,
            reactive,
            computed,
            effect
        } = Vue
        const MyComponent = {
            template: `  `,
            setup() {
                const state = reactive({
                    message:'Hello Vue 3!! '
                })
                effect((a)= > {
                    console.log('state change ', state.message)
                })
                function click() {
                    state.message = state.message.split(' ').reverse().join(' ')}return {
                    state,
                    click
                }
            }
        }
        createApp().mount(MyComponent, '#app')
    </script>
</body>

</html>
Copy the code

Local files can be opened directly from the browser

You can try that out and then if you’re going to debug the source code you’ll find that it’s packaged and you can’t just break the source code

Add the SourceMap file

In order to see the source code in the browser and debug it with breakpoints, you need to add sourcemap to the packaged code

  • rollup.config.js
// rollup.config.js line:104 about output.sourcemap = trueCopy the code

  • Configure the sourcemap output in tsconfig.json
// tsconfig.json { "compilerOptions": { "baseUrl": ".", "outDir": "dist", "sourceMap": True, / / -- -- -- -- -- -- -- -- -- -- here -- -- -- -- -- -- -- -- -- "target" : "esnext", "the module" : "esnext", "moduleResolution" : "node", "allowJs" : false, "noUnusedLocals": true, "strictNullChecks": true, "noImplicitAny": true, "noImplicitThis": true, "experimentalDecorators": true, "resolveJsonModule": true, "esModuleInterop": true, "removeComments": false, "jsx": "react", "lib": ["esnext", "dom"], "types": ["jest", "node"], "rootDir": ".", "paths": { "@vue/shared": ["packages/shared/src"], "@vue/runtime-core": ["packages/runtime-core/src"], "@vue/runtime-dom": ["packages/runtime-dom/src"], "@vue/runtime-test": ["packages/runtime-test/src"], "@vue/reactivity": ["packages/reactivity/src"], "@vue/compiler-core": ["packages/compiler-core/src"], "@vue/compiler-dom": ["packages/compiler-dom/src"], "@vue/server-renderer": ["packages/server-renderer/src"], "@vue/template-explorer": ["packages/template-explorer/src"] } }, "include": [ "packages/global.d.ts", "packages/runtime-dom/jsx.d.ts", "packages/*/src", "packages/*/__tests__" ] }Copy the code

Run again

yarn dev
Copy the code

Ok, students can have fun now.

However, to really understand the source code requires a lot of basic knowledge such as ES6 Proxy Reflect, Monorepo style code organization will be explained in the following article 3

directory

  • How to debug Vue3 source code breakpoint in browser
  • Try Vue3 part two: The most important changes to the CompositionApi
  • Try Vue3 3: CompositionAPI summary and wrapping objects
  • How do I run Jest unit Tests
  • Try Vue3 five: source code structure
  • Try Vue3 six: innovation of responsive principle – Vue2, Vue3 implementation comparison