|Vue3.0高阶实战：开发高质量音乐Web app( 二 )

示例：
<zuiMengDialog v-model:visible=\"x\" :closeOnClickOverlay=\"false\" :save=\"f1\" :cancel=\"f2\">
<template v-slot:content>
<strong>hi word</strong>
<div>你好啊世界</div>
</template>
<template v-slot:title>
这个是一个弹出框
</template>
<template v-slot:footer>
<zuiMengButton theme=\"button\" level=\"main\" @click=\"toggle\">确认</zuiMengButton>
<zuiMengButton @click=\"toggle\" >取消</zuiMengButton>
</template>
</zuiMengDialog>
//子组件中更改父组件绑定值方法
<script lang=\"ts\" setup='propscontext' >
import { SetupContextfrom 'vue';
import {zuiMengButton from './index'
export const close = () => <{p>//visible为需要更改的值名字
context.emit('update:visible' false)

</script>
ref()和reactive()
这两个方法都是Vue3.0中暴露出的进行响应式绑定的函数。但是两者不同点在于：
ref(null)一般处理是基础数据类型生成的响应式对象获取值或者更改值需要使用value才能获取到对应的值，不仅如此Vue3.0取消了this.$refs进行组件的绑定，而是通过ref()绑定组件实例进行相应操作。
reactive(null)一般处理的是复杂数据类型，生成的响应式对象获取值则可以直接使用和修改。
setup(props context) <{p>let count=ref(1)
console.log(count.value)//1
count.value=https://mparticle.uc.cn/api/2
console.log(count.value)//2
let state = reactive(<{p>stateSon: 1
stateDaughter: 2
)
console.log(state .stateSon)//1
state.stateSon=2
console.log(state .stateSon)//2
return <{p>count
state

template模板部分
Vue3.0中由于通过Fragment()函数巧妙进行切片处理，在template中可以进行多个根节点的书写。在2.0中是无法进行实现，无疑是一个重大的突破。
watchEffect()函数
此函数是一个监听函数，在props中数据第一次初始化和更改时进行触发，类似于React中的useEffect()函数。需要留意的是这个方法在初始化时会在onMounted周期之前调用一次，但是此时dom节点未挂载，若进行操作dom会报错。
此方法传递两个参数
第一个参数为回调函数(effect()副作用函数) ， effect()中还能接收一个参数onInvalidate()清除副作用函数，主要作用就是在组件销毁是进行 effect()的清除操作。这个思想和react中很相似，当你使用监听之后需要在组件销毁是进行清除监听。
第二个参数为 options他的作用是一个指针调度器用来控制watchEffect的触发事件是在数据的更改之前还是在数据的更改之后flush有两个值'post'(数据更新之后调用)和'pre'(数据更新之前调用)
setup(props context) <{p>watchEffect(() => <{p>//回调函数主体
<{p>//options值
flush: 'post'
)
)

watch() 监听器
watch作用和之前的2.0中并没有两样但是书写方式却进行也改变
在setup函数中watch监听单个的写法
setup(props context) <{p>let count=ref(1)
let state = reactive(<{p>stateSon: 1
)
//监听reactive类型
watch(
() => state.stateSon ，//需要被监听的数据
(newVlaue ，oldVlaue) => { //参数1为新值，参数2为旧值
console.log(newVlaue) //数据变化后执行的回调函数

{lazy：false//首次创建是否监听
)
//监听ref类型
watch(count1 ， (newVlaue ，oldVlaue) => {//参数1为新值，参数2为旧值
console.log(newVlaue) //数据变化后执行的回调函数
)
return <{p>count