想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!

从Vue3发布以来，我就一直对其非常感兴趣，就一直想着将其投入公司的生产中，但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试；慢慢的发现组合式Api的形式非常适合开发（个人感觉），尤其是Vue3.2推出了setup语法糖后直呼真香。后面公司的新项目几乎全部采用了Vue3了。使用Vue3开发也将近大半年了，所以写了这篇文章对Vue2和Vue3做了一个对比总结，一是为了对这段时间使用Vue3开发做些记录，二是为了帮助更多的小伙伴更快的上手Vue3。

本篇文章主要采用选项式Api，组合式Api，setup语法糖实现它们直接的差异

选项式Api与组合式Api

首先实现一个同样的逻辑(点击切换页面数据)看一下它们直接的区别

选项式Api

<template><div @click="changeMsg">{{msg}}</div></template><script>export default  {  data(){    return {     msg:'hello world'
    }
  },  methods:{    changeMsg(){      this.msg = 'hello juejin'
    }
  }
}</script>

组合式Api

<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>

setup 语法糖

<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>

总结：

选项式Api是将data和methods包括后面的watch，computed等分开管理，而组合式Api则是将相关逻辑放到了一起（类似于原生js开发）。

setup语法糖则可以让变量方法不用再写return，后面的组件甚至是自定义指令也可以在我们的template中自动获得。

ref 和 reactive

我们都知道在组合式api中，data函数中的数据都具有响应式，页面会随着data中的数据变化而变化，而组合式api中不存在data函数该如何呢？所以为了解决这个问题Vue3引入了ref和reactive函数来将使得变量成为响应式的数据

组合式Api

<script>import { ref,reactive,defineComponent } from "vue";export default defineComponent({setup() {let msg = ref('hello world')let obj = reactive({    name:'juejin',    age:3})const changeData = () => {
  msg.value = 'hello juejin'
  obj.name = 'hello world'}return {
msg,
obj,
changeData
};
},
});</script>

setup语法糖

<script setup>import { ref,reactive } from "vue";let msg = ref('hello world')let obj = reactive({    name:'juejin',    age:3})const changeData = () => {
  msg.value = 'hello juejin'
  obj.name = 'hello world'}</script>

总结：

使用ref的时候在js中取值的时候需要加上.value。

reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型

生命周期

下表包含：Vue2和Vue3生命周期的差异

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('挂载完成')
  }
}</script>

组合式Api

<script>import { onMounted,defineComponent } from "vue";export default defineComponent({setup() {onMounted(()=>{  console.log('挂载完成')
})return {
onMounted
};
},
});</script>

setup语法糖

<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

选项式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 './Child'export default {  components:{    Child
  },  data() {    return {      parentMsg: '父组件信息'
    }
  }
}</script>//子组件<template>
  <div>
    {{msg}}  </div></template><script>export default {  props:['msg']
}</script>

组合式Api

//父组件<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>

setup语法糖

//父组件<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进行这个事件的监听

选项式API

//父组件<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>

组合式Api

//父组件<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>

setup语法糖

//父组件<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事件监听器

选项式API

//父组件<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>

组合式API

//父组件<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>

setup语法糖

//父组件<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/inject

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

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

选项式API

//父组件<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>

组合式API

//父组件<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>

setup语法糖

//父组件<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) //子组件msg1console.log(inject('msg2').value) //子组件msg2</script>

说明

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

parent/children

$parent: 子组件获取父组件Vue实

想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!

选项式Api与组合式Api

ref 和 reactive

生命周期

watch和computed

组件通信

props

emit

attrs和listeners

provide/inject

parent/children

想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!

相关阅读

栏目

最新发布

热门标签