一.vue3.0优点
>1.将Vue内部大部分Api外露使Vue具备大型开发项目的能力例如Compile编译Api等
>2.webpack的treeshaking(treeshaking是DCE的一种方式，它可以在打包时忽略没有用到的代码)支持度友好
>3.使用Proxy进行响应式变量定义性能提高1.2-2倍
>4.ssr快了2-3倍
>5.可在Vue2.0中使用它的Compoisition-api或者直接用它开发插件
>6.友好支持ts
>7.面向未来：vite开发直接支持3.0,(放弃webpack,底层为koa开发的高性能开发服务器)
二．缺点
>1.Vue3,0目前不支持IE11而2.0目前支持IE11，如想要兼容可等2.7版本慢慢支持IE11Vue3.0的功能会慢慢兼容
>2.
三．Vue3.0四种方式
>1.通过CDN script标签引入
>2.通过Codepen 的浏览器playground
>3.脚手架vite (npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3)
PS:Vite是利用浏览器现在已经支持的Es6的import，遇到import会发送http请求去加载相应的文件，vite会拦截这些请求，做预编译就省去了webpack的打包过于沉重的负担
脚手架：npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset
四．全局API
>1.新的全局API createApp ( 调用createApp会返回一个应用实例，Vue3.0的新概念 )
目录：src/main.js
PS：import {createApp} from ‘Vue’
Import App from
‘/App.vue’Const app =
createApp(App)app.mont
(‘#app’)
应用程序实例暴露当前全局 API 的子集，经验法则是，任何全局改变 Vue 行为的 API 现在都会移动到应用实例上app上，以下是当前全局 API 及其相应实例 API 的表：
Setup函数是一个新的组件选项作为组件内部的ConpostionApi
创建组件实例然后初始化porops,紧接着会调用setup函数他会在beforeCreate钩子函数之前调用
Setup返回一个对象，则对象的所有属性（它是响应式的数据）都可以直接在模板中使用 ，相当于data返回的对象
<script>export default {
setup () {
return {} }}</script>
五．响应式数据
>1.ref:可传入任意类型的值并返回一个响应式且可改变的ref对象，ref对象拥有一个指向内部值的单一属性”.value”,改变的时候必须使用“.value”进行修改
>2.reactive:接收一个普通对象，然后返回该对象的响应式代理。等同于2.0的Vue.obserable
All:reactive负责复杂数据结构，ref负责将普通的数据结构转化为响应式结构
>3.toRefs:将响应式转化为普通对象，其中结果对象的每个property都是指向原始对象的相应的property,( 这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解/扩散:)
咧：
useFeaturex.js:
import {reactive} from 'vue';export function userFeatureX(){
const state = reactive({
foo: 1,
bar: 2 })
// 逻辑运行状态
// 返回时转换为ref
return state;} App.vue import {toRefs} from 'vue'export default {
setup(){
const state = useFeatureX();
return {
...toRefs(state)
}
}
}
响应式对比
其实在 Vue3.x 还没有发布 bate 的时候， 很火的一个话题就是Vue3.x 将使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty。 没有无缘无故的爱，也没有无缘无故的恨。为何要将Object.defineProperty换掉呢，咋们可以简单聊一下。 我刚上手 Vue2.x 的时候就经常遇到一个问题，数据更新了啊，为何页面不更新呢？什么时候用$set更新，什么时候用$forceUpdate强制更新，你是否也一度陷入困境。后来的学习过程中开始接触源码，才知道一切的根源都是 Object.defineProperty。 对这块想要深入了解的小伙伴可以看这篇文章 为什么 Vue3.0 不再使用 defineProperty 实现数据监听？要详细解释又是一篇文章，这里就简单对比一下1.Object.defineProperty 与 Proxy**Object.defineProperty**只能劫持对象的属性， 而 Proxy 是直接代理对象
由于**Object.defineProperty**只能劫持对象属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。但是 Proxy 直接代理对象， 不需要遍历操2.**Object.defineProperty**对新增属性需要手动进行**Observe**
因为**Object.defineProperty**劫持的是对象的属性，所以新增属性时，需要重新遍历对象， 对其新增属性再次使用**Object.defineProperty**进行劫持。也就是 Vue2.x 中给数组和对象新增属性时，需要使用**$set**才能保证新增的属性也是响应式的, **$set**内部也是通过调用**Object.defineProperty**去处理的。
六.组件通信
1.props
2.子传父 emit
child.vue
<ul> <li v-for= "(item, index) in listArr" :key = "index" @click="handleParent(item)" > {{ item.name }}</li> </ul>
//js部分 <script lang = "ts" setup> import { ref, watch, reactive, defineProps } from "vue"; let listArr = reactive<any>([{ name: "afda", id: 2 }, { name: "afda", id: 3 }, { name: "afdas", id: 5 }])
let emits = defineEmits(['handleParent']) let handleParent = (item: any) => { emits('handleParent', item)}
</script>
parent.vue
import child from './child.vue'
<child:str="str" @handleParent="handleParentFu"> //接收子组件的值 let handleParentFu = function(data:any):void{ console.log(data,"我是子组件传的值") }
七.插槽 slot
child.vue
<template> <!--vue3.0和Ts的模板 --> <div class="con"> 我是子组件 <slot name="content" :data="data"></slot> </div></template>
<script setup lang="ts">import { ref } from "vue";let data = ref<number>(5);</script>
parent.vue
<template> <div class="home"> <div @click="handleChangePage">切换routerView</div> <formBox> <template #content="{ data }"> <div> {{ data }} </div> </template> </formBox> <router-view></router-view> </div></template>
ps:第二种写法
<template v-slot:content="scoped">
<div>{{scoped.data}}</div>
</template>
八：生命周期
这里就不挨个说明了直接配图吧：
九：Hooks
其实熟悉React的同学都知道，高阶组件，那么在Vue3中我们也可以用到高阶Hooks这个方法，
例如：
overdue-setting-form.ts
//form组件相关逻辑import {reactive, ref} from "vue";import {message} from "ant-design-vue";export default function () { const stateForForm = reactive<object>({ value: "" }) // 表单数据类型 interface listinterface { formData?: Object eventType?: string, telExtArray?: Object overdueSubmitDayObj: any } const formData = ref<listinterface>({ telExtArray:{}, overdueSubmitDayObj: {} }) // 逾期提交日 list let overdueSubmitDateList = reactive([ {itemText: '值班当天',itemValue: 0}, {itemText: '值班次日',itemValue: 1}, {itemText: '值班第二天',itemValue: 2}, ]); let overdueSubmitTimeList = reactive<any>( [ {itemText: '3小时内',itemValue: 0}, {itemText: '5小时内',itemValue: 1}, {itemText: '10小时内',itemValue: 2}, {itemText: '1天内',itemValue: 3}, {itemText: '不限',itemValue: 4}, ] ) const antdforms = [ [ { 12: { overdueSumitDay: { type: "select", label: "日志提交日", style:"width:200px", prop: "overdueSumitDay", placeholder: "请选择日志提交提交日", optionsName: {label: 'itemText', value: 'itemValue'}, options: overdueSubmitDateList, //下拉框值改变的时候获取到的 change:(val: string, option: any)=>{ console.log(val,option); formData.value.overdueSubmitDayObj = { id: val, value: option.children[0].children } // console.log('下拉框选择的数据',val) // console.log('下拉框选择的数据第二个参数',option) }, // 表单验证 rules: [{required: true, message: "请选择日志提交日", trigger: "change", type: 'number'}], }, } }, { 12: { overdueSubmitTime: { type: "select", label: "日志提交时段", prop: "overdueSubmitTime", style:"width:180px", // //是否显示时间 // showTime: true, // valueFormat: "HH:mm", // format: "HH:mm", options:overdueSubmitTimeList, optionsName: {label: 'itemText', value: 'itemValue'}, placeholder: '提交时段', change: (val: string, option: any) => { formData.value.overdueSubmitDayObj = { id: val, value: option.children[0].children } }, // 表单验证 rules: [{required: true, message: "请选择日志提交时段", trigger: "change"}], }, } }, ] ] // 表单变化的时候触发的函数 const formState = (midformState:string) => { console.log(midformState,'formState----表单变化的时候触发的函数'); } //表单项是否禁用 const formDisabled = ref(false) return { stateForForm, //父组件传过来的表单相关的数据 antdforms, //表单最后得到的数据 formState, formDisabled, colon: false, hideRequiredMark: false, formData, }}
引用：
<script setup lang="ts">
import UseOverdueSettingForm from './overdue-setting-form';// 菜单数据let transmissionValue = reactive<any>({ UseFormData: reactive(UseOverdueSettingForm()), tipHtmlShow: false // 是否显示tips});</script>
以上就是简单的vue3的一些用法及总结，希望多多支持留下小爱心，后学也会在学习中继续输出的哦~
