<!DOCTYPE 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: `
                <button @click='click'>{{message}}</button>
            `,
            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>
//JS中文网 – 前端进阶资源分享 www.javascriptc.com

其实这个代码就是vue2官网的代码拿过来可以正常运行我们再试验一下vue3的composition api


<!DOCTYPE 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 {
            createApp,
            reactive,
            computed,
            effect
        } = Vue
        const MyComponent = {
            template: `
                <button @click="click">
                {{ state.message }}
                </button>
            `,
            setup() {
                const state = reactive({
                    message:'Hello Vue 3!!'
                })
                effect(() => {
                    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>
//JS中文网 – 前端进阶资源分享 www.javascriptc.com

直接通过浏览器就可以打开本地文件

尝鲜Vue3之一：浏览器中如何断点调试Vue3 源码

可以试一下点击的效果接下来如果你要debug一下源码的时候你会发现代码是经过打包的无法直接在源码上打断点调试

尝鲜Vue3之一：浏览器中如何断点调试Vue3 源码

添加SourceMap文件

为了能在浏览器中看到源码并能够断点调试需要再打包后代码中添加sourcemap

rollup.config.js


// rollup.config.js line:104左右
output.sourcemap = true
//JS中文网 – 前端进阶资源分享 www.javascriptc.com

尝鲜Vue3之一：浏览器中如何断点调试Vue3 源码

在tsconfig.json中配置sourcemap输出

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容


// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "sourceMap": true,  // ----------这里这里---------
    "target": "esnext",
    "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__"
  ]
}

//JS中文网 – 前端进阶资源分享 www.javascriptc.com

再次运行