Vue3介绍与使用
一.vue3介绍
1.性能的提升
打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%
2.源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking
3.拥抱TypeScript
Vue3可以更好的支持TypeScript
4.新的特性
Composition API（组合API）
setup配置
ref与reactive
watch与watchEffect
provide与inject
新的内置组件
Fragment
Teleport
Suspense
其他改变
新的生命周期钩子
data 选项应始终被声明为一个函数
移除keyCode支持作为 v-on 的修饰符
5 组合式API和配置项API
-使用组合式API
-配置项API
-{
name:'xx',
data:function(){},
methods:{}
}
二.创建vue3项目的两种方式
1.使用 vue-cli 创建
官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve
2.使用 vite 创建
官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网：https://vitejs.cn
介绍：https://cn.vitejs.dev/guide/why.html#the-problems
-
什么是vite？—— 新一代前端构建工具。
-
优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
-
传统构建 与 vite构建对比图
-
旧版创建命令
## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev
- 新版命令
# 确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令 (不要带上 > 符号)：
> npm init vue@latest
# 这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
# 如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
> cd <your-project-name>
> npm install
> npm run dev
在vue3 中的this不是vue2中的vc对象，是一个代理对象
运行vue2和vue3的命令
三.常用API
3.1 setup函数
ref的使用
<template>
<p>
<h2>名字----》{{name}}</h2>
<button @click="putname">点我修改name</button>
</p>
<p>
<h2>年龄----》{{age}}</h2>
<button @click="handelclick">点我增加年龄</button>
</p>
</template>
<script>
import {ref,reactive} from 'vue' // 绑定数据需要使用命名倒入
export default{
setup(){
//ref 的使用
let name = ref('lqz') //使用ref将数据值包起后再修改数据值即可实现修改值页面同时改变
let age = ref(0)
function putname(){
console.log(name)
name.value=name.value+'你好'}//如果是修改name的值需要修改.value才能正常修改
let handelclick=()=>{
age.value=age.value+1//或者写成age.value++
console.log(age)
} //函数的两次写法点击按钮后修改name的值数据虽然修改了但页面没有变
//没有响应式数据未双向绑定只能进行页面渲染入股需要绑定需要使用特殊方法
return{name,handelclick,age,putname} //在setup中写的所有数据如果要使用都要返回
}
}
</script>
- 数字，字符，串布尔值加响应式用ref(基本数据)
- 数组和对象就用reactive(引用数据类型) ref 也能用多一层value 在页面中直接使用变量即可
let person = ref({name:'薛飞飞',gender:'男'}) //person是代理修改的时候需要多一层
let handelputgender=()=>{person.value.gender='女'console.log(person.value)}
let person = reactive({name:'薛飞飞',gender:'男'})
let handelputgender=()=>{person.gender='女'}//使用reactive用这个方法修改
setup参数上下文
<template>
<h1>我是组件</h1>
</template>
<script>
export default{
name:'HelloWorld',
props:['msg'],
setup(context){
console.log(context.msg)//在父组件中如果传了数据就会有参数接收的是一个代理对象
}
}
</script>
父组件中使用并且注册才能使用
<HelloWorldVue msg="我是老六"></HelloWorldVue>
components:{HelloWorldVue}
ts语法切换
<script setup lang="ts"> //lang参数切换js和ts
</script>
计算属性
属性在使用的时候不需要加括号直接{{xxxx}}使用即可，函数加括号使用函数每次页面变都会执行损耗资源计算属性只有属性值变才会执行
export default {
name: 'App',
// computed:{
// fullName:function (){}
// },
setup() {
// 1 计算属性案例1
// let firstName = ref('刘')
// let lastName = ref('清政')
// // 定义计算属性
// let fullName = computed(() => {
// return firstName.value + lastName.value
// })
// 2 计算属性案例2
let person = reactive({
firstName: '刘',
lastName: '清政',
})
// 定义计算属性
person.fullName = computed({
get() {
return person.firstName + '-' + person.lastName
},
set(value) {
console.log(value)
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
return {
person
}
}
}
监听属性
导入一些属性写在函数setup中 属性括起来后内部传一个监听的变量，传一个箭头函数
import {computed, watch, ref, reactive, watchEffect} from 'vue'
export default {
name: 'App',
setup() {
// 1 计算属性案例1
let name = ref('lqz')
// 定义监听属性
watch(name, (newValue, old) => {
console.log('name变了')
// console.log(old)
// console.log(newValue)
})
// vue3 多的watchEffect,只要函数中使用的变量发生变化，它就会触发
watchEffect(() => {
// 只要该函数中使用的变量发生变化，它就会触发
// let a = name.value + '?'
console.log('watchEffect配置的回调执行了')
})
return {
name
}
}
}
生命周期
# Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted
# Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
组合式api的写法需要从vue中导入，配置项api和组合式不会冲突，闲的蛋疼可以同时写两套两套都会执行
import {onBeforeMount,onMounted--->} from 'vue'
setup(){
onBeforeMount(()=>{}),
onMounted(()=>{})
}//一共八个hook 依次执行 参考上面对应关系
hooks
- 什么是hook？——
-本质是一个函数，把setup函数中使用的Composition API进行了封装。
-类似于vue2.x中的mixin。
-自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂
hook/usePoint.js
将功能抽出 写一个文件导出即可
import {onMounted, onUnmounted, reactive} from "vue";
export default function () {
let p = reactive({
x: 0,
y: 0
})
function getPoint(event) {
console.log(event)
p.x = event.pageX
p.y = event.pageY
}
// 声明周期钩子的onMounted，当页面挂载就会执行
onMounted(() => {
// 给数鼠标点击增加监听，当点击鼠标，就会执行这个函数
window.addEventListener('click', getPoint)
})
// 组件被销毁时，把功能去掉
onUnmounted(() => {
window.removeEventListener('click', getPoint)
})
return p
}
使用功能的时候倒入匿名函数加括号执行将p对象返回出去才能使用 在抽出功能的位置需要返回p对象使用的时候同样需要返回
<template>
<h2>x坐标是：{{ p.x }},y坐标是:{{ p.y }}</h2>
</template>
<script>
import {reactive, onMounted, onUnmounted} from 'vue'
import usePoint from '../hook/uesPoint.js'
export default {
name: "Point",
setup() {
let p = usePoint()
return {p}
}
}
</script>
<style scoped>
</style>
toRefs
setup函数，return {...toRefs(data)}解压并关联原来的数据修改页面数据原来数据同样改变
export default {
name: 'App',
setup() {
let data = reactive({
name: 'lqz',
age: 19,
isShow: true
})
function handleShow() {
console.log('ssdaf')
data.isShow = !data.isShow
data.age++
}
return {
...toRefs(data),
//解压使用的时候直接{name}即可原来使用需要{data.name}
handleShow
// data
}
}
}
浙公网安备 33010602011771号