Vue3

194 阅读2分钟

watchEffect

更改watchEffect的执行时机 可以给watchEffect,传递第二个参数{flush:"pre"}

  1. 默认值是pre,它会在元素挂载 或者 更新之前执行
  2. 改为post,它会在组件更新后重新运行侦听器侦听辅作用
  3. sync,将强制效果始终同步触发,低效

watch

watch的API完全等同于组件watch选项的Property

  1. watch需要侦听特定的数据源,并在回调函数中执行副作用
  2. 默认情况下它是惰性的,只有当被侦听的源发生变化时才会执行回调 watch侦听函数的数据源有两种类型
  3. 一个getter函数:但是该getter函数必须引用响应式的对象(比如reactive或者ref)
  4. 直接写入一个可响应式的对象,ref(如果时一个reactive的对象的侦听,需要进行某些转换)

watchEffect的比较,watch允许我们

  1. 懒执行副作用(第一次不会直接执行)
  2. 更具体的说明当哪些状态发生变化时,触发侦听器的执行
  3. 访问侦听状态变化前后的值

作用域插槽的理解

直接贴代码,更容易理解

父组件 App

image.png

子组件 RenderFn

image.png

展示结果

image.png

可以看到父元素通过传递h元素的第三个参数,插槽通过函数的形式进行传递,即通过children的属性传递给RenderFn,render中调用,子组件也可以通过给父组件传递props(即作用域插槽scopeslop), 如果父组件不传递{default: props => ()},将显示

image.png

Props

最近在写props传值时,父组件传props和子组件声明props都是使用的小驼峰发,但是在调试时发现props的值始终为undefined <my-component refTitle='title'/>在解析时,会被转为全小写,声明props时应该为reftitle,由于标签属性不区分大小写