watchEffect
更改watchEffect的执行时机
可以给watchEffect,传递第二个参数{flush:"pre"}
- 默认值是
pre,它会在元素挂载 或者 更新之前执行 - 改为
post,它会在组件更新后重新运行侦听器侦听辅作用 sync,将强制效果始终同步触发,低效
watch
watch的API完全等同于组件watch选项的Property
watch需要侦听特定的数据源,并在回调函数中执行副作用- 默认情况下它是惰性的,只有当被侦听的源发生变化时才会执行回调
watch侦听函数的数据源有两种类型 - 一个
getter函数:但是该getter函数必须引用响应式的对象(比如reactive或者ref) - 直接写入一个可响应式的对象,
ref(如果时一个reactive的对象的侦听,需要进行某些转换)
与watchEffect的比较,watch允许我们
- 懒执行副作用(第一次不会直接执行)
- 更具体的说明当哪些状态发生变化时,触发侦听器的执行
- 访问侦听状态变化前后的值
作用域插槽的理解
直接贴代码,更容易理解
父组件 App
子组件 RenderFn
展示结果
可以看到父元素通过传递h元素的第三个参数,插槽通过函数的形式进行传递,即通过children的属性传递给RenderFn,render中调用,子组件也可以通过给父组件传递props(即作用域插槽scopeslop),
如果父组件不传递{default: props => ()},将显示
Props
最近在写props传值时,父组件传props和子组件声明props都是使用的小驼峰发,但是在调试时发现props的值始终为undefined
<my-component refTitle='title'/>在解析时,会被转为全小写,声明props时应该为reftitle,由于标签属性不区分大小写