Vue - 09 Vue3介绍
Vue - 09 Vue3介绍
1.vue 3
相比vue 2性能提示了，代码更简洁了
1.1 介绍
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 的修饰符
1.1 组合式API和配置项
① vue 2：配置项API
new Vue({
el:'#app',
data:{}
})
② vue 3：组合式API
let name='lqz'
let add=()=>{
}
2 Vue3 创建项目
Vue3 支持使用vue-cli来创建项目，但更推荐使用vite来创建项目
2.1 使用vue-cli创建项目
创建跟之前vue2 一样，只是选择vue版本的时候，选择vue3
创建完成，使用pycharm打开，并运行
2.2 使用vite创建项目
新的前端构建工具，最大的优势就是速度快
官网：https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
使用步骤
① 安装
npm init vue@latest
② 选择插件和设置
vueRouter等
③ cd切换到项目目录中安装依赖
npm install
④ 运行项目
npm run dev
- vueRouter：跟之前一样
- Pinia：用来替换Vuex的，新一代的状态管理器
3 setup函数
3.1 vue2与vue3创建vue实例的区别
①vue2中创建的是vue实例
在vue中有，this.$router 、this.$refs...等等
②vue3中创建的是object，没有this了，想用router对象需要导入才能使用
VUE3中的template中也可以不用写在一个div中了，配置项API不建议用了，建议用setup函数
3.2 setup函数
① vue3在script标签中中写setup函数，在setup函数中写组合式API，不再写配置项
② 定义变量，定义函数，一定要return，在templage中才能使用
③ 但是setup中的变量失去了响应式，需要配合ref和reactive来使用响应式
- 案例：点击按钮增加 ！
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
const increment = () => {
message.value += '!';
};
return {
message,
increment
};
}
};
</script>
<template>
<div>
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
</template>
4 ref和reactive创建响应式数据对象
4.1 ref和reactive：创建响应式数据对象
<script setup>
import {ref} from 'vue'
let name = 'duoduo'
let good_num1 = 100
let good_num2 = ref(100)
let goodNum1 = () => {
good_num1 ++
console.log(good_num1)
}
let goodNum2 = () => {
good_num2.value = good_num2.value+1
console.log(good_num2.value)
}
</script>
【没有ref】使用响应式的变量，只有在组件整体dom刷新的时候才会更新
【有ref】响应式的变量，只要点击就会立即更新
4.2 配置项API和组合式API 混写
同时写了【组合式API：setup 】和【配置项API】
【setup】中定义的变量和函数，在【配置项API】中，则可以直接使用this.变量，函数调用
但是在原来【配置项】中定义的变量，函数，在【setup】中无法使用
4.3 ref和reactive的使用类型
①ref通常用来包裹：数字、字符串类型
ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value
②reactive用来包裹：数组、对象类型
reactive定义的数据：操作数据与读取数据：均不需要.value
5 computed计算属性
在 Vue 3 中，我们可以使用 computed 函数来定义计算属性。与 Vue 2 不同的是，computed 函数现在是从 @vue/reactivity 中导入的，而不是在组件选项中直接定义。
5.1 vue3中的计算属性
使用方法
const state = reactive({
firstName: 'John',
lastName: 'Doe'
});
const fullName = computed(() => {
return `${state.firstName} ${state.lastName}`;
});
案例：
<template>
<h2>这里是test页面</h2>
<div> 【没有ref】 num①： {{ good_num1 }}</div>
<button @click="goodNum1"> 点击111</button>
<div> 【有ref】 num② ：{{ good_num2 }}</div>
<button @click="goodNum2"> 点击222</button>
<div> 总计数据---num①+num②：{{ totalNum }}</div>
</template>
<script setup>
import {computed, ref} from 'vue'
let good_num1 = 100
let good_num2 = ref(100)
// let good_num2 = 100
let goodNum1 = () => {
good_num1++
console.log('没有ref属性', good_num1)
}
let goodNum2 = () => {
good_num2.value = good_num2.value+1
console.log(totalNum.value)
console.log('有ref', good_num2.value)
}
// 计算属性
let totalNum = computed(()=>{
return good_num1 + good_num2.value
})
</script>
5.2 计算属性改值
计算属性的修改值可以像普通属性一样进行修改，只需要使用赋值语句来修改计算属性的依赖数据即可
let good_num2 = ref(100)
// let good_num2 = 100
let goodNum2 = () => {
good_num2.value = good_num2.value + 1
console.log(totalNum.value)
console.log('有ref', good_num2.value)
}
let totalNum = computed({
get() {
return good_num2
},
set(newValue) {
return totalNum = newValue
}
})
6 watch 监听属性
6.1 watch与watchEffect
watch 函数的第一个参数是一个函数，它返回要监听的数据；第二个参数是回调函数，它接收两个参数：新值和旧值。当被监听的数据发生变化时，回调函数将被执行，可以在这里执行一些副作用操作。
watchEffect 函数，它可以自动侦听响应式数据的变化，并在数据发生变化时执行回调函数。与 watch 函数不同的是，watchEffect 函数的回调函数不接收新值和旧值，而是在回调函数中直接访问被监听的数据。
watch(() => 监听的变量, (新值, 旧值) => {
console.log(`监听的变量: ${旧值} -> ${新值}`);
});
watchEffect(() => {
console.log(`监听的变量: ${监听的变量}`);
});
案例：
import {ref, watch, watchEffect} from 'vue';
export default {
setup() {
const name = ref('duoduo')
const newName = ref('AAAAAAAa')
const age= 19
let changeName = () => {
name.value = newName.value
};
watch(() => name.value, (newValue, oldValue)=>{
console.log(`原来的: ${oldValue}`)
console.log(`新的: ${newValue}`)
}
)
watchEffect(() => {
console.log(`name：${name.value}发生变化了`)
});
watchEffect(() => {
console.log(`age：${age}发生变化了`)
});
return {
name: name,
newName: newName,
changeName
};
}
};
7 vue3中的生命周期钩子函数
7.1 vue2与vue3对比
基本一致，只是beforeDestroy和destroyed变成了eforeUnmount和unmounted
| vue2 | vue3 |
|---|---|
| beforeCreate | beforeCreate |
| created | created |
| beforeMount | beforeMount |
| mounted | mounted |
| beforeUpdate | beforeUpdate |
| updated | updated |
| beforeDestroy | eforeUnmount |
| destroyed | unmounted |
7.2 vue3项目中的写法
在vue3项目中，beforeCreate和created两个方法中编写的代码，直接放到setup()方法中即可，无需重新导入钩子函数
而其他的生命周期钩子函数，需要先导入后卸载setup()方法中
| vue3生命周期钩子函数 | vue3项目中的写法 |
|---|---|
| beforeCreate | setup() |
| created | setup() |
| beforeMount | beforeMount |
| mounted | mounted |
| beforeUpdate | beforeUpdate |
| eforeUnmount | updated |
| unmounted | eforeUnmount |
8 toRefs
toRefs 是一个可以将响应式对象转换为响应式属性对象的函数。
它的作用是将一个响应式对象的所有属性转换为响应式属性，这样就可以在一个函数组件中以解构的方式访问这些属性并绑定到模板中。
# 以后setup的返回值可以直接使用
setup() {
let data = reactive({
name: 'lqz',
age: 19,
gender: '男'
})
return {...toRefs(data)}
}
# 以后在模板中直接用 {{name}}
9 vite创建的vue3项目
9.1 script setup的作用
script标签上加上setup属性，那么这个script中的代码则可以直接放到 setup函数中，不用return出去了
<script setup>
...
</script>
9.2 lang=ts
script标签上加上lang=ts，所以script标签里面代码可以使用typescript写
而typescript完全兼容javascript继续写js代码没问题
