一、简介
组合式api
1、 setup（）
-
组合式api的入口
-
页面启动后，第一个自动执行的函数
-
定义项目中所有的变量、方法
-
所有的变量和方法，只有return出去，在页面视图中正常使用
html<template> <!-- v-text的简写--> <h1> {{data}} </h1> <button @click="handleLogin">登录</button> </template> <script> export default { name: "login", setup() { const data = "变量" const handleLogin = () => {//方法 es6写法 console.log("qqqq") } return {//返回才能在页面中使用 data, handleLogin, } } } </script>
2、ref函数
-
当ref里面的值发生改变时，视图会自动更新---此值也就是响应式的数据
-
ref可操作基本数据类型，也可以操作复杂数据类型
-
建议：ref操作基本数据类型
-
使用需要引入import {ref} from "vue"
html<template> <!-- v-text的简写--> <h1> {{name}} </h1> <button @click="handleLogin">登录</button> </template> <script> import {ref} from "vue" export default { name: "login", setup() { const name = ref("变量") const handleLogin = () => {//方法 es6写法 name.value="123123" } return {//返回才能在页面中使用 name, handleLogin, } } } </script>
3、reactive
-
reactive专门用来创建复杂数据类型的响应式引用（基本数据类型不适用）
-
可以响应深层次的数据，例子：多维数组
-
返回值是一个响应式的proxy 对象--vue底层响应对象
-
使用需要引入import {reactive} from "vue"
javascript<template> <!-- v-text的简写--> <h1> {{name.loginName}} </h1> <h1> {{name.pwd}} </h1> <button @click="handleLogin">登录</button> </template> <script> import {reactive} from "vue" export default { name: "login", setup() { const name = reactive({ loginName: "sysadmin", pwd: "admin111111" }) const handleLogin = () => {//方法 es6写法 name.loginName="admin" name.pwd="111111" } return {//返回才能在页面中使用 name, handleLogin, } } } </script>
4、toRef 函数
-
toRef 可以创建响应式数据
-
ref本质是复制粘贴，脱离了与原数据的交互
-
Ref函数将对象中的属性变成响应式数据，修改响应式数据不会影响原数据，但是会更新视图
-
toRef函数本质是引用，与原数据有交互，修改响应式数据会影响原数据，但是不会更新视图
-
使用时需引用
javascriptimport {toRef} from "vue" toRef(需要操作的对象,对象的某一个属性)
5、toRefs 函数
-
toRefs可以批量创建多个响应式数据
-
toRefs函数本质是引用，与原数据有交互，修改响应式数据会影响原数据，但是不会更新视图
-
toRefs函数可以与其他响应式函数交互，更加的方便的处理数据
-
使用时需引用
javascriptimport {toRefs} from "vue" toRefs(需要操作的对象)javascript<template> <!-- v-text的简写--> <h1> {{loginName}} </h1> <h1> {{pwd}} </h1> <button @click="handleLogin">登录</button> </template> <script> import {reactive,toRefs} from "vue" export default { name: "login", setup() { const name = reactive({ loginName: "sysadmin", pwd: "admin111111" }) return {//返回才能在页面中使用,三个点是es6里面的拓展运算符 ...toRefs(name), handleLogin, } } } </script>
6、计算属性 computed
-
(1) 与vue2 一样，均是用来监听数据变化
-
(2) 需要引入：import {toRefs} from "vue"
javascript<template> 小王年龄：<input type="number" v-model="wang"><br> 小李年龄：<input type="number" v-model="li"><br> 总计：<input type="number" v-model="sum"><br> 相乘：<input type="number" v-model="multiply"> </template> <script> import {computed,reactive,toRefs} from "vue" export default { name: "login", setup() { const li ="" const wang = "" const res = reactive({li,wang}) const sum = computed(()=>{ return res.li+res.wang }) const multiply = computed(()=>{ return res.li*res.wang }) return {//返回才能在页面中使用 ...toRefs(res), multiply, sum } } } </script>
7、watch侦听器
-
与vue2一样一致，均是用来监听数据变化的
-
watch(监听的对象，(newVal,oldVal)=>{}[,{immediate:true}])，第三个参数是进入页面时就开始监听新的值，立即监听
javascript<template> <h1>num1：{{num1}}</h1> <h1>num2：{{num2}}</h1> <h1>num3：{{num3.age.num}}</h1> <button @click="num1++">num1++</button> <button @click="num2+=2">num2++</button> <button @click="num3.age.num++">num3对象</button> </template> <script> import {watch,reactive,toRefs,ref} from "vue" export default { name: "login", setup() { const num1 =ref(0) const num2 =ref(1) const num3 = reactive({ name:"小狗", age:{ num:1 } }) //监听一个对象(监听的对象，(newVal,oldVal)=>{}) //newVal:最新的结果 oldVal：上一次的结果 watch(num1,(newVal,oldVal)=>{ console.log(newVal,oldVal) },{immediate:true}) //监听多个对象 watch([num1,num2],(newVal,oldVal)=>{ console.log(newVal,oldVal) }) /* * 监听整个reactive响应数据的变化，只能监听到最新的结果 * */ watch(num3,(newVal)=>{ console.log(newVal) }) /* * 监听reactive中某一个属性值响应数据的变化 * */ watch(()=>num3.age.num,(newVal,oldVal)=>{ console.log(newVal,oldVal) }) return {//返回才能在页面中使用 // ...toRefs(), num1, num2, num3 } } } </script>
8、watchEffect
-
watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖
-
watch可以获取到新值和旧值，而watchEffect拿不到
-
watchEffect不需要指定监听的属性，它会自动收集依赖，只要我们回调中引用到了响应式的属性，那么这些属性变更的时候，这个回调就会执行，而watch只能监听指定的属性
javascript<template> <h1>num1：{{num1}}</h1> <h1>num2：{{num2}}</h1> <h1>num3：{{num3.age.num}}</h1> <button @click="num1++">num1++</button> <button @click="num2+=2">num2++</button> <button @click="num3.age.num++">num3对象</button> </template> <script> import {watchEffect,reactive,ref} from "vue" export default { name: "login", setup() { const num1 =ref(0) const num2 =ref(1) const num3 = reactive({ name:"小狗", age:{ num:1 } }) //开始监听 const res =watchEffect(()=>{ //监听的属性 普通对象 const a = num1.value // console.log(a) //监听复杂对象的属性 const b = num3.age.num console.log(b) }) //停止监听 res() return {//返回才能在页面中使用 // ...toRefs(), num1, num2, num3 } } } </script>
9、shallowRef 和shallowReactive
-
shallowRef：只处理基本数据类型
-
shallowReactive：只处理第一层数据
javascript<template> <h1>姓名：{{name}}</h1> <h1>年龄：{{age.num}}</h1> <button @click="name+='2'">姓名</button> <button @click="age.num++">年龄</button> </template> <script> import {shallowReactive,shallowRef,ref,toRefs} from "vue" export default { setup() { const num3 = shallowReactive({ name:"小狗", age:{ num:1 } }) return {//返回才能在页面中使用 ...toRefs(num3), } } } </script>
二、组件传值
1、vuex 实现组件传值
父子，子子，祖孙
2、其他方法----父子 传值
（1）进入页面即刻传值
- 父组件
javascript
//进入页面即刻传值
<template>
<helloworld/>
</template>
<script>
import {reactive} from "vue"
import helloworld from "组件路径"
export default {
compoents:{
helloworld
}，
setup() {
const p1 = reactive({name:"小宋",age:12})
provide("p",p1)//祖传 第一个参数是子组件用来识别的参数
}
}
//点击传值- 子组件
javascript
export default {
name:"helloworld",
setup(){
const res = inject("p")//孙收
}（2）点击传值
- 父组件
javascript
<template>
<helloworld ref ="val"/>//在父组件中找到子组件的节点
</template>
<script>
import {reactive,ref} from "vue"
import helloworld from "组件路径"
export default {
compoents:{
helloworld
}，
setup() {
const val = ref()
const p1 = reactive({name:"小宋",age:12})
function btn(){//点击事件调用子组件的方法
val.vlaue.receive(p1)
}
return{btn,val}
}
</script>- 子组件
javascript
export default {
name:"helloworld",
setup(){
//被父组件调用的方法
function receive(val){
console.log(val)
}
return{receive}
}三、抽离封装
vue3中的任何一个组合式api都可以单独抽离出去在另一个单独的文件，最后只需要回归到setup()中即可