cari

Rumah >hujung hadapan web >View.js >Apakah perbezaan antara Vue3 dan Vue2? Bandingkan semuanya!

Apakah perbezaan antara Vue3 dan Vue2? Bandingkan semuanya!

青灯夜游
青灯夜游ke hadapan
2022-06-23 15:37:416216semak imbas

Apakah perbezaan antara Vue3 dan Vue2? Artikel berikut akan memberi anda perbandingan menyeluruh Vue3 dan Vue2, dan bercakap tentang perbezaan antara Vue3 dan Vue2. Saya harap ia akan membantu anda.

Apakah perbezaan antara Vue3 dan Vue2? Bandingkan semuanya!

Saya sangat berminat dengan Vue3 sejak ia dikeluarkan, dan saya telah memikirkan untuk memasukkannya ke dalam pengeluaran syarikat, tetapi saya mula mempertimbangkan banyak ketidakpastian. Buat masa ini, saya mencuba beberapa fungsi yang sangat kecil; perlahan-lahan saya mendapati bahawa gabungan bentuk API sangat sesuai untuk pembangunan (perasaan peribadi), terutamanya selepas Vue3.2 melancarkan gula sintaks persediaan, ia sangat popular.

Hampir semua projek baharu syarikat kemudiannya menggunakan Vue3. Saya telah membangun dengan Vue3 selama hampir setengah tahun, jadi saya menulis artikel ini untuk membuat perbandingan dan ringkasan Vue2 dan Vue3 Pertama, ia adalah untuk membuat beberapa rekod pembangunan menggunakan Vue3 dalam tempoh ini, dan kedua, ia untuk membantu lebih ramai rakan dengan lebih pantas Bermula dengan Vue3. (Belajar perkongsian video: tutorial video vuejs)

Artikel ini menggunakan API pilihan, API gabungan dan gula sintaks persediaan untuk merealisasikan perbezaan langsungnya

Pilihan Api dan gabungan Api

Mula-mula laksanakan logik yang sama (klik untuk menukar data halaman) dan lihat perbezaan langsungnya

  • Api Pilihan
<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 Gabungan
<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>
  • susun sintaks gula
<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>

Ringkasan:

API pilihan mengurus data dan kaedah termasuk jam tangan berikut, dikira, dsb. secara berasingan, manakala gabungan API menggabungkan logik yang berkaitan (serupa dengan pembangunan js asli).

Penyediaan gula sintaks membolehkan kaedah berubah-ubah tidak lagi perlu menulis pulangan, dan komponen seterusnya dan juga arahan tersuai boleh diperoleh secara automatik dalam templat kami.

ref dan reaktif

Kita semua tahu bahawa dalam gabungan API, data dalam fungsi data adalah responsif dan halaman akan berubah sebagai data dalam data perubahan. Bagaimana jika fungsi data tidak wujud dalam gabungan API? Jadi untuk menyelesaikan masalah ini, Vue3 memperkenalkan fungsi ref dan reaktif untuk menjadikan pembolehubah data responsif

  • Api Gabungan
<script>
import { ref,reactive,defineComponent } from "vue";
export default defineComponent({
setup() {
let msg = ref(&#39;hello world&#39;)
let obj = reactive({
    name:&#39;juejin&#39;,
    age:3
})
const changeData = () => {
  msg.value = &#39;hello juejin&#39;
  obj.name = &#39;hello world&#39;
}
return {
msg,
obj,
changeData
};
},
});
</script>
  • sintaks persediaan Gula 
<script setup>
import { ref,reactive } from "vue";
let msg = ref(&#39;hello world&#39;)
let obj = reactive({
    name:&#39;juejin&#39;,
    age:3
})
const changeData = () => {
  msg.value = &#39;hello juejin&#39;
  obj.name = &#39;hello world&#39;
}
</script>

Ringkasan:

Apabila menggunakan ref, anda perlu menambah .value apabila mendapat nilai dalam js.

reaktif lebih disyorkan untuk mentakrifkan jenis data kompleks ref dan lebih disyorkan untuk mentakrifkan jenis asas

kitaran hayat

Jadual berikut mengandungi: Vue2 dan kitaran hayat Vue3 Perbezaan

Vue2(选项式API) Vue3(setup) 描述
beforeCreate - 实例创建前
created - 实例创建后
beforeMount onBeforeMount DOM挂载前调用
mounted onMounted DOM挂载完成调用
beforeUpdate onBeforeUpdate 数据更新之前被调用
updated onUpdated 数据更新之后被调用
beforeDestroy onBeforeUnmount 组件销毁前调用
destroyed onUnmounted 组件销毁完成调用

举个常用的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前端】

Atas ialah kandungan terperinci Apakah perbezaan antara Vue3 dan Vue2? Bandingkan semuanya!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

数据类型 回调函数 字符串 class Event JS 对象 事件 input https
Kenyataan：
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Saya akan membawa anda langkah demi langkah untuk membangunkan permainan backgammon menggunakan Vue!Artikel seterusnya：Saya akan membawa anda langkah demi langkah untuk membangunkan permainan backgammon menggunakan Vue!

Artikel berkaitan

Lihat lagi