vue3有了解过吗？和vue2的区别

news2024/9/23 23:27:53

vue3介绍

🍕🍕🍕关于vue3的重构背景，作者是这样说的：

「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了。
在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平(利用新的语言特性[es6])；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」(解决架构暴露出来的问题)

哪些变化

速度更快
体积减少
更易维护
更接近原生
更易使用(待验证)

速度更快

重写了虚拟Dom实现
对编译模板的优化
组件初始化更高效
undate性能提高1.3-2倍
SSR速度提高了2-3倍

体积减少

🚜🚜🚜通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的
两大好处：

对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大
对使用者，打包出来的包体积变小了

更易维护

🌮🌮🌮composition Api

可与现有的Options API 一起使用
逻辑组合和复用更灵活
vue3模块可以和其他框架搭配使用

更好的`Typescript`支持

🍕🍕🍕vue3是基于typescript编写的，可以享受到自动的类型定义提示

编译器重写

更接近原生

🥞🥞🥞可以自定义渲染API

更易使用

🧨🧨🧨响应式 Api暴露出来

import { observable,effect } from 'vue'
const state = observable({
	count:0
})
effect(()=>{
	console.log(`count is:${state.count}`)
})
state.count++

组件重新渲染识别

const Comp = {
	render(props){
		return h('div',props.count)
	},
	renderTriggered(e){
	  debugger 
	}
}

二、Vue3新增特性

🥟🥟🥟包括：

framents
Teleport
composition Api
createRenderer

framents

🍳🍳🍳 支持有多个根节点

<template>
	<header></header>
	<main v-bind="$attrs"></main>
	<footer></footer>
</template>

Teleport

🐱‍🏍🐱‍🏍🐱‍🏍是一种能够将我们的模板移动到DOM中Vue app之外的其他位置的技术，就有点像哆啦A梦的“任意门”
在vue2 中，像modals,toast等这样的元素，如果我们嵌套在Vue的某个组件内部，那么处理嵌套组件的定位、z-index和样式就会变得很困难。
通过Teleport,我们可以在组件的逻辑位置写模板代码，然后在 Vue 应用范围之外渲染它

<button @click="showToast" class="btn">打开toast</button>
<teleport to="#teleport-target">
  <div v-if="visible" class="toast-wrap">
  	<div>Toast文案</div>
  </div>
</teleport>

createRenderer

🥫🥫🥫我们能够构建自定义渲染器，我们能够将vue的开发模型扩展到其他平台,我们可以将其生成在canvas画布上

composition Api

🍔🍔🍔通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理
在这里插入图片描述
简单使用

export default{
	setup(){
		const count = ref(0);
		const double = computed(()=>count.value*2)
		function increment(){
			count.value++ 
		} 
		onMounted(()=>console.log('component mounted!'))
		return{
			count,
			double,
			increment 
		}
	}
}

三、非兼容变更

🍖🍖🍖Global API

全局Vue API已更改为使用应用程序实例
全局和内部API已经被重构为可tree-shakable

模板指令

组件上v-model 用法更改
和非v-for节点上key用法已更改
在同一元素上使用v-if和v-for优先级已更改
v-bind="object"现在排序敏感
v-for中的ref不再注册ref数组

组件

只能使用普通函数创建功能组件
functional属性在单文件组件(SFC)
异步组件现在需要defineAsncComponent方法来创建

渲染函数

渲染函数API改变
$sco p e d Sl o t s 属性已删除，所有插槽都通过 ‘$ slots`作为函数暴露
自定义指令 API 已更改为与组件生命周期一致
一些转换class被重命名了
组件 watch 选项和实例方法 $watch不再支持点分隔字符串路径，请改用计算函数作为参数
在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。VUE3.x 现在使用应用程序容器的 innerHTML。