Maison >interface Web >Voir.js >Quelle est la différence entre Vue3 et Vue2 ? Comparez tout ça !
Quelle est la différence entre Vue3 et Vue2 ? L'article suivant vous donnera une comparaison complète de Vue3 et Vue2 et parlera des différences entre Vue3 et Vue2. J'espère qu'il vous sera utile !
Je suis très intéressé par Vue3 depuis sa sortie et j'ai pensé à le mettre en production par l'entreprise. Cependant, compte tenu des nombreuses incertitudes, j'ai temporairement essayé quelques petites fonctions. L'API combinée est très adaptée au développement (sentiment personnel), surtout après que Vue3.2 a lancé le sucre de syntaxe de configuration, elle était si populaire.
Presque tous les nouveaux projets de l’entreprise utilisent ensuite Vue3. Je développe avec Vue3 depuis près de six mois, j'ai donc écrit cet article pour faire une comparaison et un résumé de Vue2 et Vue3. Premièrement, il s'agit de faire quelques enregistrements du développement utilisant Vue3 pendant cette période, et deuxièmement, c'est. pour aider plus d'amis plus rapidement Démarrez avec Vue3. (Partage vidéo d'apprentissage : Tutoriel vidéo Vuejs)
Cet article utilise principalement l'API facultative, l'API combinée et le sucre de syntaxe de configuration pour réaliser leurs différences directes
implémentez d'abord une La même logique ( cliquez pour changer de données de page) et regardez leurs différences directes
<template> <div @click="changeMsg">{{msg}}</div> </template> <script> export default { data(){ return { msg:'hello world' } }, methods:{ changeMsg(){ this.msg = 'hello juejin' } } } </script>
<template> <div @click="changeMsg">{{msg}}</div> </template> <script> import { ref,defineComponent } from "vue"; export default defineComponent({ setup() { const msg = ref('hello world') const changeMsg = ()=>{ msg.value = 'hello juejin' } return { msg, changeMsg }; }, }); </script>
<template> <div @click="changeMsg">{{ msg }}</div> </template> <script setup> import { ref } from "vue"; const msg = ref('hello world') const changeMsg = () => { msg.value = 'hello juejin' } </script>
Résumé:
API facultative Données et méthodes, y compris les suivantes les montres, calculées, etc., sont gérées séparément, tandis que l'API combinée rassemble la logique associée (similaire au développement js natif).
Le sucre de syntaxe de configuration permet aux méthodes variables de ne plus avoir besoin d'écrire de retour, et les composants suivants et même les instructions personnalisées peuvent être automatiquement obtenus dans notre modèle.
Nous savons tous que dans l'API combinée, les données de la fonction de données sont réactives et la page changera à mesure que les données dans les données changent. Cependant, il n'y a pas de fonction de données dans la fonction combinée. API. Comment ? Ainsi, afin de résoudre ce problème, Vue3 a introduit les fonctions ref et reactive pour rendre les variables réactives. valeur en js, vous devez ajouter .value.
Vue2 ( API facultative)Vue3 (configuration)Description
avant la création de l'instance | créé | |||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
beforeMount | onBeforeMount | |||||||||||||||||||||||||||||||||
monté | onMounted | |||||||||||||||||||||||||||||||||
beforeUpdate | onBeforeUpdate | |||||||||||||||||||||||||||||||||
updated | onUp daté | |||||||||||||||||||||||||||||||||
beforeDestroy | onBeforeUnmount | |||||||||||||||||||||||||||||||||
destroyed | onUnmount | |||||||||||||||||||||||||||||||||
举个常用的onBeforeMount的例子
<script> export default { mounted(){ console.log('挂载完成') } } </script>
<script> import { onMounted,defineComponent } from "vue"; export default defineComponent({ setup() { onMounted(()=>{ console.log('挂载完成') }) return { onMounted }; }, }); </script>
<script setup> import { onMounted } from "vue"; onMounted(()=>{ console.log('挂载完成') }) </script> 从上面可以看出Vue3中的组合式API采用hook函数引入生命周期;其实不止生命周期采用hook函数引入,像watch、computed、路由守卫等都是采用hook函数实现 总结 Vue3中的生命周期相对于Vue2做了一些调整,命名上发生了一些变化并且移除了beforeCreate和created,因为setup是围绕beforeCreate和created生命周期钩子运行的,所以不再需要它们。 生命周期采用hook函数引入 watch和computed
<template> <div>{{ addSum }}</div> </template> <script> export default { data() { return { a: 1, b: 2 } }, computed: { addSum() { return this.a + this.b } }, watch:{ a(newValue, oldValue){ console.log(`a从${oldValue}变成了${newValue}`) } } } </script>
<template> <div>{{addSum}}</div> </template> <script> import { computed, ref, watch, defineComponent } from "vue"; export default defineComponent({ setup() { const a = ref(1) const b = ref(2) let addSum = computed(() => { return a.value+b.value }) watch(a, (newValue, oldValue) => { console.log(`a从${oldValue}变成了${newValue}`) }) return { addSum }; }, }); </script>
<template> <div>{{ addSum }}</div> </template> <script setup> import { computed, ref, watch } from "vue"; const a = ref(1) const b = ref(2) let addSum = computed(() => { return a.value + b.value }) watch(a, (newValue, oldValue) => { console.log(`a从${oldValue}变成了${newValue}`) }) </script> Vue3中除了watch,还引入了副作用监听函数watchEffect,用过之后我发现它和React中的useEffect很像,只不过watchEffect不需要传入依赖项。 那么什么是watchEffect呢? watchEffect它会立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。 比如这段代码 <template> <div>{{ watchTarget }}</div> </template> <script setup> import { watchEffect,ref } from "vue"; const watchTarget = ref(0) watchEffect(()=>{ console.log(watchTarget.value) }) setInterval(()=>{ watchTarget.value++ },1000) </script> 首先刚进入页面就会执行watchEffect中的函数打印出:0,随着定时器的运行,watchEffect监听到依赖数据的变化回调函数每隔一秒就会执行一次 总结 computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect 相当于将 watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行。不同于 watch的是watchEffect的回调函数会被立即执行,即({ immediate: true }) 组件通信Vue中组件通信方式有很多,其中选项式API和组合式API实现起来会有很多差异;这里将介绍如下组件通信方式:
propsprops是组件通信中最常用的通信方式之一。父组件通过v-bind传入,子组件通过props接收,下面是它的三种实现方式
//父组件 <template> <div> <Child :msg="parentMsg" /> </div> </template> <script> import Child from './Child' export default { components:{ Child }, data() { return { parentMsg: '父组件信息' } } } </script> //子组件 <template> <div> {{msg}} </div> </template> <script> export default { props:['msg'] } </script>
//父组件 <template> <div> <Child :msg="parentMsg" /> </div> </template> <script> import { ref,defineComponent } from 'vue' import Child from './Child.vue' export default defineComponent({ components:{ Child }, setup() { const parentMsg = ref('父组件信息') return { parentMsg }; }, }); </script> //子组件 <template> <div> {{ parentMsg }} </div> </template> <script> import { defineComponent,toRef } from "vue"; export default defineComponent({ props: ["msg"],// 如果这行不写,下面就接收不到 setup(props) { console.log(props.msg) //父组件信息 let parentMsg = toRef(props, 'msg') return { parentMsg }; }, }); </script>
//父组件 <template> <div> <Child :msg="parentMsg" /> </div> </template> <script setup> import { ref } from 'vue' import Child from './Child.vue' const parentMsg = ref('父组件信息') </script> //子组件 <template> <div> {{ parentMsg }} </div> </template> <script setup> import { toRef, defineProps } from "vue"; const props = defineProps(["msg"]); console.log(props.msg) //父组件信息 let parentMsg = toRef(props, 'msg') </script> 注意 props中数据流是单项的,即子组件不可改变父组件传来的值 在组合式API中,如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。 emit子组件可以通过emit发布一个事件并传递一些参数,父组件通过v-onj进行这个事件的监听
//父组件 <template> <div> <Child @sendMsg="getFromChild" /> </div> </template> <script> import Child from './Child' export default { components:{ Child }, methods: { getFromChild(val) { console.log(val) //我是子组件数据 } } } </script> // 子组件 <template> <div> <button @click="sendFun">send</button> </div> </template> <script> export default { methods:{ sendFun(){ this.$emit('sendMsg','我是子组件数据') } } } </script>
//父组件 <template> <div> <Child @sendMsg="getFromChild" /> </div> </template> <script> import Child from './Child' import { defineComponent } from "vue"; export default defineComponent({ components: { Child }, setup() { const getFromChild = (val) => { console.log(val) //我是子组件数据 } return { getFromChild }; }, }); </script> //子组件 <template> <div> <button @click="sendFun">send</button> </div> </template> <script> import { defineComponent } from "vue"; export default defineComponent({ emits: ['sendMsg'], setup(props, ctx) { const sendFun = () => { ctx.emit('sendMsg', '我是子组件数据') } return { sendFun }; }, }); </script>
//父组件 <template> <div> <Child @sendMsg="getFromChild" /> </div> </template> <script setup> import Child from './Child' const getFromChild = (val) => { console.log(val) //我是子组件数据 } </script> //子组件 <template> <div> <button @click="sendFun">send</button> </div> </template> <script setup> import { defineEmits } from "vue"; const emits = defineEmits(['sendMsg']) const sendFun = () => { emits('sendMsg', '我是子组件数据') } </script> attrs和listeners子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。 子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器,在Vue3中已经不再使用;但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器
//父组件 <template> <div> <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" /> </div> </template> <script> import Child from './Child' export default { components:{ Child }, data(){ return { msg1:'子组件msg1', msg2:'子组件msg2' } }, methods: { parentFun(val) { console.log(`父组件方法被调用,获得子组件传值:${val}`) } } } </script> //子组件 <template> <div> <button @click="getParentFun">调用父组件方法</button> </div> </template> <script> export default { methods:{ getParentFun(){ this.$listeners.parentFun('我是子组件数据') } }, created(){ //获取父组件中所有绑定属性 console.log(this.$attrs) //{"msg1": "子组件msg1","msg2": "子组件msg2"} //获取父组件中所有绑定方法 console.log(this.$listeners) //{parentFun:f} } } </script>
//父组件 <template> <div> <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" /> </div> </template> <script> import Child from './Child' import { defineComponent,ref } from "vue"; export default defineComponent({ components: { Child }, setup() { const msg1 = ref('子组件msg1') const msg2 = ref('子组件msg2') const parentFun = (val) => { console.log(`父组件方法被调用,获得子组件传值:${val}`) } return { parentFun, msg1, msg2 }; }, }); </script> //子组件 <template> <div> <button @click="getParentFun">调用父组件方法</button> </div> </template> <script> import { defineComponent } from "vue"; export default defineComponent({ emits: ['sendMsg'], setup(props, ctx) { //获取父组件方法和事件 console.log(ctx.attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"} const getParentFun = () => { //调用父组件方法 ctx.attrs.onParentFun('我是子组件数据') } return { getParentFun }; }, }); </script>
//父组件 <template> <div> <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" /> </div> </template> <script setup> import Child from './Child' import { ref } from "vue"; const msg1 = ref('子组件msg1') const msg2 = ref('子组件msg2') const parentFun = (val) => { console.log(`父组件方法被调用,获得子组件传值:${val}`) } </script> //子组件 <template> <div> <button @click="getParentFun">调用父组件方法</button> </div> </template> <script setup> import { useAttrs } from "vue"; const attrs = useAttrs() //获取父组件方法和事件 console.log(attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"} const getParentFun = () => { //调用父组件方法 attrs.onParentFun('我是子组件数据') } </script> 注意 Vue3中使用attrs调用父组件方法时,方法前需要加上on;如parentFun->onParentFun provide/injectprovide:是一个对象,或者是一个返回对象的函数。里面包含要给子孙后代属性 inject:一个字符串数组,或者是一个对象。获取父组件或更高层次的组件provide的值,既在任何后代组件都可以通过inject获得
//父组件 <script> import Child from './Child' export default { components: { Child }, data() { return { msg1: '子组件msg1', msg2: '子组件msg2' } }, provide() { return { msg1: this.msg1, msg2: this.msg2 } } } </script> //子组件 <script> export default { inject:['msg1','msg2'], created(){ //获取高层级提供的属性 console.log(this.msg1) //子组件msg1 console.log(this.msg2) //子组件msg2 } } </script>
//父组件 <script> import Child from './Child' import { ref, defineComponent,provide } from "vue"; export default defineComponent({ components:{ Child }, setup() { const msg1 = ref('子组件msg1') const msg2 = ref('子组件msg2') provide("msg1", msg1) provide("msg2", msg2) return { } }, }); </script> //子组件 <template> <div> <button @click="getParentFun">调用父组件方法</button> </div> </template> <script> import { inject, defineComponent } from "vue"; export default defineComponent({ setup() { console.log(inject('msg1').value) //子组件msg1 console.log(inject('msg2').value) //子组件msg2 }, }); </script>
//父组件 <script setup> import Child from './Child' import { ref,provide } from "vue"; const msg1 = ref('子组件msg1') const msg2 = ref('子组件msg2') provide("msg1",msg1) provide("msg2",msg2) </script> //子组件 <script setup> import { inject } from "vue"; console.log(inject('msg1').value) //子组件msg1 console.log(inject('msg2').value) //子组件msg2 </script> 说明 provide/inject一般在深层组件嵌套中使用合适。一般在组件开发中用的居多。 parent/children$parent: 子组件获取父组件Vue实例,可以获取父组件的属性方法等 $children: 父组件获取子组件Vue实例,是一个数组,是直接儿子的集合,但并不保证子组件的顺序
import Child from './Child' export default { components: { Child }, created(){ console.log(this.$children) //[Child实例] console.log(this.$parent)//父组件实例 } } 注意父组件获取到的 expose&ref$refs可以直接获取元素属性,同时也可以直接获取子组件实例
//父组件 <template> <div> <Child ref="child" /> </div> </template> <script> import Child from './Child' export default { components: { Child }, mounted(){ //获取子组件属性 console.log(this.$refs.child.msg) //子组件元素 //调用子组件方法 this.$refs.child.childFun('父组件信息') } } </script> //子组件 <template> <div> <div></div> </div> </template> <script> export default { data(){ return { msg:'子组件元素' } }, methods:{ childFun(val){ console.log(`子组件方法被调用,值${val}`) } } } </script>
//父组件 <template> <div> <Child ref="child" /> </div> </template> <script> import Child from './Child' import { ref, defineComponent, onMounted } from "vue"; export default defineComponent({ components: { Child }, setup() { const child = ref() //注意命名需要和template中ref对应 onMounted(() => { //获取子组件属性 console.log(child.value.msg) //子组件元素 //调用子组件方法 child.value.childFun('父组件信息') }) return { child //必须return出去 否则获取不到实例 } }, }); </script> //子组件 <template> <div> </div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComponent({ setup() { const msg = ref('子组件元素') const childFun = (val) => { console.log(`子组件方法被调用,值${val}`) } return { msg, childFun } }, }); </script>
//父组件 <template> <div> <Child ref="child" /> </div> </template> <script setup> import Child from './Child' import { ref, onMounted } from "vue"; const child = ref() //注意命名需要和template中ref对应 onMounted(() => { //获取子组件属性 console.log(child.value.msg) //子组件元素 //调用子组件方法 child.value.childFun('父组件信息') }) </script> //子组件 <template> <div> </div> </template> <script setup> import { ref,defineExpose } from "vue"; const msg = ref('子组件元素') const childFun = (val) => { console.log(`子组件方法被调用,值${val}`) } //必须暴露出去父组件才会获取到 defineExpose({ childFun, msg }) </script> 注意 通过ref获取子组件实例必须在页面挂载完成后才能获取。 在使用setup语法糖时候,子组件必须元素或方法暴露出去父组件才能获取到 EventBus/mitt兄弟组件通信可以通过一个事件中心EventBus实现,既新建一个Vue实例来进行事件的监听,触发和销毁。 在Vue3中没有了EventBus兄弟组件通信,但是现在有了一个替代的方案
//组件1 <template> <div> <button @click="sendMsg">传值</button> </div> </template> <script> import Bus from './bus.js' export default { data(){ return { msg:'子组件元素' } }, methods:{ sendMsg(){ Bus.$emit('sendMsg','兄弟的值') } } } </script> //组件2 <template> <div> 组件2 </div> </template> <script> import Bus from './bus.js' export default { created(){ Bus.$on('sendMsg',(val)=>{ console.log(val);//兄弟的值 }) } } </script> //bus.js import Vue from "vue" export default new Vue()
首先安装mitt npm i mitt -S 然后像Vue2中 mitt.js import mitt from 'mitt' const Mitt = mitt() export default Mitt //组件1 <template> <button @click="sendMsg">传值</button> </template> <script> import { defineComponent } from "vue"; import Mitt from './mitt.js' export default defineComponent({ setup() { const sendMsg = () => { Mitt.emit('sendMsg','兄弟的值') } return { sendMsg } }, }); </script> //组件2 <template> <div> 组件2 </div> </template> <script> import { defineComponent, onUnmounted } from "vue"; import Mitt from './mitt.js' export default defineComponent({ setup() { const getMsg = (val) => { console.log(val);//兄弟的值 } Mitt.on('sendMsg', getMsg) onUnmounted(() => { //组件销毁 移除监听 Mitt.off('sendMsg', getMsg) }) }, }); </script>
//组件1 <template> <button @click="sendMsg">传值</button> </template> <script setup> import Mitt from './mitt.js' const sendMsg = () => { Mitt.emit('sendMsg', '兄弟的值') } </script> //组件2 <template> <div> 组件2 </div> </template> <script setup> import { onUnmounted } from "vue"; import Mitt from './mitt.js' const getMsg = (val) => { console.log(val);//兄弟的值 } Mitt.on('sendMsg', getMsg) onUnmounted(() => { //组件销毁 移除监听 Mitt.off('sendMsg', getMsg) }) </script> v-model和syncv-model大家都很熟悉,就是双向绑定的语法糖。这里不讨论它在input标签的使用;只是看一下它和sync在组件中的使用 我们都知道Vue中的props是单向向下绑定的;每次父组件更新时,子组件中的所有props都会刷新为最新的值;但是如果在子组件中修改 props ,Vue会向你发出一个警告(无法在子组件修改父组件传递的值);可能是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得混乱难以理解。 但是可以在父组件使用子组件的标签上声明一个监听事件,子组件想要修改props的值时使用$emit触发事件并传入新的值,让父组件进行修改。 为了方便vue就使用了
//父组件 <template> <div> <!-- 完整写法 <Child :msg="msg" @update:changePval="msg=$event" /> --> <Child :changePval.sync="msg" /> {{msg}} </div> </template> <script> import Child from './Child' export default { components: { Child }, data(){ return { msg:'父组件值' } } } </script> //子组件 <template> <div> <button @click="changePval">改变父组件值</button> </div> </template> <script> export default { data(){ return { msg:'子组件元素' } }, methods:{ changePval(){ //点击则会修改父组件msg的值 this.$emit('update:changePval','改变后的值') } } } </script>
因为使用的都是前面提过的知识,所以这里就不展示组合式API的写法了 //父组件 <template> <div> <!-- 完整写法 <Child :msg="msg" @update:changePval="msg=$event" /> --> <Child v-model:changePval="msg" /> {{msg}} </div> </template> <script setup> import Child from './Child' import { ref } from 'vue' const msg = ref('父组件值') </script> //子组件 <template> <button @click="changePval">改变父组件值</button> </template> <script setup> import { defineEmits } from 'vue'; const emits = defineEmits(['changePval']) const changePval = () => { //点击则会修改父组件msg的值 emits('update:changePval','改变后的值') } </script> 总结 vue3中移除了sync的写法,取而代之的式v-model:event的形式 其 所以子组件需要发送 路由vue3和vue2路由常用功能只是写法上有些区别
<template> <div> <button @click="toPage">路由跳转</button> </div> </template> <script> export default { beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 next() }, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 next() }, beforeRouteLeave ((to, from, next)=>{//离开当前的组件,触发 next() }), beforeRouteLeave((to, from, next)=>{//离开当前的组件,触发 next() }), methods:{ toPage(){ //路由跳转 this.$router.push(xxx) } }, created(){ //获取params this.$router.params //获取query this.$router.query } } </script>
<template> <div> <button @click="toPage">路由跳转</button> </div> </template> <script> import { defineComponent } from 'vue' import { useRoute, useRouter } from 'vue-router' export default defineComponent({ beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 next() }, beforeRouteLeave ((to, from, next)=>{//离开当前的组件,触发 next() }), beforeRouteLeave((to, from, next)=>{//离开当前的组件,触发 next() }), setup() { const router = useRouter() const route = useRoute() const toPage = () => { router.push(xxx) } //获取params 注意是route route.params //获取query route.query return { toPage } }, }); </script>
我之所以用 <template> <div> <button @click="toPage">路由跳转</button> </div> </template> <script> export default { beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 next() }, }; </script> <script setup> import { useRoute, useRouter,onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router' const router = useRouter() const route = useRoute() const toPage = () => { router.push(xxx) } //获取params 注意是route route.params //获取query route.query //路由守卫 onBeforeRouteUpdate((to, from, next)=>{//当前组件路由改变后,进行触发 next() }) onBeforeRouteLeave((to, from, next)=>{//离开当前的组件,触发 next() }) </script> 写在最后通过以上写法的对比会发现setup语法糖的形式最为便捷而且更符合开发者习惯;未来Vue3的开发应该会大面积使用这种形式。目前Vue3已经成为了Vue的默认版本,后续维护应该也会以Vue3为主;所以还没开始学习Vue3的同学要抓紧了!
【相关视频教程推荐:web前端】 |
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!