setup函数是所有数据初始化的函数,一切函数都定义在setup里面
setup需要return一个对象,把数据定义在这个对象里面
setup没有this指向,不能实现双向数据绑定
vue3的生命周期(7)
创建实例之前 setup
挂载DOM之前 onbeforeMounted
挂载DOM之后 onMounted
更新组件之前 onbeforeUpdate
更新组件之后 onUpdate
卸载销毁之前 onbeforeUnmount
卸载销毁后 onUnmount
钩子函数的使用方法:{
先把对应的钩子函数从vue里面解构出来,在setup里面定义对应的方法,在这个方法里传入的参数是一个箭头函数
}
reactive函数
把一个复杂数据类型定义为一个响应式的数据
使用方法:(
先把reactive从vue里面解构出来
在setup里面定义对象,在对象里面定义数据
setup把reactive的值作为返回值返回
页面使用reactive里面的返回的值的数据
)
toRef函数
把单独的一个数据拿出来依然可以保持双向数据绑定
使用方法:(
先把方法从vue里面解构出来
在setup里面重新let
let 取出的变量=toRef('你需要取出数据的reactive的对象','需要取出来的数据')
)
在页面中使用是需要一个value的属性
toRefs函数
把setup里面的数据分模块管理,使用扩展因算符时,里面的reactive的数据没有双向数据帮绑定
这时需要使用toRefs来检测数据
使用方式
先把toRefs结构出来,
在setup里面声明变量=对应的模块
在return里面...声明的变量
页面直接显示对应的数据
Ref函数
能够定义基本数据类型为响应式
js修改或者获取需要value属性
使用方法
先引入Ref函数
声明一个变量=Ref({
定义数据
})
使用js改变或者获取时,变量.value.里面的定义数据=‘新值’
Ref属性*(用于获取Dom元素的)
使用方法:
单个标签
先把Ref解构,在标签上边绑定Ref属性,
在setup函数里面使用ref(null),返回一个空的节点对象
在onMounted钩子函数里面通过变量名.value来获取
获取多个标签
通过函数遍历
在标签上通过 :ref='函数名'
定义一个函数,这个函数的参数是每次遍历的元素,
可以把元素放在指定的数组里面
computed(计算属性)
把computed在项目里面解构
基础使用:
let 计算属性=computed(()=>{
传递函数的返回值当计算属性的变量
return 值;
})
高级使用:
let 计算属性=computed({
get(){
},
set(){
}
})
watch监听(深层监听)
watch(被监听的量,(新值,旧值)=>{
})
想要配置默认触发选项
定义deep:true immediate:true 一上来就执行一次
父子组件传参
1 在父组件模板中找到子组件标签
* 2 通过v-bind绑定一个自定义属性名 值为传递的变量
* 3 在子组件的js大括号里面通过props注册传递过来的属性名
* 4 这个属性名就可以当做一个变量直接使用 或者js里面通过this.获取
* setup函数的第一个参数就是props 可以拿到父组件给子组件传递过去的数据
子给父传参的步骤:
从setup函数的第二个参数中解构出来emit方法
* 1 在子组件的任意事件里面通过this.$emit方法
* 2 this.$emit('自定义事件名称',传递过去的数据可以是多个数据)
* 3 在父组件模板中找到子组件标签 通过@绑定自定义事件名称
* 4 值为父组件methods里面的一个函数名
* 5 这个去多功能函数的心肝接受传递过来的数据
* 6 如果想要这个这个数据在父组件的其他地方使用 可以通过data定义一个变量作为中转
*/