1.组合式api的用途
在正常的组件式开发里面,vue的属性data,method,还有钩子函数这些东西都是分开的,大型开发的时候不太好处理,但是如果在setup里,把有关的函数变量写在一堆,就会显得更加容易区分
1.组合式写在setup()函数里面
2.如果想让外界访问什么东西,就要return返回一下
2.基本语法:
(1)基本变量,对象,函数的写法
setup(){
const m="hello"
let m1={
message:"!"
}
function changeMsg(){
alert("!!");
m1.message="!";
}
}
但是这里有个问题就是,这里面写的对象和常量并不是响应式的
(2)响应式对象的书写方法
const a=ref(0);
//创建响应式的数据
const b=reactive({
age:10,name:"zhangsan",address:{message:"12"}
});
//创建响应式的对象
//这里就算是里面嵌套的东西也是响应式的
不过这样创建的话,产生的是一个具有value属性的对象,要具体访问数据的话,就要用。value函数进行访问
(3)上述两种数据的读取方法
首先要对进行读取的东西return抛出
return {m,m1,changeMsg,v,changeVal,a,b,...b,...toRefs(b),reverseMsg}
然后在外界读取的时候,可以不用加上value了.会自动识别
{{m1}}
{{obj.message.num}}
(4)另外有一种情况,es6语法中的结构(...)
比如原版本为obj对象里面的message属性等,我们访问的时候想要直接访问{{message}}
有两种方法。1在返回的时候直接解构
return {...obj}
2,结构成一堆东西再返回
const {message,。。。。}=...obj
return {message}
但是这样的效果就是会把原本响应式的东西,解构成一堆根本没有响应效果的元素,如果想让解构出来的东西重新具有响应式,就要用到toRefs函数
return {toRefs(...obj),}
//或者
const {XX,XX}=toRefs(...obj)
return {xx,}
3.setup中的两个参数
props和context,详见官方文档,感觉用不上
4.setup()中用到的生命周期钩子函数
在setup中钩子函数的名字比正常的钩子函数多个一个on
而且这里面不能使用create相关的生命周期钩子
//例如mouunt
onMounted(()=>{
//执行对应的钩子函数
})
//调用方法就是使用回调函数进行执行,并且因为是在组合api
//所以函数可以调用很多次
onMounted(()=>{
//执行对应的钩子函数
})
onMounted(()=>{
//执行对应的钩子函数
})
5.关于setup中provide和inject的用法
感觉化简了很多的调用方法,实际用起来很像sessionStorage
//父组件中
provide("name","value");
provide("name2","value2");
//孙组件或者更低的组件
const a=inject("name");
const b=inject("name2");
6.关于计算属性的使用
计算属性我们这里默认只用get方法
const reverseMsg=computed(()=>"回调函数执行成功")
//同样是借用回调函数返回一个数值
7.关于监听方法这里有两种
watch(a,(newValue,oldValue)=>{
//这里是对a这个对象进行监听,如果发生改变就会输出
//不过不适合监听对象的内部属性
})
watchEffect(()=>{
//这里没有任何参数,but很有意思
console.log(v.value)
//如果后续碰到v.value发生改变,就会重新出输出,原因是一次调用以后
//这个函数会给对应的东西,比如这里使用过一次的v绑定依赖
})