js组合式api
1 | <template> |
setup模块化开发
1 | // useClickOutside.ts |
watch侦听数据变化
watch
的第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。
1 | // watch 简单应用 |
不能直接侦听响应式对象的属性值
1 | const obj = reactive({ count: 0 }) |
需要提供该函数的 getter 函数
1 | // 提供一个 getter 函数 |
直接给 watch()
传入一个响应式对象,会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发,上边例子中加上 { deep: true } 第三参数也是这个效果
1 | // |
watchEffect()
函数
如果我们想在某个熟悉变化后再执行某个操作可以使用这个函数
1 | watchEffect(async () => { |
如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: 'post'
选项
1 | watch(source, callback, { |
停止侦听
一般情况完全不要关心这个,它会根据宿主示例自动卸载。但也有例外情况
1 | // ...这个则不会!一般也不会这么用 |
计算属性
最佳实践:
1 | // 普通计算属性 |
生命周期函数
1 | // mapping vue2 -> vue3 |
defineComponent
1 | defineComponent 包裹的组件能够显示语法提示,更好的为ts服务 |
访问模板引用
如果你需要侦听一个模板引用 ref 的变化,确保考虑到其值为
null
的情况
1 | <script setup> |
父组件,访问子模版
如果一个子组件使用的是选项式 API 或没有使用
<script setup>
,被引用的组件实例和该子组件的this
完全一致,这意味着父组件对子组件的每一个属性和方法都有完全的访问权。