目录
Vue3
关于前端设置页面参考----gitee.com/liuqingzheng/vue_admin
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
新的内置组件
Fragment
Teleport
Suspense
其他改变
新的生命周期钩子
data 选项应始终被声明为一个函数
移除keyCode支持作为 v-on 的修饰符
# vue2配置项与vue3组合式的区别
vue2 :配置项API
new Vue({
el:'#app',
data:{}
})
vue3: 组合式API
let name='kiki'
let add=()=>{
}
vue3创建项目
1. 使用vue-cli
创建
创建跟之前的vue2
一样,只是在选择vue版本的时候选择vue3
版本,同样用pycharm
打开并运行。
以后再页面中的this
,已经不是vue2中的vc对象了,是一个代理对象
2. vite创建vue项目
Vite 是一个轻量级的、速度极快的构建工具,对 Vue SFC 提供第一优先级支持。作者是尤雨溪,同时也是 Vue 的作者!是新建的前端构架工具,最大的优势就是速度快。
vite使用步骤
# 1. 安装---默认最新版
npm init vue@latest # 安装的时候根据需要选择就可,如vueRouter
# 2. cd到项目中执行cnpm install 安装依赖
cd.....进入
cnpm install
# 3 运行
npm run dev
注意点:
1. vueRouter跟之前一样
2. Pinia:用来替换Vuex的,新一代的状态管理器
3.链式调用(课下了解)
setup函数
简化代码和项目的简洁度,vue
新增了setup
函数。
1.setup函数
1.在函数里面可以定义变量
2.定义函数
3.必须用return返回,在模板才能使用
let handleAgeAdd =handleAgeAdd(){}
代码展示
<template>
<h1>setup函数</h1>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<button @click="handleClick">点我看图</button>
<hr>
<button @click="handleAgeAdd">点我age加1</button>
</template>
<script>
export default {
name: 'HomeView',
setup(){
// setup中没有this了
// 以后所有的变量定义函数编写,都写在这个函数中
// 定义变量 如果这么写,变量渲染没问题,但是没有响应式,页面变了,变量不会变
let age=18
let name='kiki'
//定义函数
let handleClick=()=>{
alert('嘿嘿,没有图')
}
// 定义函数--年龄加1
let handleAgeAdd=()=>{
console.log('age开始加1')
age=age+1
console.log(age)
}
//必须要有返回值
return {name,age,handleClick,handleAgeAdd}
}
}
</script>
2.vue2
的创建vue
实例和vue3
创建vue
实例的区别
# Vue2
1.new Vew()--->是Vue的实例,里面有$store,$refs....
# Vue3
1.createApp(App)--->是个对象,对象里有东西,没有$store,$refs....等对象,当需要使用直接导入使用
2.vue3的<template>,不需要写一个标签了
3.定义变量/函数,都写在setup函数中,都要return函数,在<template>才能使用
4.但是失去了响应式
总结:
1.在setup中定义的变量和函数,在之前配置项api中可以直接使用this.变量,函数调用即可
2.但是在原来配置项中定义的变量,函数,在setup中无法使用
ref和reactive
响应式:定义的变量,如果想要有响应式就用ref
包裹起来,再修改变量需要要变量名.value修改。
1.导入使用:import {ref, reactive} from 'vue'
2.基本数据类型(数字,字符串,布尔)如果要加响应式
使用ref包裹,在模板中直接读取定义量
js中通过对象.value取值
3.对象,数组引用使用reactive,ref可以包对象类型,但是用的时候必须.value。
操作数据与读取数据:均不需要.value
ref
<template>
<h1>setup函数</h1>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<button @click="handleClick">点我看图</button>
<hr>
<button @click="handleAgeAdd">点我name+ ?</button>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
name: 'HomeView',
setup(){
let age=ref(18) // age 已经不是数字了,是RefImpl的对象
let name=ref('kiki')
let handleClick=()=>{
alert('嘿嘿,没有图')
}
let handleAgeAdd=()=>{
console.log('name开始加?')
name.value=name.value+'?'
console.log(name)
}
return {name,age,handleClick,handleAgeAdd}
}
}
</script>
reactive
computed计算属性
通过绑定ref和rective来编写计算(computed)
<template>
<h1>计算属性</h1>
姓:<input type="text" v-model="person.firstName">
<br>
名:<input type="text" v-model="person.lastName">
<br>
全名:{{ fullName }}
<p>全名:<input type="text" v-model="fullName"></p>
</template>
<script>
import {ref, reactive, computed} from 'vue'
export default {
name: 'HomeView',
//vue2计算属性的写法
// computed:{
// fullName(){}
// },
//vue3计算属性的写法
setup(){
// 案列1------ref
//定义变量
// let firstName = ref('成')
// let lastName = ref('和花')
//定义计算属性
// let fullName = computed(()=>{
// return firstName.value+lastName.value
// })
// return {firstName,lastName,fullName}
//案例2---根据修改fullName来改动前面的姓名---reactive
let person = reactive({
firstName :'',
lastName :''
})
//定义计算属性
let fullName= computed({
get(){ //获取 触发它的执行
return person.firstName +person.lastName
},
set(value){ //修改 触发它,传入修改后的值
console.log(value)
person.firstName = value.slice(0,1)
person.lastName = value.slice(1)
}
})
return { person,fullName}
}
}
</script>
watchEffect监听属性
watchEffect
是vue3
提供的,它也做监听属性,只要这个里面用的变量发生变化,它就会执行;vue2的watch只要name发生变化,就触发某个东西的执行
<template>
<h1>监听属性</h1>
{{ name }}----{{ age }}
<br>
<button @click="nameAdd">点我name+?</button>
<button @click="ageAdd">点我age+</button>
</template>
<script>
import {ref, reactive, computed, watch, watchEffect} from 'vue'
export default {
name: 'HomeView',
setup(){
let name = ref('kiki')
let age = ref('10')
let nameAdd =()=>{
name.value=name.value+'?'
}
let ageAdd=()=>{
age.value++
}
//定义监听属性---vue2,只要name发生变化,就触发某个东西的执行
watch(name,(newName,oldName)=>{
console.log('name值变了')
console.log(newName,oldName)
})
//watchEffect vue3 提供的,只要函数中使用的变量发送变化,他就会触发
watchEffect(()=>{
// 只要该函数中使用的变量发生变化,它就会触发
console.log('watchEffect配置的回调执行了')
console.log(age.value)
})
return{name,ageAdd,nameAdd,age}
}
}
</script>
生命周期
vue3官方生命周期图
# Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:
vue2 和 vue3比较
beforeCreate===>beforeCreate
created=======>created
beforeMount ===>beforeMount
mounted=======>mounted
beforeUpdate===>beforeUpdate
updated =======>updated
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
# 不推荐用这种写法了,配置项写法,统统写在setup中
# 以前写在created中的代码,现在直接写在setup开始即可
let show = ref(false)
axios.get().then(res=>{
show.value=res.data.show
})
自定义hook---了解
本质是一个函数,把setup
函数中使用的Composition API
进行了封装。类似于vue2.x中的mixin。
自定义hook的优势
复用代码, 让setup中的逻辑更清楚易懂
hook/userPoint.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
想使用的组件中引入使用即可
<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
1.引入import {toRefs} from 'vue'
2.setup直接返回...toRefs(data)
3.模板直接用name和age等
<template>
<h1>toRefs属性</h1>
<p>{{name}}</p>
<p>{{age}}</p>
</template>
<script>
import { reactive, computed, watch, watchEffect} from 'vue'
import {toRefs} from 'vue'
export default {
name: 'HomeView',
setup(){
let data = reactive({
name:'kiki',
age:18,
isShow:true
})
return {...toRefs(data)}
}
}
</script>
script setup的作用和lang=ts
用vite
创建的vue
项目打开操作,直接定义变量或者函数,会自动把变量装到setup
函数里面,在模板里面直接用,不用return返回
<script setup>
import {ref} from 'vue'
let name = ref('kiki')
let handleClick = () => {
alert('图片')
}
</script>
# 以后 这个script中的代码直接放到 setup函数中,不用return了
#lang=ts
里面代码使用ts写,而ts完全兼容js,继续写js代码没问题
注意:如果遇到问题不能运行的情况如下,使用vite
创建vue3.0项目的时候,vite不会自动帮助install
相关的依赖,需要我们手动去安装,直接执行cnpm install
命令即可
![image-20230222195629146](Vue_day08.assets/image-20230222195629146.png)
vue后台管理模板
公司内部项目----会写后台管理-----网上有很多vue
开源的后台管理的框架,只需要在上面做二次开发。
# vue-admin-template-master
-跑起来
-package.json 第7行加入
"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
# python :django-vue-admin ----D2Admin
# 若依:vue前端---vue-element-admin
# elamin前端---drf----写了基于rbac权限管理的框架
# go:gin-vue-admin https://gitee.com/liuqingzheng/vue_admin
组件式API和配置项API
Options API 存在的问题
使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 。
# Vue2项目的main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
看看vm是什么
const vm = new Vue({
render: h => h(App),
})
console.log(vm)
vm.$mount('#app')
# Vue3项目的main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
# 分析
// 引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例对象——app(类似于之前Vue2中的vm,但app比vm更“轻”)
const app = createApp(App)
console.log(app)
// 挂载
app.mount('#app')
标签:vue,name,setup,let,Vue3,ref,age
From: https://www.cnblogs.com/zhanglanhua/p/17145712.html