历史搜索

vue3.4新特性有哪些,通过案例让你看的明明白白

游客2024-08-13 14:33:01
目录文章目录
  1. defineModel 已稳定
  2. defineModel 的简单介绍
  3. 使用 $emit 更新父组件传递过来的数据(vue3.2)
  4. 使用 defineModel 更新父组件传递过来的数据(vue3.4)
  5. 使用 defineModel 后的感觉
  6. defineModel 传递多个 v-model
  7. defineModel 设置默认值
  8. 发现 2 个问题:父子数据不同步,子组件数据不更新
  9. 验证: 子组件引用数据类型不更新,基本数据类型会更新
  10. 总结: defineModel 使用默认值会造成 2 个影响
  11. 处理 v-model 修饰符
  12. v-model 修饰符实现:第一个字母转为大写
  13. v-bind 的简写语法
  14. v-bind 的简写语法用在组件传递值上
  15. 更高效的反应性系统 watchEffect
  16. 编译器性能优化
  17. 删除了已弃用的功能
  18. 监听子组件的生命周期:@vnode-xx 更改为@vue:xxx
  19. 监听子组件的生命(vue3.4 之前)
  20. 监听子组件的生命(vue3.4)
  21. 监听子组件的生命-奇怪的地方
  22. 奇怪的地方:如果使用 vue3 的生命周期将不会被触发
  23. v-is 指令已被删除,改用带 vue:前缀的 is 属性
  24. 结语

在本文中,通过最近在项目中实践,我将深入探讨 Vue 3.4 带来的革新和提升,一同见证这个前端框架的进步。

性能提升:

在性能方面,Vue 3.4 做出了重大的内部改进,其中最引人注目的是模板解析器的全新重写。与之前基于正则表达式的解析器相比,新的解析器使用基于状态机的标记化技术,它通过单次遍历整个模板字符串来解析模板,显著提高了解析速度,模板解析器速度提高了 2 倍。无论是小型还是大型的 Vue 模板,新解析器都能保持两倍的性能提升,同时确保了向后兼容性。

另一个值得关注的升级是对响应系统的重构。在旧版本中,即使计算属性的结果未发生变化,每次依赖项更新,观察者也会被触发。而在 Vue 3.4 中,优化后的系统确保只有在计算结果实际变化时,相关的效果才会被触发,从而减少了组件的不必要渲染,提升了整体的性能。

Vue 3.4 中引入了非常多的新特性,下面我列举一些来介绍它们,争取让大家看得明明白白的:

defineModel 已稳定

defineModel 在 vue3.3 中还是一个实验性功能,但是经过一个学期的努力,该同学已经转正,大家可以使用。

defineModel 的简单介绍

defineModel() 返回的值是一个 ref,它可以像其他ref一样被访问以及修改,能起到在父组件和当前变量之间的双向绑定的作用。它的.value和父组件的v-model的值同步,当它被子组件改变时,会触发父组件绑定的值一起更新。

我们都知道 props 的设计原则是单项数据流,子组件默认情况下是无法更改父组件传递过来的数据。如果要更改 vue3.3 以前是通过 $emit 来实现的。

下面我们来对比一下使用$emitdefineModel来更新数据。

使用 $emit 更新父组件传递过来的数据(vue3.2)

父组件:

// 父页面
<template>
  <div>
    <div >
      <p>我是父页面-此时:son 组件的值{{ flag }}</p>
      <button @click="openHandler"> 显示子组件</button>
    </div>
    <!-- 控制子组件是否显示 -->
    <son v-model:flag="flag"></son>
  </div>
</template>
<script setup lang="ts">
// vue3.2 开始组件引入后,就不需要注册啦。变量也不需要暴露出去啦
import son from '@/components/son.vue'
import { ref } from 'vue';
let flag = ref(false)
// 点击事件,更改值,让组件显示出来
const openHandler = ()=>{
  flag.value = true;
}
</script>
<style>
.father-box{
  background: palegreen;
}
</style>

子组件:

// son 组件
<template>
  <div  v-if="flag">
    <h1 >我是 son 组件</h1>
    <button @click="hideHandler"> 关闭组件:更改父组件传递过来的值</button>
  </div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
// 接收传递过来的值
defineProps({
  flag: {
    type: Boolean,
    default: false,
  }
});
// 注册事件
const emits = defineEmits(["update:flag"]);
// 去更新父组件中的 flag 值,更改为 false
const hideHandler = () => {
  emits("update:flag", false)
}
</script>
<style>
.son-box{
   background: pink;
}
</style>

vue3.4新特性有哪些,通过案例让你看的明明白白 1

v-bind 的简写语法用在组件传递值上

<template>
  <div>
    // 简写语法
    <son3 :userName :age></son3>
    <!-- 等价与以前这样写 -->
    <!-- <son3 :userName="userName" :age="age"></son3> -->
  </div>
</template>
<script setup lang="ts">
import son3 from '@/components/son3.vue'
import { ref } from 'vue'
const userName = ref('李四')
const age = ref(18)
</script>

vue3.4新特性有哪些,通过案例让你看的明明白白 9

结语

随着 Vue 3.4 带来的这些更新和改进,我们可以看到 Vue 框架在为开发者提供更高效、更强大的开发体验方面迈出的坚实一步。从性能提升到 API 的丰富,再到对 TypeScript 的优化,每一项更新都体现了 Vue 团队对技术前沿的追求和对社区反馈的重视。

如果文中有什么错误,欢迎大家评论指出,以免更多的人被误导,感激不尽。