面试官:vue2和vue3的区别有哪些

news/2024/12/5 12:03:19/

目录

多根节点,fragment(碎片)

Composition API

reactive 函数是用来创建响应式对象

Ref

toRef

toRefs

去除了管道

v-model的prop 和 event 默认名称会更改

vue2写法

Vue 3写法

vue3组件需要使用v-model时的写法

其他语法

1. 创建应用实例

2. 组件注册

3. 全局 API

4. 生命周期钩子

5. 计算属和监听器


多根节点,fragment(碎片)

熟悉 Vue2 的朋友应该清楚,在模板中如果使用多个根节点时会报错,如下所示。

// vue2中在template里存在多个根节点会报错
<template><header></header><main></main><footer></footer>
</template>// 只能存在一个根节点,需要用一个<div>来包裹着
<template><div><header></header><main></main><footer></footer></div>
</template>

但是,Vue3 支持多个根节点,也就是 fragment。即以下多根节点的写法是被允许的。

<template><header></header><main></main><footer></footer>
</template>

Composition API

Vue2 是选项API(Options API),一个逻辑会散乱在文件不同位置(data、props、computed、watch、生命周期钩子等),导致代码的可读性变差。当需要修改某个逻辑时,需要上下来回跳转文件位置。

Vue3 组合式API(Composition API)则很好地解决了这个问题,可将同一逻辑的内容写到一起,增强了代码的可读性、内聚性,其还提供了较为完美的逻辑复用性方案。

reactive 函数是用来创建响应式对象

Vue 3 中的 reactive 函数是用来创建响应式对象的,它将普通的 JavaScript 对象转换成 Vue 响应式的对象。下面是一个简单的例子,演示如何使用 reactive

Ref

reactive 只能给对象,数组添加响应式,如果想给值类型( string ,Number,Boolean ,Symbol )添加响应式,就要用到ref。

  • 获取数据值的时候需要加.value。
  • 参数可以传递任意数据类型,传递对象类型时也能保持深度响应式,所以适用性更广。
  • vue 3.0 setup里定义数据时推荐优先使用ref,方便逻辑拆分和业务解耦。
import { ref } from 'vue'// 为基本数据类型添加响应式状态
const name = ref('Neo')// 为复杂数据类型添加响应式状态
const state = ref({count: 0
})// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)

toRef

可以将一个响应式对象的某个属性转换成一个单独的响应式对象。当这个属性发生改变时,这个改变会被追踪,并且会触发视图更新。

import { reactive, toRef } from 'vue'const state = reactive({count: 0
})const countRef = toRef(state, 'count')console.log(countRef.value) // 0state.count++console.log(countRef.value) // 1

toRefs

toRefs 是 Vue 3 中的工具函数,可以将一个响应式对象转换成一个由所有属性都为响应式对象的普通对象。当响应式对象中的某个属性发生改变时,这个改变会被追踪,并且会触发视图更新。

import { reactive, toRefs } from 'vue'const state = reactive({count: 0,message: 'Hello'
})const refs = toRefs(state)console.log(refs.count.value) // 0
console.log(refs.message.value) // 'Hello'state.count++
state.message = 'World'console.log(refs.count.value) // 1
console.log(refs.message.value) // 'World'

reactive封装的响应式对象,不要通过解构的方式return,这是不具有响应式的。可以通过 toRefs 处理,然后再解构返回,这样才具有响应式

<template><div><div>姓名:{{name}}</div><div>年龄:{{age}}</div></div>
</template><script>
import { reactive, toRefs } from 'vue'
export default {setup () {const state = reactive({age: 20,name: '太凉'})const stateAsRefs = toRefs(state)return {...stateAsRefs}}
}
</script>

去除了管道

Vue 3 之前的版本中提供了管道(pipe)的功能,可以通过在模板中使用 | 符号来对表达式的结果进行处理。例如:

<template><div>{{ message | capitalize }}</div>
</template><script>
export default {data() {return {message: 'hello world'}},filters: {capitalize(value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}}
}
</script>

在上面的代码中,我们使用管道将 message 变量的值转换为大写形式。

然而,Vue 3 中已经移除了管道的功能。这是因为管道的实现方式会带来一些性能问题。每个管道都会创建一个新的函数,这会导致更多的函数创建和执行,而这些函数可能只是对数据进行了一些简单的操作,这些操作完全可以在组件中使用计算属性或方法来完成。

在 Vue 3 中,推荐使用计算属性或方法来完成管道的功能。例如,在上面的代码中,我们可以将 capitalize 过滤器的功能封装到一个计算属性或方法中,然后在模板中使用这个计算属性或方法来对数据进行处理。这样可以避免创建多余的函数,提高应用的性能。 

v-model的prop 和 event 默认名称会更改

  • prop:value->modelValue
  • event :input=> update:modelValue

vue2 写法

<KyrieInput v-model="name" />
<!-- 不同的写法,相同的本质 -->
<KyrieInput :value="name" @input="name = $event" />//如果想要改变 v-model 绑定的属性或者事件,需要在子组件内添加一个 model :
// KyrieInput.vue
export default {model: {prop: 'title',event: 'change',},
}//经过上面的改造,现在 KyrieInput 这个组件 v-model 的本质变成了下面这样:
<KyrieInput :title="name" @change="name = $event" />//实现组件属性的双向绑定
this.$emit('update:title', '关注我的你很酷');//然后在父组件监听这个事件:
<KyrieInput :title="name" @update:title="name = $event" />//方便起见,.sync 修饰符应运而生:
<KyrieInput :title.sync="name" />

Vue3 写法

<KyrieInput v-model="name" />
<!-- 这两行其实是一样的 -->
<KyrieInput :modelValue="name" @update:modelValue="name = $event" />//如果要改变绑定的属性名,只需要给 v-model 传递一个参数就好了:
<KyrieInput v-model:title="name" />
<!-- 等同于 -->
<KyrieInput :title="name" @update:title="name = $event" />//这个写法还彻底代替了 .sync 修饰符,并且支持统一组件绑定多个 v-model:
<KyrieInput v-model:title="name" v-model:content="info" />
<!-- 相当于 -->
<KyrieInput:title="name"@update:title="name = $event":content="info"@update:content="info = $event"
/>

vue3组件需要支持v-model时的写法

在 Vue 3 中,我们需要在组件上使用 v-model 指令时,需要同时指定一个名为 modelValue 的 prop 和一个名为 update:modelValue 的事件。例如:

<template><div><input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"><p>{{ modelValue }}</p></div>
</template><script>export default {props: {modelValue: {type: String,required: true}}};
</script>

其他语法

Vue 3 引入了一些新的特性和优化,同时也对一些 API 进行了调整和改进。以下是一些常见的 API 类型的比较:

1. 创建应用实例

Vue 2: new Vue(options)
Vue 3: createApp(options).mount(elementOrSelector)

2. 组件注册


Vue 2: Vue.component(name, options)
Vue 3: app.component(name, definition)

3. 全局 API


Vue 2: Vue.directive(name, definition)
Vue 3: app.directive(name, definition)

4. 生命周期钩子

vue2vue2中的生命周期

  • beforeCreate 组件创建之前
  • created 组件创建之后
  • beforeMount 组价挂载到页面之前执行
  • mounted 组件挂载到页面之后执行
  • beforeUpdate 组件更新之前
  • updated 组件更新之后

vue3vue3中的生命周期

  • setup 开始创建组件
  • onBeforeMount 组价挂载到页面之前执行
  • onMounted 组件挂载到页面之后执行
  • onBeforeUpdate 组件更新之前
  • onUpdated 组件更新之后

5. 计算属和监听器


Vue 2: computed: {}
Vue 3: computed()


Vue 2: watch: {}
Vue 3: watch()


http://www.ppmy.cn/news/35316.html

相关文章

路径规划与越障逻辑

有幸在国内某家用型机器人_扫地机器人公司学习该内容&#xff0c;感觉作为科普还是有些值得的&#xff1b; 1、机器人环境感知与路径规划 机器人三大关键系统&#xff1a; 感知识别 我在哪里 我附近有什么 决策规划 我要做什么 控制执行 我该怎么做 2、扫地机越障与脱困逻辑 3…

【Python入门第三十五天】Python丨文件打开

在服务器上打开文件 假设我们有以下文件&#xff0c;位于与 Python 相同的文件夹中。 demofile.txt Hello! Welcome to demofile.txt This file is for testing purposes. Good Luck!如需打开文件&#xff0c;请使用内建的 open() 函数。 open() 函数返回文件对象&#xff…

【树与二叉树】树与二叉树的概念及结构--详解介绍

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;数据结构 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录1.树概念及结构1.1 树…

正式环境关闭swagger

直接上步骤&#xff0c;如图&#xff1a;1&#xff0c;启动判断写在相应的环境配置文件中&#xff0c;根据条件判断是否启动 swagger &#xff1a;添加配置项&#xff1a;swagger.is.enable配置文件中添加&#xff1a;#是否激活 swagger true or falseswagger.is.enabletrue2&a…

【Linux系统】第八篇:Linux操作系统中的进程概念(冯诺依曼+操作系统+进程状态+进程优先级)

文章目录一、冯诺依曼体系结构&#xff08;硬件方面&#xff09;二、操作系统&#xff08;软件方面&#xff09;1、概念2、设计操作系统的目的3、定位4、如何理解 "管理"os完整体系构造理解 "管理"5、系统调用和库函数概念三、进程管理1、进程的概念2、描述…

学习系统编程No.10【文件描述符】

引言&#xff1a; 北京时间&#xff1a;2023/3/25&#xff0c;昨天摆烂一天&#xff0c;今天再次坐牢7小时&#xff0c;难受尽在不言中&#xff0c;并且对于笔试题&#xff0c;还是非常的困难&#xff0c;可能是我做题不够多&#xff0c;也可能是没有好好的总结之前做过的一些…

一篇文章教你快速弄懂 web自动化测试中的三种等待方式

目录 前言 1、强制等待 2、隐式等待 3、显式等待 总结&#xff1a; 前言 现在的网页很多都是动态加载的&#xff0c;如果页面的内容发生了改变&#xff0c;就需要时间来渲染。在咱们做web自动化测试的时候&#xff0c;由于代码是自动执行的&#xff0c;代码在执行的时候&a…

Chapter8.3:控制系统校正的根轨迹法

该系列博客主要讲述Matlab软件在自动控制方面的应用&#xff0c;如无自动控制理论基础&#xff0c;请先学习自动控制系列博文&#xff0c;该系列博客不再详细讲解自动控制理论知识。 自动控制理论基础相关链接&#xff1a;https://blog.csdn.net/qq_39032096/category_10287468…