Vue2.x和Vue3.x版本差异：https://www.jianshu.com/p/d3f973433274

一、Vue3介绍

参照Vue官方：https://cn.vuejs.org/guide/quick-start.html

二、Vue3入门程序

1、CDN方式

Vue官方提供直接引入CDN服务地址，只要使用script标签，就可以直接引入Vue3并且使用它

<script type="text/Javascript" src="https://unpkg.com/vue@next"></script>

2、NPM方式

不推荐

3、命令行工具（CLI）

利用vue-cli脚手架创建vue3项目，之前我们利用脚手架创建vue2项目时选择的是vue2模板，现在我们要选择vue3模板

vue  create  project_vue

Default  vue2
Default  vue3

4、Vite【推荐】

4.1、Vite概述

Vite：下一代前端开发与构建工具【类似于webpack】 vite服务器启动速度比webpack快，由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快，当浏览器请求需要的模块时，在对模块进行编译，这种按需求动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发优势越明显，vite热更新比webpack快，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不像webpack重新将该模块的所有依赖重新编译

4.2、Vite安装

npm install create-vite-app -g
或
npm install vite -g

4.4、创建项目

create-vite-app project
或
npm init vite-app project

5、创建容器

<!--    创建容器-->
<div id="app">
    
</div>

6、使用Vue

<script>

    // 创建Vue对象
    Vue.createApp({
        // 模板
        template:"<h1>this is Data</h1>"
    }).mount("#app");// 挂载到#app容器中

</script>

三、组合式API

Vue2：选项式API，把data、computed、methods给拆分 Vue3：组合式API，把data、computed、methods给组合到一起

实现组合式API的函数：setup()，组件被创建之前执行

1、组合式API

1.1、使用setup方法

<script>

export default {
  setup(){ // 组合式API
    let message = "aa";
    let msg = "bb";

    return {
      message,msg // 对外暴露，否则获取不到
    }

  },

  computed:{ // 选项式API
    handler(){
      return "cccc"
    }
  }

}

</script>

1.2、setup配合script

<script setup> // 采用组合式
import {computed} from 'vue';
let message = "描述内容";
let msg = "介绍";

let handler = computed(()=>{return "计算属性"});

</script>

2、ref

当我们对属性进行更改后，页面中的数据不会直接渲染更改，我们需要用到ref方法

ref只能更改基本数据类型，那么引用数据类型可以使用reactive方法

<script setup>
import {onBeforeMount,ref,reactive} from 'vue'
let message = ref("描述内容");
let msg = "介绍";

onBeforeMount(()=>{
  console.log(">>>>>>>>")
})

// 更改message
function handlerSetMessage(){
  console.log(">>>>>>>");
  
  message.value = "更改后的数据";

}
</script>

3、reactive

let user = reactive({
  name:"对象",
  age:22
});

function handlerSetUser(){
  user.name = "李四";
}

4、toRefs

我们可以通过toRefs对对象进行解构，那么解构出来的属性也具备响应式

<template>
  <h1>{{message}}</h1>
  <h2>{{msg}}</h2>
  <button @click="handlerSetMessage">更改Message</button>
  <button @click="handlerSetUser">更改对象</button>
  <h1>{{user.name}}</h1>
  <button @click="handlerSetChildrenName">更改子属性</button>
  <h1>{{children.name}}</h1>
</template>

<script setup>
import {onBeforeMount,ref,reactive,toRefs} from 'vue'
let message = ref("描述内容");
let msg = "介绍";

onBeforeMount(()=>{
  console.log(">>>>>>>>")
})

// 更改message
function handlerSetMessage(){
  console.log(">>>>>>>");
  
  message.value = "更改后的数据";

}

// 对象
let user = reactive({
  name:"对象",
  age:22,
  children:{
    name:123
  }
})

function handlerSetUser(){
  user.name = "李四";
}

let {children} = toRefs(user);
let handlerSetChildrenName = ()=>{

  children.value.name = 333  
}


</script>


<!--<script>

export default {
  setup(){
    let message = "aa";
    let msg = "bb";

    return {
      message,msg
    }

  },

  computed:{
    handler(){
      return "cccc"
    }
  }

}

</script>-->

<style scoped>

</style>

5、watch

watch：侦听器

5.1、监听基本类型

watch(message,(newValue,oldValue)=>{
      console.log(newValue);
      console.log(oldValue)
    })

可以获取新值和旧值

5.2、监听引用数据类型

Vue3.0中的watch可以监听到属性的变化

watch(user,(newValue,oldValue)=>{
      console.log(newValue);
      console.log(oldValue)
})

获得的数据都是新数据

5.3、监听多个数据

watch([message,user],([newValue,oldValue],[newValue1,oldValue1])=>{
      console.log(newValue)
      console.log(newValue1)

      console.log(oldValue)
      console.log(oldValue1)
    })

6、watcheEffect

watch() 是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。

watchEffect(()=>{
      console.log(">>>>>")
      console.log(user.name) // 程序运行会立即执行，并且当user.name数据更新，也会触发
})

7、computed

computed：计算属性

7.1、简写方式

let user = reactive({
  name: '李四',
  age: 22
})

// 和Vue2.0一样  默认是getter函数
let nameCom = computed(()=>{
  return user.name.split("").reverse().join("") // 反转
})

7.2、完整方式

// 只能完整版这样写或者ref的响应式数据
let user = reactive({
  name: computed({
    get(){
      return ">>>>>>"
    },set(demo){
      console.log(demo)
    }
  }),
  age: 22
})

或者
let user = reactive({
  name: '李四',
  age: 22
})

let nameCom = computed({
    get(){
      return ">>>>>>"
    },set(demo){
      console.log(demo)
    }
  })

8、生命周期钩子函数

Vue2.0生命周期钩子函数和Vue3.0有一些区别

setup围绕着beforeCreate和created执行，所以如果以前在beforeCreate或者created中编写的一些业务，现在可以全部写到setup中

Vue2.0钩子函数	Vue3.0钩子函数
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

Vue3中的生命周期钩子函数可以重复定义执行

import {ref, reactive,watch,watchEffect,computed,onBeforeMount,onMounted} from 'vue'

onBeforeMount(()=>{
  console.log("onBeforeMount")
})

onMounted(()=>{

  console.log("onMounted")
})

// 可以重复定义执行
onBeforeMount(()=>{

  console.log("onBeforeMountonBeforeMount")
})

9、props

setup函数有两个参数，其中一个参数就是props，和Vue2.0中的props作用一样，都是用于组件传参

9.1、代码案例

export default {
  name: "index",
  props:['msg'], // 不能删除
  setup(props){
    // 获取props中的数据，由于setup函数在组件实例创建之前就会被加载，所以当setup函数执行的时候，this还没有指定实例，因此this无用，那么无法获取props中的属性，所以setup有一个参数props用于获取外部的props中的属性
    console.log(props.msg)

    let value = props.msg


    return {value}

  }
}

9.2、语法糖

<template>
    <h1>{{msg}}</h1>
</template>

<script setup>
// 直接通过defineProps进行定义获取
let {msg} = defineProps({
  msg:String
})

</script>

<style scoped>

</style>