标签：vue name setup value let vue3 ref 08
vue3的介绍
# vue项目的版本，新项目使用vue3，部分老项目使用vue2
# 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
5.新的内置组件
- Fragment
- Teleport
- Suspense
6.其他改变
- 新的生命周期钩子
- data 选项应始终被声明为一个函数
- 移除keyCode支持作为v-on的修饰符
# 组合式API和配置项API
vue2：配置项API
new Vue({
el:'#app',
data:{}
})
vue3: 组合式API
let name='tom'
let add=()=>{}
vue3创建项目
# 2.1 使用vue-cli
- 创建的过程和vue2一样，只是在选在版本的时候选择vue3
- 创建完成，使用pycharm打开，并且运行
# 2.2 vite
- 新建的前端构建工具，最大的优势就是速度快
https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
- 使用步骤：
1.安装：
npm init vue@latest
2.按需选择vueRouter
3.cd到项目中执行
cnpm install
4.运行：
npm run dev
"""
vueRouter:跟之前一样
Pinia：用来替换Vuex的，新一代的状态管理器
链式调用(抽时间)
"""
- 速度快的原因：
1.创建项目快：
不用安装第三方依赖
2.执行快的原因：
热更新，按需编译
setup函数
# vue2创建vue实例和vue3创建vue实例的区别
- 1. vue2创建vue实例：
new Vew() ---->是Vue的实例，里面有$store,$refs...
createApp(App) ---->是个对象，对象里有东西，没有$store,$refs...,以后有用都是导入使用
- 2. vue3创建vue实例：
以后vue3 的<template>，不需要写一个标签了。
以后都写在setup函数中，定义变量，定义函数，一定要return，在templage中才能使用
失去了响应式
ref和reactive
# 有响应式
- 定义变量，有响应式就用 ref包裹起来，
- 修改变量，需要用 变量名.value 修改
# 配置项api和组合式api可以混写(不建议)
- 在前在data中定义的变量
- 在setup中定义的变量
- 总结：
在setup中定义的变量和函数，在之前配置项api中可以直接使用this.变量，函数调用即可
原来配置项中定义的变量，函数，在setup中无法使用
# 不同类型做响应式
- ref通常用来包裹，数字，字符串类型，以后使用 xx.value
- reactive用来包裹数组和对象类型 以后使用 直接用即可
# 总结
- ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
- reactive定义的数据：操作数据与读取数据：均不需要.value
# setup，ref和reactive 代码实操
<template>
<div class="home">
<h1>setup的使用</h1>
<p>姓名：{{name}}</p>
<p>年龄：{{age}}</p>
<button @click="handleClick">点我看美女</button>
<button @click="handleAdd">点击增加年龄</button>
<button @click="handleName">点击名字加？</button>
<button @click="handleName2">点击名字加？2</button>
<br>
{{userInfo.name}}
{{userInfo.gender}}
<br>
<button @click="handleMessage">点击修改吴彦祖性别</button>
</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
name: 'HomeView',
methods:{
handleName2(){
this.name=this.name+'?'
console.log(this.name)
}
},
setup(){
let name =ref('lqz')
let age = ref(19)
let handleClick =()=>{
alert('猛男')
}
let handleAdd =()=>{
age.value = age.value+1
console.log(age) // 添加ref后打印出来直接是一个value对象
}
let handleName =()=>{
name.value = name.value+'?'
console.log(name) // 添加
}
// let userInfo = {
// name:'吴彦祖',
// gender:'male',
// }
// let userInfo =ref({
// name:'吴彦祖',
// gender:'male',
// })
let userInfo =reactive({
name:'吴彦祖',
gender:'male',
})
// let handleMessage =()=>{
// userInfo.value.gender = '未知'
// }
let handleMessage =()=>{
userInfo.gender = '未知'
}
return {name,age,handleClick,handleAdd,handleName,userInfo,handleMessage}
}
}
</script>
计算属性和监听属性
计算属性
# computed 的配置项中的写法，不建议用了
computed:{
fullName(){
return this.firstName+this.lastName
}
},
# vue3 新写法
let person = reactive({
firstName: '',
lastName: '',
})
let fullName = computed(() => {
return person.firstName + person.lastName
})
# 计算属性取值和修改值
let fullName = computed({
get() {
return person.firstName + person.lastName
},
set(value) {
person.firstName = value.slice(0, 1)
person.lastName = value.slice(1)
},
})
监听属性
# 组合式api写法，只要name发生变化，就会触发匿名函数执行
let name = ref('lqz')
watch(name, (newName, oldName) => {
console.log('name变了')
console.log('老的', oldName)
console.log('新的', newName)
})
# watchEffect 用法，只要age变化，就会执行，age不变化，就不会执行
watchEffect(() => {
console.log(age.value)
})
生命周期
# vue3的变化，不推荐了
-vue2 和 vue3比较
beforeCreate===>beforeCreate
created=======>created
beforeMount ===>beforeMount
mounted=======>mounted
beforeUpdate===>beforeUpdate
updated =======>updated
beforeDestroy ==>beforeUnmount
destroyed =====>unmounted
# 不推荐用这种写法了，配置项写法，统统写在setup中
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
# 以前写在created中的代码，现在直接写在setup开始即可
let show = ref(false)
axios.get().then(res=>{
show.value=res.data.show
})
toRefs
# 以后setup的返回值可以直接使用
setup() {
let data = reactive({
name: 'lqz',
age: 19,
gender: '男'
})
return {...toRefs(data)}
}
# 以后在模板中直接用 {{name}}
script setup的作用和lang=ts
<script setup>
import {ref} from 'vue'
let name = ref('lqz')
let handleClick = () => {
alert('美女')
}
</script>
# 以后 这个script中的代码直接放到 setup函数中，不用return了
#lang=ts
里面代码使用ts写，而ts完全兼容js，继续写js代码没问题
# 公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，咱们只需要在上面做二次开发
# django-vue-admin 前端---》D2Admin
# 若依：vue前端 用来 vue-element-admin
# elamin前端 drf 写了基于rbac权限管理的框架
# https://gitee.com/liuqingzheng/vue_admin
vue后台管理模板
标签：vue,
name,
setup,
value,
let,
vue3,
ref,
08
From： https://www.cnblogs.com/juzijunjun/p/17146024.html