|
|
@@ -200,8 +200,10 @@ Vue3 中对不参与更新的元素，会做静态提升，只会被创建一次
|
|
|
这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操
|
|
|
作，优化了运行时候的内存占用
|
|
|
```
|
|
|
-<span>你好</span>
|
|
|
-<div>{{ message }}</div>
|
|
|
+<template>
|
|
|
+ <span>你好</span>
|
|
|
+ <div>{{ message }}</div>
|
|
|
+</template>
|
|
|
<script>
|
|
|
// 没有做静态提升之前
|
|
|
export function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
@@ -223,9 +225,8 @@ export function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
], 64 /* STABLE_FRAGMENT */))
|
|
|
}
|
|
|
</script>
|
|
|
-```
|
|
|
|
|
|
-### 事件监听缓存
|
|
|
+### 3.事件监听缓存
|
|
|
```
|
|
|
未开启事件监听器缓存：
|
|
|
```
|
|
|
@@ -256,7 +257,7 @@ export function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
总结来说，开启事件监听器缓存是为了优化性能，减少无谓的DOM更新以及内存消耗。
|
|
|
|
|
|
```
|
|
|
-### SSR 优化
|
|
|
+### 4.SSR 优化
|
|
|
```
|
|
|
当静态内容大到一定量级时候，会用 createStaticVNode 方法在客户端去生成一
|
|
|
个 static node，这些静态 node，会被直接 innerHtml，就不需要创建对象，然后根
|
|
|
@@ -332,6 +333,7 @@ shanking
|
|
|
```
|
|
|
|
|
|
### 响应式系统
|
|
|
+```
|
|
|
<script>
|
|
|
// Object.defineProperty 只能遍历对象属性进行劫持
|
|
|
function observe(obj) {
|
|
|
@@ -388,7 +390,7 @@ const arrayProto = Object.create(originalProto)['push', 'pop', 'shift', 'unshift
|
|
|
Vue.set(obj,'bar','newbar')
|
|
|
Vue.delete(obj,'bar')
|
|
|
</script>
|
|
|
-
|
|
|
+```
|
|
|
## 状态管理 pinia
|
|
|
|
|
|
> 由于 vuex 4 对 typescript 的支持度较低，所以状态管理弃用了 vuex 而采取了 pinia. pinia 的作者是 Vue 核心团队成员
|
|
|
@@ -538,7 +540,7 @@ export const useMainStore = defineStore({
|
|
|
## composition API 与 options API
|
|
|
```
|
|
|
在 Vue2 中，我们用过 mixin 去复用相同的逻辑
|
|
|
-```
|
|
|
+
|
|
|
<script>
|
|
|
export const MoveMixin = {
|
|
|
data() {
|
|
|
@@ -575,7 +577,9 @@ export const MoveMixin = {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+```
|
|
|
然后在组件中使用
|
|
|
+```
|
|
|
<template>
|
|
|
<div>
|
|
|
Mouse position: x {{ x }} / y {{ y }}
|
|
|
@@ -587,6 +591,7 @@ export default {
|
|
|
mixins: [mousePositionMixin]
|
|
|
}
|
|
|
</script>
|
|
|
+```
|
|
|
使用单个 mixin 似乎问题不大，但是当我们一个组件混入大量不同的 mixins 的时
|
|
|
候
|
|
|
mixins: [mousePositionMixin, fooMixin, barMixin, otherMixin]
|
|
|
@@ -594,6 +599,7 @@ mixins: [mousePositionMixin, fooMixin, barMixin, otherMixin]
|
|
|
• 命名冲突
|
|
|
• 数据来源不清晰
|
|
|
现在通过 Compositon API 这种方式改写上面的代码
|
|
|
+```
|
|
|
<script>
|
|
|
import { onMounted, onUnmounted, reactive } from "vue";
|
|
|
export function useMove() {
|
|
|
@@ -628,7 +634,8 @@ export function useMove() {
|
|
|
return { position };
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
+```
|
|
|
+```
|
|
|
<template>
|
|
|
<div>
|
|
|
Mouse position: x {{ x }} / y {{ y }}
|
|
|
@@ -650,4 +657,5 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
};
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+```
|
