vue-cli3.0 正式版新特性解析及使用教程 【持续更新

开篇、项目结构

• nodemodules
• public
• src
  • assets
  • components
  • App.vue
  • index.css
  • main.js 【全局入口js】
  • index.html【入口html页面】
  • package.json

main.js页面

//vue3.0
createApp(App).mount('#app')

//vue2.0
new Vue({
    el: '#app',
    store: store,
    router: router,
    render: c => c(App)
})
new Vue({
    store: store,
    router: router,
    render: c => c(App)
}).$mount('#App')

一、Vue3.0 六大亮点

Performance：性能比Vue2快1.2~2倍
Tree shaking support：按需编译，体积比vue2更小
Compsition API：组合API（类似react hooks）
Better TypeScript support： 更好的ts支持
Custom Renderer API：暴露了自定义渲染API
Fragment，Teleport（Protal），Suspense：更先进的组件

二、Vue3.0是如何变快的

diff方法优化：
vue2中的虚拟dom是进行全量的对比
vue3新增了静态标记（PatchFlag）：在与上次虚拟结点进行对比的时候，值对比带有patch flag的节点，并且可以通过flag 的信息得知当前节点要对比的具体内容化
hoistStatic 静态提升：
Vue2中无论元素是否参与更新，每次都会重新创建
Vue3中对不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用
cacheHandlers 事件侦听器缓存：
默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可
ssr渲染：
当有大量讲台的内容时候，这些内容会被当做纯字符串推进一个buffer里面，即使存在动态的绑定，会通过模板插值嵌入进去，这样会比通过虚拟dom来渲染快上很多很多
当静态内容大到一定量级时候，会用——createStaticVNode方法在客户端去生成一个static node，这些静态node，会直接被innerHtml，就不需要创建对象，然后根据对象渲染。
附录：PatchFlags

export const enum PatchFlags {
  // 动态文本节点
  TEXT = 1,

  // 动态 class
  CLASS = 1 << 1, // 2

  // 动态 style
  STYLE = 1 << 2, // 4

  // 动态属性，但不包含类名和样式
  // 如果是组件，则可以包含类名和样式
  PROPS = 1 << 3, // 8

  // 具有动态 key 属性，当 key 改变时，需要进行完整的 diff 比较。
  FULL_PROPS = 1 << 4, // 16

  // 带有监听事件的节点
  HYDRATE_EVENTS = 1 << 5, // 32

  // 一个不会改变子节点顺序的 fragment
  STABLE_FRAGMENT = 1 << 6, // 64

  // 带有 key 属性的 fragment 或部分子字节有 key
  KEYED_FRAGMENT = 1 << 7, // 128

  // 子节点没有 key 的 fragment
  UNKEYED_FRAGMENT = 1 << 8, // 256

  // 一个节点只会进行非 props 比较
  NEED_PATCH = 1 << 9, // 512

  // 动态 slot
  DYNAMIC_SLOTS = 1 << 10, // 1024

  // 静态节点
  HOISTED = -1,

  // 指示在 diff 过程应该要退出优化模式
  BAIL = -2
}

三、使用Vue3.0

• webpack

git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName

cd projectName
npm install
npm run dev

• Vue-CLI

npm install -g @vue/cli
vue create projectName
cd projectName
vue add vue-next
npm run serve

• Vite

Viet是Vue作者开发的一款意图取代webpack的工具
其实现原理是利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间
安装Vite：

npm install -g create-vite-app 【npm install create-vite-app --save-dev】

利用Vite创建Vue3项目：

create-vite-app projectName【npx create-vite-app projectName】

安装依赖运行项目：

cd projectName
npm install
npm run dev
npm run build