Vue3对比Vue2差异

2023-09-11 03:59:48

1.组合式API

由原来各个生命周期函数以及computed、methods、data定义为属性，改为将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。（实际开发中推荐的是单文件组件

3.Teleport

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，

4.多根节点

需要显式定义 attribute以及事件监听器应该分布在哪里。注意这里说的是非定位为props属性的attribute.和没有声明的自定义事件监听器。

5. 自定义事件

自定义事件需要先声明，不声明则为监听原生事件 (如 click) 时，换句话说我们定义了组件的自定义事件则可以覆盖监听原生事件

如果是在模板中子组件可以直接通过$emit()触发父组件自定义事件

 如果是在

 如果是使用的setup函数则事件需要通过 emits 选项来定义，emit 函数也被暴露在 setup() 的第二个参数上下文对象上

export default {emits: ['inFocus', 'submit'],setup(props, ctx) {ctx.emit('submit')}
}

 6.v-model

v-model不需要在子组件里面进行自定义，默认使用modelValue作为属性，update:modelValue作为事件

子组件

 7.单文件组件

2.响应式状态需要明确使用响应式 APIs 来创建

3.使用组件

4.递归组件 

一个单文件组件可以通过它的文件名被其自己所引用。例如：名为 FooBar.vue 的组件可以在其模板中用  引用它自己。

5.defineProps和defineEmits

在 

6.顶层await

且支持 JavaScript 表达式 (需要用引号包裹起来)

 9.scoped新增功能

新增针对插槽的样式

:slotted(.foo) {
}

新增针对全局的样式

:global(.foo) {}

10.全局api变为实例api

 11.watch侦听reactive对象和ref对象

  /*  watch函数可以监听一个函数，返回一个值一个 ref一个reactive对象...或是由以上类型的值组成的数组 */// reactive对象let user = reactive({name: "chenjixue",age: 25,address: {city: "武汉",province: "湖北"}})// 直接监听reactive对象   自动开启深度监听,更改后新老值一样watch(user, (oldValue, newValue) => {console.log(oldValue, newValue)}, {// deep:true})//监听reactive对象下某个基本数据类型watch(() => user.name, (oldValue, newValue) => {console.log(oldValue, newValue)}, {// deep:true})//监听reactive对象下某个引用数据类型  可以使用deep控制是否深度监听对象watch(() => user.address, (oldValue, newValue) => {console.log(oldValue, newValue)}, {// deep:true})//ref// watch监听ref时候 第一个参数写法这两者相等即 ref 等于 ()=>ref.value// 监听ref基本数据类型 更改后新老值不一样let testref = ref(1)watch(testref, (oldValue, newValue) => {console.log(oldValue, newValue)}, {// deep:true})// 监听ref引用数据类型  可以使用deep控制是否深度监听对象let testObjRef = ref({name: "chenjixue",age: 25,address: {city: "武汉",province: "湖北"}})watch(testObjRef, (oldValue, newValue) => {console.log(oldValue, newValue)}, {// deep:true})

12.template

没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的