高级网站开发工程师证书,订做网站,网站丢失了怎么办,做网站设计难吗一#xff1a;创建Vue3工程#xff08;适用Vite打包工具#xff09;
Vite官网#xff1a;Home | Vite中文网 (vitejs.cn) 直接新建一个文件夹#xff0c;打开cmd运行#xff1a;
npm create vitelatest
选择Vue和TS语言即可
生成一个项目。
Vue3的核心语法#xff…一创建Vue3工程适用Vite打包工具
Vite官网Home | Vite中文网 (vitejs.cn) 直接新建一个文件夹打开cmd运行
npm create vitelatest
选择Vue和TS语言即可
生成一个项目。
Vue3的核心语法
【OptionsAPI 与 CompositionAPI】 Vue2的API设计是Options配置风格的。 Vue3的API设计是Composition组合风格的。 这种就是选项式API数据和方法分开发
这样的好处我觉得就是整体的架构很清晰
但是缺点就是修改起来很麻烦方法和数据都散落在不同的地方 这种就是组合式API这个组合式API就和后端的java代码一样把变量和方法都写在一起 当然能实现这个组合式API和下面的这个setup密不可分。
Setup
setup是Vue3中一个新的配置项值是一个函数它是 Composition API “表演的舞台”组件中所用到的数据、方法、计算属性、监视......等等均配置在setup中。
特点如下 setup函数返回的对象中的内容可直接在模板中使用。 setup中访问this是undefined。 setup函数会在beforeCreate之前调用它是“领先”所有钩子执行的。
直接看一段代码
templatediv classpersonh2姓名{{name}}/h2h2年龄{{age}}/h2button clickchangeName修改名字/buttonbutton clickchangeAge年龄1/buttonbutton clickshowTel点我查看联系方式/button/div
/templatescript langtsexport default {name:Person,setup(){// 数据原来写在data中注意此时的name、age、tel数据都不是响应式数据let name 张三let age 18let tel 13888888888// 方法原来写在methods中function changeName(){name zhang-san //注意此时这么修改name页面是不变化的console.log(name)}function changeAge(){age 1 //注意此时这么修改age页面是不变化的console.log(age)}function showTel(){alert(tel)}// 返回一个对象对象中的内容模板中可以直接使用return {name,age,tel,changeName,changeAge,showTel}}}
/script
setup 语法糖
这个语法糖直接可以把setup独立出去
templatediv classpersonh2姓名{{name}}/h2h2年龄{{age}}/h2button clickchangName修改名字/buttonbutton clickchangAge年龄1/buttonbutton clickshowTel点我查看联系方式/button/div
/template
!-- 下面的写法是setup语法糖 --
script setup langtsconsole.log(this) //undefined// 数据注意此时的name、age、tel都不是响应式数据let name 张三let age 18let tel 13888888888// 方法function changName(){name 李四//注意此时这么修改name页面是不变化的}function changAge(){console.log(age)age 1 //注意此时这么修改age页面是不变化的}function showTel(){alert(tel)}
/script
响应式变量
概念响应式允许我们在应用程序运行过程中动态地跟踪和更新值当这些变量的值变化时视图会自动更新体现了数据驱动和单向数据流的原则 上一个案例就很好理解了
script setup langts
import {ref} from vue;const name ref(张三);
const changename () {name.value 李四;console.log(name.value)
}
/scripttemplatediv classpersonh2姓名{{name}}/h2button clickchangename修改名字/button/div
/template
这段代码逻辑很简单就是定于了一个响应式变量name点击按钮触发回调函数修改name属性 非常简单的一个功能
如果我们将这个name换成不是响应式的变量那么效果就是
‘控制台会输出李四说明name这个属性的值已经被改了不过浏览器页面不会显示李四因为这个变量不是响应式的在页面上不会改变。
ref 创建 作用定义响应式变量。 语法let xxx ref(初始值)。 返回值一个RefImpl的实例对象简称ref对象或refref对象的value属性是响应式的。
ref定义的响应式变量在这个script脚本中调用值是需要加.value的在声明组件的模板部分就是/template中的html标签部分调用是不需要.value的 reactive 创建 作用定义一个响应式对象基本类型不要用它要用ref否则报错 语法let 响应式对象 reactive(源对象)。 返回值一个Proxy的实例对象简称响应式对象。 注意点reactive定义的响应式数据是“深层次”的。 reactive我觉得用到不多ref也可以处理对象类型的数据不过ref处理对象类型的数据的时候在底层是转化为reactive的
案例
templatediv classpersonh2汽车信息一台{{ car.brand }}汽车价值{{ car.price }}万/h2h2游戏列表/h2ulli v-forg in games :keyg.id{{ g.name }}/li/ulh2测试{{obj.a.b.c.d}}/h2button clickchangeCarPrice修改汽车价格/buttonbutton clickchangeFirstGame修改第一游戏/buttonbutton clicktest测试/button/div
/templatescript langts setup namePerson
import { ref } from vue// 数据
let car ref({ brand: 奔驰, price: 100 })
let games ref([{ id: ahsgdyfa01, name: 英雄联盟 },{ id: ahsgdyfa02, name: 王者荣耀 },{ id: ahsgdyfa03, name: 原神 }
])
let obj ref({a:{b:{c:{d:666}}}
})console.log(car)function changeCarPrice() {car.value.price 10
}
function changeFirstGame() {games.value[0].name 流星蝴蝶剑
}
function test(){obj.value.a.b.c.d 999
}
/script 注意点1响应式变量里套响应式变量
const obj reactive({a:1,b:2,c:ref(3)
})
console.log(obj.a)
console.log(obj.b)
console.log(obj.c)
很简单一小段代码
reactive包着一个响应式对象里面有一个ref
这个时候我们想要输出3这个值是不需要加.value的
在响应式变量里面的响应式变量会自动解构。 注意点2响应式变量丢失响应式
看这段代码
script setup langts
import {ref,reactive} from vue;// 定义一个响应式变量
const data reactive ({name:abc,age:18
})
let {name,age} data
// 使用toRefs解决
function ChangeName(){name ------;console.log(name)
}
/scripttemplatediv classpersonh2name是{{name}}/h2button clickChangeName 修改名字/button/div
/template
这段代码的整体逻辑也很简单就是定义了一个响应式对象里面有两个属性
我们对这个变量进行解构然后新建了一个按钮点击按钮之后调用回调函数ChangeName修改name的值。 点击之后 控制台输出了修改之后的名字可以屏幕上的值并没有改变
这说明name这个属性丢失了响应式
原因式因为解构赋值会创建一个新的引用而不是原始对象
解决办法
1ToRefs
script setup langts
import {ref, reactive, toRefs} from vue;// 定义一个响应式变量
const data reactive ({name:abc,age:18
})
let {name,age} toRefs(data)
// 使用toRefs解决
function ChangeName(){name.value ------;console.log(name.value)
}
/script 2直接用ref定义这个对象
script setup langts
import {ref, reactive, toRefs} from vue;// 定义一个响应式变量
const data ref ({name:abc,age:18
})function ChangeName(){data.value.name ------;console.log(data.value.name)
}
/scripttemplatediv classpersonh2name是{{data.name}}/h2button clickChangeName 修改名字/button/div
/template toRefs 与 toRef:
templatediv classpersonh2姓名{{person.name}}/h2h2年龄{{person.age}}/h2h2性别{{person.gender}}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangeGender修改性别/button/div
/templatescript langts setup namePersonimport {ref,reactive,toRefs,toRef} from vue// 数据let person reactive({name:张三, age:18, gender:男})// 通过toRefs将person对象中的n个属性批量取出且依然保持响应式的能力let {name,gender} toRefs(person)// 通过toRef将person对象中的gender属性取出且依然保持响应式的能力let age toRef(person,age)// 方法function changeName(){name.value ~}function changeAge(){age.value 1}function changeGender(){gender.value 女}
/script
Watch
作用监视数据的变化
比如检测到年龄超过18岁然后执行什么逻辑
又或者检测到金额超过一定大小然后执行什么逻辑 特点Vue3中的watch只能监视以下四种数据 ref定义的数据。 reactive定义的数据。 函数返回一个值getter函数。 一个包含上述内容的数组。 来自Vue3的官方文档 情况一ref的基本数据
script setup langts
import {ref,watch} from vue;let sum ref(5);
function AddSum(){sum.value;
}
const stopWatch watch(sum,(newVal) {console.log(newVal);if(newVal 10){stopWatch();}
})
/script
直接照着数据名写就行
watch函数中有两个点一个是这个返回值stopWatch这个就是用来停止监视的
看得后面的if逻辑当这个newVal就是变化后的值超过了10就停止监视 还有watch的第二个参数newVal后面其实还能写写成newValOldVal这顾名思义就是变化前和变化后的值。 情况二对象类型数据
监视ref定义的【对象类型】数据直接写数据名监视的是对象的【地址值】若想监视对象内部的数据要手动开启深度监视。{deep:true}
监视reactive定义的【对象类型】数据且默认开启了深度监视。
案例
script setup langts
import {ref,watch} from vue
// 数据
let person ref({name:张三,age:18
})
// 方法
function changeName(){person.value.name ~
}
function changeAge(){person.value.age 1
}
function changePerson(){person.value {name:李四,age:90}
}
/*监视情况一监视【ref】定义的【对象类型】数据监视的是对象的地址值若想监视对象内部属性的变化需要手动开启深度监视watch的第一个参数是被监视的数据watch的第二个参数是监视的回调watch的第三个参数是配置对象deep、immediate等等.....
*/
watch(person,(newValue,oldValue){console.log(person变化了,newValue,oldValue)
},)
/scripttemplatediv classpersonh1情况二监视【ref】定义的【对象类型】数据/h1h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangePerson修改整个人/button/div
/template
这一段代码逻辑就是创建了一个person对象里面有两个值姓名和年龄我们有三个函数分别修改姓名年龄和整个人
然后我们的watch第一个参数传的式watch 我点击修改姓名或者修改年龄控制台没有任何反应 当我修改整个人的时候控制台才有输出
说明用ref定义对象类型的数据监视的是地址值检测不到对象里面的具体属性
将watch函数修改一下开启深度监视。
watch(person,(newValue,oldValue){console.log(person变化了,newValue,oldValue)
},{deep:true}) 当对象类型的内部数据发生了改变这马上就发生了变化。
情况三监视ref或reactive定义的【对象类型】数据中的某个属性 若该属性值不是【对象类型】需要写成函数形式。 若该属性值是依然是【对象类型】可直接编也可写成函数建议写成函数。
直接看代码
templatediv classpersonh1情况四监视【ref】或【reactive】定义的【对象类型】数据中的某个属性/h1h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2h2汽车{{ person.car.c1 }}、{{ person.car.c2 }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangeC1修改第一台车/buttonbutton clickchangeC2修改第二台车/buttonbutton clickchangeCar修改整个车/button/div
/templatescript langts setup namePersonimport {reactive,watch} from vue// 数据let person reactive({name:张三,age:18,car:{c1:奔驰,c2:宝马}})// 方法function changeName(){person.name ~}function changeAge(){person.age 1}function changeC1(){person.car.c1 奥迪}function changeC2(){person.car.c2 大众}function changeCar(){person.car {c1:雅迪,c2:爱玛}}监视情况四监视响应式对象中的某个属性且该属性是基本类型的要写成函数式watch(() person.name,(newValue,oldValue){console.log(person.name变化了,newValue,oldValue)})
整体的逻辑就是将要监视对象的某个属性以箭头函数的方式做为第一个参数
情况四监视多个数据
还是直接看代码
templatediv classpersonh1情况五监视上述的多个数据/h1h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2h2汽车{{ person.car.c1 }}、{{ person.car.c2 }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangeC1修改第一台车/buttonbutton clickchangeC2修改第二台车/buttonbutton clickchangeCar修改整个车/button/div
/templatescript langts setup namePersonimport {reactive,watch} from vue// 数据let person reactive({name:张三,age:18,car:{c1:奔驰,c2:宝马}})// 方法function changeName(){person.name ~}function changeAge(){person.age 1}function changeC1(){person.car.c1 奥迪}function changeC2(){person.car.c2 大众}function changeCar(){person.car {c1:雅迪,c2:爱玛}}// 监视情况五监视上述的多个数据watch([()person.name,person.car],(newValue,oldValue){console.log(person.car变化了,newValue,oldValue)},{deep:true})/script
就是把想要监视的多个数据封装成一个对象。
WatchEffect 官网立即运行一个函数同时响应式地追踪其依赖并在依赖更改时重新执行该函数。 watch对比watchEffect 都能监听响应式数据的变化不同的是监听数据变化的方式不同 watch要明确指出监视的数据 watchEffect不用明确指出监视的数据函数中用到哪些属性那就监视哪些属性。
直接看代码
script langts setup namePersonimport {ref,watch,watchEffect} from vue// 数据let temp ref(0)let height ref(0)// 方法function changePrice(){temp.value 10}function changeSum(){height.value 1}// 用watch实现需要明确的指出要监视temp、heightwatch([temp,height],(value){// 从value中获取最新的temp值、height值const [newTemp,newHeight] value// 室温达到50℃或水位达到20cm立刻联系服务器if(newTemp 50 || newHeight 20){console.log(联系服务器)}})// 用watchEffect实现不用const stopWtach watchEffect((){// 室温达到50℃或水位达到20cm立刻联系服务器if(temp.value 50 || height.value 20){console.log(document.getElementById(demo)?.innerText)console.log(联系服务器)}// 水温达到100或水位达到50取消监视if(temp.value 100 || height.value 50){console.log(清理了)stopWtach()}})
/script
生命周期
在Vue.js中组件生命周期是指组件在其整个存在期间所经历的一系列阶段 创建前beforeCreate在此阶段实例正在初始化但是数据还没有被观察到$options 已经可用。创建created实例已经完全初始化并且数据已经通过运行时代理被劫持watched。这是执行数据初始化的好时机。挂载mounted组件已经被DOM挂载到了某个元素上此时可以开始执行异步操作和监听事件因为实例已经稳定了。更新updated当组件的props、响应式数据或计算属性发生改变且VNode已经更新完成之后触发。在此阶段可以处理数据的变化。销毁beforeDestroy/destroyed组件即将卸载或已经卸载之前执行清理工作比如解绑事件和清除定时器等。 常用的钩子onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)
!-- vue3写法 --
script langts setup namePersonimport { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from vue// 数据let sum ref(0)// 方法function changeSum() {sum.value 1}console.log(setup)// 生命周期钩子onBeforeMount((){console.log(挂载之前)})onMounted((){console.log(挂载完毕)})onBeforeUpdate((){console.log(更新之前)})onUpdated((){console.log(更新完毕)})onBeforeUnmount((){console.log(卸载之前)})onUnmounted((){console.log(卸载完毕)})
/script
用的最多的应该就是onMounted(挂载完毕)我觉得可以把这个方法理解为后端的拦截器即可
我记得后面还有一个场景用了onUnmounted这个卸载之后的钩子好像emitter绑定了一个事件
这个也很好理解当你的组件被卸载之后拿绑定的事件就可以直接删除了
这也可以理解为java中的IO流我们每次开流关流之后都会在finally中关掉这个流
自定义Hooks 什么是hook—— 本质是一个函数把setup函数中使用的Composition API进行了封装
这个对于后端来说超级好理解这个自定义hooks可以理解为工具类。
具体用法
import {ref,onMounted} from vueexport default function(){let sum ref(0)const increment (){sum.value 1}const decrement (){sum.value - 1}onMounted((){increment()})//向外部暴露数据return {sum,increment,decrement}
}
我们在这个ts文件中定义了一个变量还有一些对这个变量的方法还有一个生命周期钩子
并且需要记得要向外暴露。
templateh2当前求和为{{sum}}/h2button clickincrement点我1/buttonbutton clickdecrement点我-1/buttonhr
/templatescript setup langtsimport useSum from ./hooks/useSumlet {sum,increment,decrement} useSum()
/script
用一个对象类型的数据接受useSum文件中的暴露值然后直接在模板文件中使用即可
