vue3和vue2的区别

Vue3新特性

Performance:性能更比vue2强

Tree shaking support:可以将无用模块“剪辑”，仅打包需要的。（即导入的模块就打包）

Composition API :组合API

Fragment,Teleport,Suspense:”碎片”，Teleport即Portal传送门，“悬念”

Better TypeScript support:更优秀的Ts支持

Custom Renderer API:暴露了自定义渲染的API。

一.定义组件数据

vue2中通过data的方式来定义一些当前组件的数据

data(){
    return{
      message:"我是消息"
    }
  },

vue3利用ref或reactive来定义一些当前组件的数据

1.在<script>导入相关组件

import {ref,reactive} from "vue"

2.在setup中用ref和reactive来定义一些当前的组件数据

  setup(){

    const message=ref("我是消息")

    const names=reactive({//reactive声明复杂一些的数据，如对象，列表

      list:["iwen","ime","frank"]

    })

    return{

      message,

      names

    }

  }

二.定义组件内部方法

vue2中通过methods的方式来定义一些当前组件的方法

例：点击按钮的点击事件响应

  methods:{

    clickhandle(){

      console.log("改变")

    }

  },

vue3中直接在setup中采用function方法

 function clickhandle(){

      console.log("改变")

    }

还需在return中返回。

三.传递数据

在vue3中传递数据，首先要对传递的数据进行类型声明

 props:{

    msg:String,

  },

然后在setup后的（）中添加props

  setup(props){

    console.log(props.msg)
}

这样就可以打印传递的数据。

在vue2中，组件的方法中可以通过this获取到当前组件的实例，并执行data变量的修改，方法的调用，组件的通信等等，但在vue3中，setup()在beforeCreate和created时机就已调用，无法使用和vue2一样的this,但是可以通过接收setup（props,ctx）的方法，获取到当前组件的实例和props.即vue3中setup中没有this关键字。ctx就是当前实例对象。

四.生命周期函数

Vue2	Vue3
beforeCreated	无
created	无
beforeMounted	onBeforeMounted
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmount	onUnmount

Vue2中是直接生命周期函数

Vue3是在setup中加入生命周期函数

首先引入生命周期函数。

import {onMounted} from "vue"

然后在setup中写入

 onMounted(()=>{

      console.log("生命周期函数1")

    })//比vue2有优势，vue2一个生命周期函数只能存在一个，现在可以存在多个。

    onMounted(()=>{

      console.log("生命周期函数2")

    })

五.Provide/Inject

1.provide()和inject()可以实现嵌套组件之间的数据传递（即不用一级一级之间向下传递，可直接传递）

2.这两个函数只能在setup()函数中使用。

3.父级组件中使用provide（）函数向下传递数据

4.子级组件中使用inject()获取上层传递过来的数据。

5.不限层级（只能父级向子级传递）

操作步骤：

首先在父组件中引入provide

import { provide } from 'vue';

在父组件中添加setup（）和要传递的数据

  setup(){

    provide("data","wo")

  }

然后在子组件中引入inject

import {inject } from 'vue';

在子组件中添加setup()和要接收的数据

setup(){

const data1=inject("data")

}

六.模板语法

不再限制于模板中只能有单个根节点。