Vue3 新特性
# Vue3的改进及特点
1.性能的提升：打包大小减少 41%，初次渲染快 55%，更新快 133%，内存使用减少 54%。
2.新推出的Composition API 使组件更易维护，减少无用数据绑定页面更流畅。
4.更好TypeScript支持，可以在创建命令里直接配置，页面集成畅通无阻。
5.Teleport(瞬移组件)、Suspense(解决异步加载组件问题)和全局 API 的修改和优化。
6.Vue3兼容大部分Vue2的特性，用Vue2代码开发Vue3都可以。
# 安装
vue --version # 查看版本
注意：如果以前安装过，需要检查一下版本，因为只有最新版本(V4.5.4 以上版本)才有创建 Vue3 的选项。
npm install -g @vue/cli
使用 vue-cli 命令行创建项目
vue create vue3-1 // 根据提示自己选择配置
启动命令
yarn serve 或 npm run serve
打包命令
yarn build 或 npm run build
# 新语法 setup(),ref(),reactive()
// 注：setup是为了优化性能让程序按需引入全局统一
1.用法一
<template>
<div class="home">
<div>名字：{{ name }}</div>
<ul>
<li v-for="item in list" :key="item" @click="show(item)">{{ item }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
// 注：defineComponent 在TypeScript下，给予了组件正确的参数类型推断
export default defineComponent({
name: "Home",
components: {},
props:['msg'],
setup(props,context) {
// 注：setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup 函数中是无法使用 data 和 methods 中的数据和方法，而methods等可以使用setup中return出去的数据。
/*
一.函数的第一个参数是 props 用于接收 props.msg
这个props是一个响应式的Proxy对象，不可以解构，解构后会失去响应，如果要用解构的方式，要用toRefs
let { msg } = toRefs(props) //但是解析成ref了要用msg.value,所以直接用props.msg更简单
二.context对象在setup()中暴露三个属性 attrs 、slots 和 emit 因为在setup函数中还没有创建Vue实例，是无法使用vm.$attrs、vm.$slots和vm.$emit的，所以这三个属性充当了这样的作用，使用方法相同。
注意：
context.attrs和vm.$attrts包含的是在实例vm.props中没有被声明识别的attribute（class和style除外）。所以setup()中参数props中暴露的变量，就不会在context.attrs中暴露。
context.slots和vm.$slots只能访问具名插槽，没有命名的插槽或者v-slot:default的是没有暴露的。
context的attrs和slots是有状态的，当组件更新时也会实时更新，所以也不要解构。但与props不同的是，它们不是响应式的，在setup()中的使用应保持只读的状态，如果要改变可以在onUpdated的周期函数中进行。
context.emit和vm.$emit可以触发实例上的监听事件。
*/
const list = ref(["深圳", "北京", "上海"]);
const name = ref("");
//注：用ref是为了转换成引用类型，让全局引用保持一致，而之前原始类型是不行的，所以要name.value的方示赋值
const show = (index: string) => {
name.value = index;
};
// 注：不return出去的数据，模板是无法使用的。
return {
list,
name,
show
};
},
});
</script>
2.用法二 reactive() 优化
<template>
<div class="home">
<div>名字：{{ data.name }}</div>
<ul>
<li v-for="item in data.list" :key="item" @click="data.show(item)">{{ item }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
export default defineComponent({
name: "Home",
components: {},
setup() {
const data = reactive({
list: ["深圳", "北京", "上海"],
name: "",
show: (index: string) => {
data.name = index;
},
});
return {
data
};
},
});
</script>
2.用法三 toRefs() 优化
<template>
<div class="home">
<div>名字：{{ name }}</div>
<ul>
<li v-for="item in list" :key="item" @click="show(item)">{{ item }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent,reactive,toRefs } from "vue";
export default defineComponent({
name: "Home",
components: {},
setup() {
const data = reactive({
list: ["深圳", "北京", "上海"],
name: "",
show: (index: string) => {
data.name = index;
},
});
const refData = toRefs(data);
//不能直接解析 ...data 必须用 toRefs()
return {
...refData
};
},
});
</script>
# Vue3 生命周期函数用法, 需要引入 (注：vue2 生命周期函数不影响)
<script lang="ts">
import { defineComponent,ref,reactive,toRefs,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onActivated,
onDeactivated,
onErrorCaptured,
onRenderTracked,
onRenderTriggered
} from "vue";
export default defineComponent({
name: "Home",
components: {},
setup() {
//setup() 开始创建组件之前，在beforeCreate和created之前执行。
const data = reactive({
list: ["深圳", "北京", "上海"]
});
onBeforeMount(()=>{
//组件挂载到节点上之前执行的函数。
})
onMounted(()=>{
//组件挂载完成后执行的函数。
})
onBeforeUpdate(()=>{
//组件更新之前执行的函数
})
onUpdated(()=>{
//组件更新完成之后执行的函数。
})
onBeforeUnmount(()=>{
//组件卸载之前执行的函数。
})
onUnmounted(()=>{
//组件卸载完成后执行的函数。
})
onActivated(()=>{
//被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
})
onDeactivated(()=>{
//比如从 A 组件，切换到 B 组件，A 组件消失时执行。
})
onErrorCaptured(()=>{
//当捕获一个来自子孙组件的异常时激活钩子函数。
})
//< 调试用生命函数
onRenderTracked((event)=>{
//跟踪所有状态触发
console.log(event);
});
onRenderTriggered((event) => {
//跟踪当前状态触发
console.log(event);
//key 那边变量发生了变化
//newValue 更新后变量的值
//oldValue 更新前变量的值
//target 目前页面中的响应变量和函数
});
// 调试用生命函数 />
const refData = toRefs(data);
return {
...refData
};
},
mounted(){
console.log("vue2 生命周期");
}
});
</script>
# Vue3 watch用法
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
export default defineComponent({
name: "Home",
components: {},
setup() {
const text = ref("测试单个值");
const data = reactive({
list: ["深圳", "北京", "上海"],
name: "",
show: (index: string) => {
data.name = index;
},
});
//watch(text, 单个用法，watch([text,()=>data.name], 多个用法，注：()=>data.name 为了兼容vue2
watch([text,()=>data.name], (newValue, oldValue) => {
console.log(`new--->${newValue}`);
console.log(`old--->${oldValue}`);
});
const refData = toRefs(data);
return {
...refData,
};
},
});
</script>
# Vue3 模块化重用功能 (优化 mixins)
1.新建useTime.ts文件
import { ref } from "vue";
const time = ref("00:00:00");
const getTime = () => {
const now = new Date();
const h= now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
const m = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
const s= now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
time.value = h + ":" + m + ":" + s;
setTimeout(getTime, 1000);
};
export { time, getTime }
2.引入
<template>
<div class="home">
<div>时间：{{time}} <button @click="startTime">开始</button></div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { time, getTime } from './useTime';
export default defineComponent({
name: "Home",
components: {},
setup() {
const startTime = () => {
getTime();
};
return {
startTime,
time
};
},
});
</script>
# teleport 独立挂载组件（解决样式等冲突问题不挂载到app下）
1. index.html 页面新加插入点（会挂载到 #headTitie DOM下）
<div id="headTitie"></div>
<div id="app"></div>
2. 在components目录下新建 headTitle.vue
<template>
<teleport to="#headTitie">
<div class="head">
<h1>{{ title }}</h1>
</div>
</teleport>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "headTitie",
setup() {
const title = ref("Vue3 新特性示例");
return {
title,
};
},
});
</script>
3. 在 App.vue 加
<template>
<headTitle />
<router-view />
</template>
<script lang="ts">
import headTitle from "./components/headTitle.vue";
export default {
name: "App",
components: {
headTitle,
},
};
</script>
# Suspense 异步请求组件
1. 新建Demo.vue
<template>
<div class="Demo">
<div>名字：{{ name }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Demo",
components: {},
setup() {
return new Promise((resolve, reject) => {
setTimeout(() => {
return resolve({ name: "我是 Suspense 异步请求组件" });
}, 2100);
});
},
});
</script>
2. 使用引入 home.vue
<template>
<div class="home">
<Suspense>
<template #default>
<Demo />
</template>
<template #fallback>
<p>加载中...</p>
</template>
</Suspense>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Demo from "./Demo.vue";
export default defineComponent({
name: "Home",
components: {Demo}
});
</script>
