开篇、项目结构
- 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