01—Vue3.0开发初体验

前置知识:Vue3.0带来的变化

• 使用monorepo的形式来管理源代码
• Vue2.0使用flow进行类型检测，Vue3.0源码使用Typescript来进行重写
• 性能方面：Vue2.0使用Object.defineProperty来劫持，无法监听给对象添加/删除的属性.Vue3.0使用Proxy进行数据劫持，
• 由Options API到Composition API，数据管理更加清晰
• 通过hooks实现代码的共用性,Vue2.0使用mixin来共享代码

初次体验Vue3.0

引入Vue3.0

• CDN(通过互联网共享网络，使用最靠近每个用户的服务器)引入
  • CDN服务器：阿里，腾讯，亚马逊，Google等
  • 开源服务器：unpkg,JSDelivr,cdnjs
  • <script src="https://unpkg.com/vue@next"></script>
• 下载Vue的文件，手动导入
• NPM下载安装
• Vue Cli自动导入

<script src="https://unpkg.com/vue@next"></script>
<script>
    let tempObj = {
        template: `<h2>Hello World~</h2>`,
    }
    const App = Vue.createApp(tempObj)
    App.mount('#app');
</script>
复制代码

使用Vue和原生JavaScript对比实现一个计数器

查看Vue3.0源码

• 查看方式github搜索vue-next
• tags选择v3.2.0版本， git clone到本地
• 安装本地依赖,yarn install, 本地运行yarn run dev
• package.json的「dev」开启--sourcemap,方便直接定位到相对应的源代码文件
• 通过debugger的形式查看源码