Skip to content

Commit

Permalink
chore: 升级vue^3.4.0，整体性能得到不错的提升
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoxian521
xiaoxian521 committed Dec 29, 2023
1 parent f788360 commit 50a4b17
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 219 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
"v-contextmenu": "3.0.0",
"v3-infinite-loading": "^1.3.1",
"version-rocket": "^1.7.1",
"vue": "^3.3.13",
"vue": "^3.4.0",
"vue-i18n": "^9.8.0",
"vue-json-pretty": "^2.3.0",
"vue-pdf-embed": "^1.2.1",
Expand Down
Loading

1 comment on commit 50a4b17

@xiaoxian521
Copy link
Member Author

@xiaoxian521 xiaoxian521 commented on 50a4b17 Dec 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vue3.4版本亮点

1. 解析器速度提高2倍并提高SFC构建性能

通俗解析：解析器速度提高通常会带来更快的页面加载时间、更流畅的用户体验、减少应用程序初始化时间，加快组件渲染速度，使得大型和复杂的应用程序运行更加高效。提高SFC构建性能也就是降低单文件组件.vue的构建时间，也的确降低了，如下图

Vue3.4之前：

1771703858642_ pic

Vue3.4之后：

1781703859026_ pic

2. 更高效的反应系统

通俗解析：computed计算属性变得更加高效，不论是它影响别的属性还是它被别的属性影响所带来的次数减少、耗时降低，别的属性指如watch、watchEffect，具体看 vuejs/core#5912

3. defineModel 宏正式稳定

通俗解析：比如之前想在父组件使用v-model，子组件需要整一堆代码，defineModel简化了v-model，如下代码：

Vue3.4之前：

<script setup>
const props = defineProps({
  modelValue: {
    require: false,
    type: String
  }
})
const emit = defineEmits<{ (e: 'update:modelValue', v: string) }>()
const inputValue = toRef(props, 'modelValue')

emit('update:modelValue', '改变后的值');
</script>

Vue3.4之后（像使用ref一样简单）：

<script setup>
const inputValue = defineModel({ type: String })

inputValue.value = '改变后的值')
</script>

4. v-bind同名简写

Vue3.4之前：

<img :id="id" :src="src" :alt="alt">

Vue3.4之后（emm... 怎么感觉像某种后端语言呢，平台暂时对此不做改动，感觉语义不是那么明确😂）：

<img :id :src :alt>

还有一些别的更新，具体看 Vue 3.4版本日志

Please sign in to comment.