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:{}}
创建方式
1.方式一:vue-cli:创建vue2和vue3
2.方式二:vite:创建vue3,创建最新
2.1 命令:npm init vue@latest
2.2 npm init vite-app <project-name>
2.3 进入项目目录
cd <project-name>
2.4 安装依赖
npm install
2.5 运行
npm run dev
注:vue3中的this不是vc对象 是一个代理对象
setup函数
1.vue 新增的setup配置项函数,
在里面可以定义变量
定义函数
必须return 变量和函数,在模板中才能使用
2.代码:
2.1 组件
<template>
<h1>setup函数</h1>
{{ name }}
{{info}}
<button @click="handleClick">点我</button>
</template>
<script>
export default {
name: "setup",
setup(){
let name='lili'
let info={
age:10
}
function handleClick(){
alert('123')
}
return{
name,handleClick,info
}
}
}
</script>
2.2 app.vue
<template>
<handleSetUp></handleSetUp>
</template>
<script>
import handleSetUp from "@/components/setUp.vue"
export default {
name: "setup",
components:{
handleSetUp
}
}
</script>
ref和reactive
1.导入使用:import {ref, reactive} from 'vue'
2.ref:基本数据类型添加响应式(动态绑定)
取值:在js中通过对象(RefImpl对象--定义的变量名).value
3.reactive:对象、数组使用
注:ref也可以使用在对象上--但是取值必须通过.value获取
4.代码:
4.1 ref使用:
<template>
<h1>ref使用</h1>
{{ name }}
{{info.age}}
<button @click="handleClick">点我姓名加?</button>
<button @click="handleUp">点我年龄加1</button>
</template>
<script>
import {ref, reactive} from "vue";
export default {
name: "setup",
setup(){
let name=ref('lili')
let info=ref({
age:10
})
function handleClick(){
name.value=name.value+'?'
console.log(name)
}
function handleUp(){
info.value.age++
console.log(info.value.age)
}
return{
name,handleClick,info, handleUp
}
}
}
</script>
4.2 reactive使用:
<template>
<h1>reactive使用</h1>
{{info.age}}
<button @click="handleClick">点我姓名加?</button>
<button @click="handleUp">点我年龄加1</button>
</template>
<script>
import {ref, reactive} from "vue";
export default {
name: "setup",
setup(){
let info=reactive({
age:10
})
function handleClick(){
name.value=name.value+'?'
console.log(name)
}
function handleUp(){
info.age++
console.log(info.age)
}
return{
name,handleClick,info, handleUp
}
}
}
</script>
计算和监听属性
计算属性
<template>
{{person.FullName}}
</template>
<script>
import {ref, reactive, computed} from "vue"
export default {
name: "计算属性",
//案例一
// computed:{
// FullName:function (){}
// },
setup(){
// let FirstName = ref('zhao')
// let LastName = ref('qin')
// let FullName = computed(()=>{
// return FistName.value + LastName.value
// })
//案例二
let person = reactive({
FirstName:'zhao',
LastName:'qin'
})
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
}
}
}
</script>
监听属性
1.监听属性:watch、
<template>
{{name}}
</template>
<script>
import {ref,watch,watchEffect} from "vue";
export default {
name: "监听属性",
setup(){
let name=ref('lili')
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
}
}
}
</script>
生命周期
1.Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted
2.Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
hooks
1.什么是hook?
本质是一个函数,把setup函数中使用的Composition API进行了封装。
类似于vue2.x中的mixin。
自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易
2.代码:
2.1 hook(类似于父类)
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
}
2.2 在使用的组件中导入
<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>
toRefs
1.setup函数,return {...toRefs(data)}可以解压复制
export default {
name: 'App',
setup() {
let data = reactive({
name: 'liil',
age: 19,
isShow: true
})
function handleShow() {
data.isShow = !data.isShow
data.age++
}
return {
...toRefs(data),
handleShow
// data
}
}
}
后台管理模板
1.vue-admin-template-master
package.json 第7行加入
"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
2.java版的若依,带权限控制的后台管理模块
3.python :django-vue-admin
4.python flask-vue-admin
5.go:gin-vue-admin
原文地址:http://www.cnblogs.com/040714zq/p/16852685.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性