内容概览

• vue3介绍
• 创建vue3项目的两种方式
• setup函数
• ref与reactive
• 计算属性和监听属性
• 生命周期
• hooks
• toRefs

vue3介绍

1.性能的提升打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%
2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking
3.拥抱TypeScriptVue3可以更好的支持TypeScript
4.新的特性Composition API（组合API）setup配置ref与reactivewatch与watchEffectprovide与inject新的内置组件FragmentTeleportSuspense其他改变新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符5 组合式API和配置项API-使用组合式API-配置项API-{name:'xx',data:function(){},methods:{}}

创建vue3项目的两种方式

"""vue-cli:创建vue2和vue3"""   跟之前一样
"""vite：创建vue3"""# 创建最新版本npm init vue@latest# Pinai,Vue 的存储库，它可以跨组件/页面共享状态(与vuex功能类似)# vite创建另一种方式：创建vue3.0.4版本npm init vite-app ## 进入工程目录cd ## 安装依赖npm install## 运行npm run dev"""以后再页面中的this，已经不是vue2中的vc对象了，是一个代理对象"""

setup函数

# vue新增的setup配置项函数
在里边可以定义变量、定义函数
变量与函数需要return出去才能够在模板中使用

Children组件：

ref与reactive

# 导入使用: import {ref, reactive} from 'vue'
# 基本数据类型(数字,字符串,布尔)如果要加响应式,使用ref包裹;模板中直接使用,js中通过对象.value获取
# 对象/数组如果要加响应式,使用reactive
# ref也可以包裹对象

计算属性与监听属性

计算属性

1. 计算属性案例一
2. 计算属性案例二
3. 定义计算属性

监听属性

生命周期

# Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：beforeDestroy改名为 beforeUnmountdestroyed改名为 unmounted
# Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：beforeCreate===>setup()created=======>setup()beforeMount ===>onBeforeMountmounted=======>onMountedbeforeUpdate===>onBeforeUpdateupdated =======>onUpdatedbeforeUnmount ==>onBeforeUnmountunmounted =====>onUnmounted

hooks

# 什么是hook？—— 
本质是一个函数，把setup函数中使用的Composition API进行了封装。
类似于vue2.x中的mixin。
自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂

获取鼠标点击坐标案例

• hooks/usePoint.js

import {onMounted, onUnmounted, reactive} from 'vue'export default function () {let p = reactive({x: 0,y: 0})function getPoint(event) {console.log(event)  // 在event中获取点击坐标p.x = event.pageXp.y = event.pageY}// 生命周期钩子的onMounted,当页面挂载完成后执行onMounted(() => {// 给鼠标点击增加监听,当点击鼠标,就会执行函数window.addEventListener('click', getPoint)})// 当组件被销毁时,把功能去除onUnmounted(() => {window.removeEventListener('click', getPoint)})return p
}

• 在想要使用的组件中引入使用即可

toRefs

# ...{xxx:yyy}对应python的**{'xxx':'yyy'}
# setup函数,return{...toRefs(data)}可以解压赋值

后台管理模板

# vue-admin-template-master-package.json 第7行加入"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",# java版的若依，带权限控制的后台管理模块
# python ：django-vue-admin   
# python flask-vue-admin
# go:gin-vue-admin