简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Quelle est la différence entre Vue3 et Vue2 ? Comparez tout ça !

Quelle est la différence entre Vue3 et Vue2 ? Comparez tout ça !

青灯夜游
青灯夜游avant
2022-06-23 15:37:416093parcourir

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 !

Quelle est la différence entre Vue3 et Vue2 ? Comparez tout ça !

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

API facultative et API combinée

implémentez d'abord une La même logique ( cliquez pour changer de données de page) et regardez leurs différences directes

  • API facultative
<template>
<div @click="changeMsg">{{msg}}</div>
</template>
<script>
export default  {
  data(){
    return {
     msg:&#39;hello world&#39;
    }
  },
  methods:{
    changeMsg(){
      this.msg = &#39;hello juejin&#39;
    }
  }
}
</script>
  • API combinée
<template>
 <div @click="changeMsg">{{msg}}</div>
</template>

<script>
import { ref,defineComponent } from "vue";
export default defineComponent({
setup() {
    const msg = ref(&#39;hello world&#39;)
    const changeMsg = ()=>{
      msg.value = &#39;hello juejin&#39;
    }
return {
  msg,
  changeMsg
};
},
});
</script>
  • configuration Syntaxe sugar
<template>
  <div @click="changeMsg">{{ msg }}</div>
</template>

<script setup>
import { ref } from "vue";

const msg = ref(&#39;hello world&#39;)
const changeMsg = () => {
  msg.value = &#39;hello juejin&#39;
}
</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.

ref et réactif

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.

    reactive est plus recommandé pour définir des types de données complexes ref et est plus recommandé pour définir des types de base
cycle de vie
  • Le tableau suivant contient : la différence entre les cycles de vie de Vue2 et Vue3

Vue2 ( API facultative)

Vue3 (configuration)

Description

avantCréation--après la création de l'instance Appel avant que le DOM soit montéAppel de fin de montage du DOMAppelé avant la mise à jour des donnéesAppelé après la mise à jour des donnéesAppelé avant la destruction du composantAppelé après la destruction du composant
avant la création de l'instance créé
beforeMount onBeforeMount
monté onMounted
beforeUpdate onBeforeUpdate
updated onUp daté
beforeDestroy onBeforeUnmount
destroyed onUnmount

举个常用的onBeforeMount的例子

  • 选项式Api
<script>
export default  {
  mounted(){
    console.log(&#39;挂载完成&#39;)
  }
}
</script>
  • 组合式Api
<script>
import { onMounted,defineComponent } from "vue";
export default defineComponent({
setup() {
onMounted(()=>{
  console.log(&#39;挂载完成&#39;)
})
return {
onMounted
};
},
});
</script>
  • setup语法糖
<script setup>
import { onMounted } from "vue";
onMounted(()=>{
  console.log(&#39;挂载完成&#39;)
})
</script>

从上面可以看出Vue3中的组合式API采用hook函数引入生命周期；其实不止生命周期采用hook函数引入，像watch、computed、路由守卫等都是采用hook函数实现

总结

Vue3中的生命周期相对于Vue2做了一些调整，命名上发生了一些变化并且移除了beforeCreate和created，因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不再需要它们。

生命周期采用hook函数引入

watch和computed

  • 选项式API
<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>
  • 组合式Api
<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>
  • setup语法糖
<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实现起来会有很多差异；这里将介绍如下组件通信方式：

方式 Vue2 Vue3
父传子 props props
子传父 $emit emits
父传子 $attrs attrs
子传父 $listeners 无(合并到 attrs方式)
父传子 provide provide
子传父 inject inject
子组件访问父组件 $parent 无
父组件访问子组件 $children 无
父组件访问子组件 $ref expose&ref
兄弟传值 EventBus mitt

props

props是组件通信中最常用的通信方式之一。父组件通过v-bind传入，子组件通过props接收，下面是它的三种实现方式

  • 选项式API
//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import Child from &#39;./Child&#39;
export default {
  components:{
    Child
  },
  data() {
    return {
      parentMsg: &#39;父组件信息&#39;
    }
  }
}
</script>


//子组件

<template>
  <div>
    {{msg}}
  </div>
</template>
<script>
export default {
  props:[&#39;msg&#39;]
}
</script>
  • 组合式Api
//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import { ref,defineComponent } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const parentMsg = ref(&#39;父组件信息&#39;)
    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, &#39;msg&#39;)
        return {
            parentMsg
        };
    },
});
</script>
  • setup语法糖
//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const parentMsg = ref(&#39;父组件信息&#39;)
</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, &#39;msg&#39;)
</script>

注意

props中数据流是单项的，即子组件不可改变父组件传来的值

在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。

emit

子组件可以通过emit发布一个事件并传递一些参数，父组件通过v-onj进行这个事件的监听

  • 选项式API
//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from &#39;./Child&#39;
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(&#39;sendMsg&#39;,&#39;我是子组件数据&#39;)
    }
  }
}
</script>
  • 组合式Api
//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from &#39;./Child&#39;
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: [&#39;sendMsg&#39;],
    setup(props, ctx) {
        const sendFun = () => {
            ctx.emit(&#39;sendMsg&#39;, &#39;我是子组件数据&#39;)
        }
        return {
            sendFun
        };
    },
});
</script>
  • setup语法糖
//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script setup>
import Child from &#39;./Child&#39;
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([&#39;sendMsg&#39;])
const sendFun = () => {
    emits(&#39;sendMsg&#39;, &#39;我是子组件数据&#39;)
}
</script>

attrs和listeners

子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。

子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器，在Vue3中已经不再使用；但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器

  • 选项式API
//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2"  />
  </div>
</template>
<script>
import Child from &#39;./Child&#39;
export default {
  components:{
    Child
  },
  data(){
    return {
      msg1:&#39;子组件msg1&#39;,
      msg2:&#39;子组件msg2&#39;
    }
  },
  methods: {
    parentFun(val) {
      console.log(`父组件方法被调用,获得子组件传值：${val}`)
    }
  }
}
</script>

//子组件

<template>
  <div>
    <button @click="getParentFun">调用父组件方法</button>
  </div>
</template>
<script>
export default {
  methods:{
    getParentFun(){
      this.$listeners.parentFun(&#39;我是子组件数据&#39;)
    }
  },
  created(){
    //获取父组件中所有绑定属性
    console.log(this.$attrs)  //{"msg1": "子组件msg1","msg2": "子组件msg2"}
    //获取父组件中所有绑定方法    
    console.log(this.$listeners) //{parentFun:f}
  }
}
</script>
  • 组合式API
//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script>
import Child from &#39;./Child&#39;
import { defineComponent,ref } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const msg1 = ref(&#39;子组件msg1&#39;)
    const msg2 = ref(&#39;子组件msg2&#39;)
    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: [&#39;sendMsg&#39;],
    setup(props, ctx) {
        //获取父组件方法和事件
        console.log(ctx.attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
        const getParentFun = () => {
            //调用父组件方法
            ctx.attrs.onParentFun(&#39;我是子组件数据&#39;)
        }
        return {
            getParentFun
        };
    },
});
</script>
  • setup语法糖
//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script setup>
import Child from &#39;./Child&#39;
import { ref } from "vue";
const msg1 = ref(&#39;子组件msg1&#39;)
const msg2 = ref(&#39;子组件msg2&#39;)
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(&#39;我是子组件数据&#39;)
}
</script>

注意

Vue3中使用attrs调用父组件方法时，方法前需要加上on；如parentFun->onParentFun

provide/inject

provide：是一个对象，或者是一个返回对象的函数。里面包含要给子孙后代属性

inject：一个字符串数组，或者是一个对象。获取父组件或更高层次的组件provide的值，既在任何后代组件都可以通过inject获得

  • 选项式API
//父组件
<script>
import Child from &#39;./Child&#39;
export default {
  components: {
    Child
  },
  data() {
    return {
      msg1: &#39;子组件msg1&#39;,
      msg2: &#39;子组件msg2&#39;
    }
  },
  provide() {
    return {
      msg1: this.msg1,
      msg2: this.msg2
    }
  }
}
</script>

//子组件

<script>
export default {
  inject:[&#39;msg1&#39;,&#39;msg2&#39;],
  created(){
    //获取高层级提供的属性
    console.log(this.msg1) //子组件msg1
    console.log(this.msg2) //子组件msg2
  }
}
</script>
  • 组合式API
//父组件

<script>
import Child from &#39;./Child&#39;
import { ref, defineComponent,provide } from "vue";
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const msg1 = ref(&#39;子组件msg1&#39;)
    const msg2 = ref(&#39;子组件msg2&#39;)
    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(&#39;msg1&#39;).value) //子组件msg1
        console.log(inject(&#39;msg2&#39;).value) //子组件msg2
    },
});
</script>
  • setup语法糖
//父组件
<script setup>
import Child from &#39;./Child&#39;
import { ref,provide } from "vue";
const msg1 = ref(&#39;子组件msg1&#39;)
const msg2 = ref(&#39;子组件msg2&#39;)
provide("msg1",msg1)
provide("msg2",msg2)
</script>

//子组件

<script setup>
import { inject } from "vue";
console.log(inject(&#39;msg1&#39;).value) //子组件msg1
console.log(inject(&#39;msg2&#39;).value) //子组件msg2
</script>

说明

provide/inject一般在深层组件嵌套中使用合适。一般在组件开发中用的居多。

parent/children

$parent: 子组件获取父组件Vue实例，可以获取父组件的属性方法等

$children: 父组件获取子组件Vue实例，是一个数组，是直接儿子的集合，但并不保证子组件的顺序

  • Vue2
import Child from &#39;./Child&#39;
export default {
  components: {
    Child
  },
  created(){
    console.log(this.$children) //[Child实例]
    console.log(this.$parent)//父组件实例
  }
}

注意父组件获取到的$children并不是响应式的

expose&ref

$refs可以直接获取元素属性，同时也可以直接获取子组件实例

  • 选项式API
//父组件

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from &#39;./Child&#39;
export default {
  components: {
    Child
  },
  mounted(){
    //获取子组件属性
    console.log(this.$refs.child.msg) //子组件元素

    //调用子组件方法
    this.$refs.child.childFun(&#39;父组件信息&#39;)
  }
}
</script>

//子组件 

<template>
  <div>
    <div></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:&#39;子组件元素&#39;
    }
  },
  methods:{
    childFun(val){
      console.log(`子组件方法被调用,值${val}`)
    }
  }
}
</script>
  • 组合式API
//父组件

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from &#39;./Child&#39;
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(&#39;父组件信息&#39;)
    })
    return {
      child //必须return出去 否则获取不到实例
    }
  },
});
</script>

//子组件

<template>
    <div>
    </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
    setup() {
        const msg = ref(&#39;子组件元素&#39;)
        const childFun = (val) => {
            console.log(`子组件方法被调用,值${val}`)
        }
        return {
            msg,
            childFun
        }
    },
});
</script>
  • setup语法糖
//父组件

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script setup>
import Child from &#39;./Child&#39;
import { ref, onMounted } from "vue";
const child = ref() //注意命名需要和template中ref对应
onMounted(() => {
  //获取子组件属性
  console.log(child.value.msg) //子组件元素

  //调用子组件方法
  child.value.childFun(&#39;父组件信息&#39;)
})
</script>

//子组件

<template>
    <div>
    </div>
</template>
<script setup>
import { ref,defineExpose } from "vue";
const msg = ref(&#39;子组件元素&#39;)
const childFun = (val) => {
    console.log(`子组件方法被调用,值${val}`)
}
//必须暴露出去父组件才会获取到
defineExpose({
    childFun,
    msg
})
</script>

注意

通过ref获取子组件实例必须在页面挂载完成后才能获取。

在使用setup语法糖时候，子组件必须元素或方法暴露出去父组件才能获取到

EventBus/mitt

兄弟组件通信可以通过一个事件中心EventBus实现，既新建一个Vue实例来进行事件的监听，触发和销毁。

在Vue3中没有了EventBus兄弟组件通信，但是现在有了一个替代的方案mitt.js，原理还是 EventBus

  • 选项式API
//组件1
<template>
  <div>
    <button @click="sendMsg">传值</button>
  </div>
</template>
<script>
import Bus from &#39;./bus.js&#39;
export default {
  data(){
    return {
      msg:&#39;子组件元素&#39;
    }
  },
  methods:{
    sendMsg(){
      Bus.$emit(&#39;sendMsg&#39;,&#39;兄弟的值&#39;)
    }
  }
}
</script>

//组件2

<template>
  <div>
    组件2
  </div>
</template>
<script>
import Bus from &#39;./bus.js&#39;
export default {
  created(){
   Bus.$on(&#39;sendMsg&#39;,(val)=>{
    console.log(val);//兄弟的值
   })
  }
}
</script>

//bus.js

import Vue from "vue"
export default new Vue()
  • 组合式API

首先安装mitt

npm i mitt -S

然后像Vue2中bus.js一样新建mitt.js文件

mitt.js

import mitt from &#39;mitt&#39;
const Mitt = mitt()
export default Mitt
//组件1
<template>
     <button @click="sendMsg">传值</button>
</template>
<script>
import { defineComponent } from "vue";
import Mitt from &#39;./mitt.js&#39;
export default defineComponent({
    setup() {
        const sendMsg = () => {
            Mitt.emit(&#39;sendMsg&#39;,&#39;兄弟的值&#39;)
        }
        return {
           sendMsg
        }
    },
});
</script>

//组件2
<template>
  <div>
    组件2
  </div>
</template>
<script>
import { defineComponent, onUnmounted } from "vue";
import Mitt from &#39;./mitt.js&#39;
export default defineComponent({
  setup() {
    const getMsg = (val) => {
      console.log(val);//兄弟的值
    }
    Mitt.on(&#39;sendMsg&#39;, getMsg)
    onUnmounted(() => {
      //组件销毁 移除监听
      Mitt.off(&#39;sendMsg&#39;, getMsg)
    })

  },
});
</script>
  • setup语法糖
//组件1

<template>
    <button @click="sendMsg">传值</button>
</template>
<script setup>
import Mitt from &#39;./mitt.js&#39;
const sendMsg = () => {
    Mitt.emit(&#39;sendMsg&#39;, &#39;兄弟的值&#39;)
}
</script>

//组件2

<template>
  <div>
    组件2
  </div>
</template>
<script setup>
import { onUnmounted } from "vue";
import Mitt from &#39;./mitt.js&#39;
const getMsg = (val) => {
  console.log(val);//兄弟的值
}
Mitt.on(&#39;sendMsg&#39;, getMsg)
onUnmounted(() => {
  //组件销毁 移除监听
  Mitt.off(&#39;sendMsg&#39;, getMsg)
})
</script>

v-model和sync

v-model大家都很熟悉，就是双向绑定的语法糖。这里不讨论它在input标签的使用；只是看一下它和sync在组件中的使用

我们都知道Vue中的props是单向向下绑定的；每次父组件更新时，子组件中的所有props都会刷新为最新的值；但是如果在子组件中修改 props ，Vue会向你发出一个警告（无法在子组件修改父组件传递的值)；可能是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得混乱难以理解。

但是可以在父组件使用子组件的标签上声明一个监听事件，子组件想要修改props的值时使用$emit触发事件并传入新的值，让父组件进行修改。

为了方便vue就使用了v-model和sync语法糖。

  • 选项式API
//父组件

<template>
  <div>
   <!-- 
      完整写法
      <Child :msg="msg" @update:changePval="msg=$event" /> 
      -->
    <Child :changePval.sync="msg" />
    {{msg}}
  </div>
</template>
<script>
import Child from &#39;./Child&#39;
export default {
  components: {
    Child
  },
  data(){
    return {
      msg:&#39;父组件值&#39;
    }
  }
  
}
</script>

//子组件

<template>
  <div>
    <button @click="changePval">改变父组件值</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:&#39;子组件元素&#39;
    }
  },
  methods:{
    changePval(){
       //点击则会修改父组件msg的值
      this.$emit(&#39;update:changePval&#39;,&#39;改变后的值&#39;)
    }
  }
}
</script>
  • setup语法糖

因为使用的都是前面提过的知识，所以这里就不展示组合式API的写法了

//父组件

<template>
  <div>
    <!-- 
      完整写法
      <Child :msg="msg" @update:changePval="msg=$event" /> 
      -->
    <Child v-model:changePval="msg" />
    {{msg}}
  </div>
</template>
<script setup>
import Child from &#39;./Child&#39;
import { ref } from &#39;vue&#39;
const msg = ref(&#39;父组件值&#39;)
</script>

//子组件

<template>
    <button @click="changePval">改变父组件值</button>
</template>
<script setup>
import { defineEmits } from &#39;vue&#39;;
const emits = defineEmits([&#39;changePval&#39;])
const changePval = () => {
    //点击则会修改父组件msg的值
    emits(&#39;update:changePval&#39;,&#39;改变后的值&#39;)
}
</script>

总结

vue3中移除了sync的写法，取而代之的式v-model:event的形式

其v-model:changePval="msg"或者:changePval.sync="msg"的完整写法为:msg="msg" @update:changePval="msg=$event"。

所以子组件需要发送update:changePval事件进行修改父组件的值

路由

vue3和vue2路由常用功能只是写法上有些区别

  • 选项式API
<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>
  • 组合式API
<template>
  <div>
    <button @click="toPage">路由跳转</button>
  </div>
</template>
<script>
import { defineComponent } from &#39;vue&#39;
import { useRoute, useRouter } from &#39;vue-router&#39;
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>
  • setup语法糖

我之所以用beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的；大家都知道setup中组件实例已经创建，是能够获取到组件实例的。而beforeRouteEnter是再进入路由前触发的，此时组件还未创建，所以是无法setup中的；如果想在setup语法糖中使用则需要再写一个setup语法糖的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 &#39;vue-router&#39;
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的同学要抓紧了!

Vue3文档地址：

https://staging-cn.vuejs.org/

本文转载自：https://juejin.cn/post/7111129583713255461

【相关视频教程推荐：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!

数据类型 回调函数 字符串 class Event JS 对象 事件 input https
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Je vais vous guider étape par étape pour développer un jeu de backgammon en utilisant Vue !Article suivant：Je vais vous guider étape par étape pour développer un jeu de backgammon en utilisant Vue !

Articles Liés

Voir plus