vue3.0新特性初体验（二）

前端老道

发布于 2022-03-29 15:59:08

2830

发布于 2022-03-29 15:59:08

文章被收录于专栏：Vue开发社区

作者：炮哥

watchEffect

接受一个函数，当依赖改变时，重新调用该函数。

const count = ref(0)

watchEffect(() => console.log(count.value))

setTimeout(() => {
  count.value++
}, 100)

当watchEffect()在setup()或生命周期钩子中被调用时，监听就始终存在该组件的生命周期中，直到组件unmount.

另一种卸载监听的情况是，watchEffect()返回一个stop handler，调用该handler即可停止监听。

const stop = watchEffect(() => {
  /* ... */
})

// later
stop()

当向后台获取数据时，watchEffect()接受async回调函数。

const data = ref(null)
watchEffect(async () => {
  data.value = await fetchData(props.id)
})

组件的update函数也有watch effect。用户定义的watchEffect会在组件update之后再去调用。

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    setup() {
      const count = ref(0)

      watchEffect(() => {
        console.log(count.value)
      })

      return {
        count
      }
    }
  }
</script>

上述代码，第一轮会同步打印count.value（在onmount生命周期前）; 当count发生改变时，先执行组件更新，然后再去log.

如果想将watchEffect中的回调函数第一次执行，放在onmount后，

onMounted(() => {
  watchEffect(() => {
    // access the DOM or template refs
  })
})

如果想让watchEffect()调用发生在组件update前，或re-run同步，需要传递一个带有flush属性(默认值为post)的option对象。

watchEffect(()=> {
//...
}, {
 flush: 'sync'  // 在更新前触发 flush: "pre"
})

此外，option对象还有ontrack和ontrigger两个函数属性，用于调试watcher的行为。

onTrack will be called when a reactive property or ref is tracked as a dependency
onTrigger will be called when the watcher callback is triggered by the mutation of a dependency

watchEffect(
  () => {
    /* side effect */
  },
  {
    onTrigger(e) {
      debugger   // 进行交互式调试
    }
  }
)

watch

等价于vue 2.x中的this.$watch.

相比于watchEffect()， watch()可帮我们实现：

Perform the side effect lazily;
Be more specific about what state should trigger the watcher to re-run;
Access both the previous and current value of the watched state.

watch()的数据源可以是一个返回值的getter函数，或者是一个ref对象。

// watching a getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// directly watching a ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

对于多数据源的监听，可借助数组。

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

生命周期钩子

可以使用直接导入的onXXX功能注册生命周期钩子：

import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

这些生命周期钩子注册功能只能在期间同步使用setup()（只能在setup()中调用），因为它们依赖于内部全局状态来定位当前活动实例（当前setup()正在被调用的组件实例）。在没有当前活动实例的情况下调用它们将导致错误。

2.x生命周期选项和3.0Composition API之间的映射

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured

新钩子

除了2.x生命周期等效项之外，3.0Composition API还提供了以下调试挂钩：

onRenderTracked
onRenderTriggered

两个钩子都收到DebuggerEvent类似于onTrack和onTrigger观察者的选项：

export default {
  onRenderTriggered(e) {
    debugger
    // inspect which dependency is causing the component to re-render
  }
}

provide & inject

provide并inject启用类似于2.x provide/inject选项的依赖项注入。两者都只能在setup()当前活动实例期间调用。

import { provide, inject } from 'vue'

const ThemeSymbol = Symbol()

const Ancestor = {
  setup() {
    provide(ThemeSymbol, 'dark')
  }
}

const Descendent = {
  setup() {
    const theme = inject(ThemeSymbol, 'light' /* optional default value */)
    return {
      theme
    }
  }
}

inject接受可选的默认值作为第二个参数。如果未提供默认值，并且在Provide上下文中找不到该属性，则inject返回undefined。

使用响应式

为了保持提供的值和注入的值之间的响应式，可以使用ref：

// in provider
const themeRef = ref('dark')
provide(ThemeSymbol, themeRef)

// in consumer
const theme = inject(ThemeSymbol, ref('light'))
watch(() => {
  console.log(`theme set to: ${theme.value}`)
})

模板引用

使用Composition API时，响应式引用和模板引用的概念是统一的。为了获得对模板中元素或组件实例的引用，我们可以像往常一样声明ref并从中返回setup()：

<template>
  <div ref="root"></div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const root = ref(null)

    onMounted(() => {
      // the DOM element will be assigned to the ref after initial render
      console.log(root.value) // <div/>
    })

    return {
      root
    }
  }
}
</script>

用作模板ref的ref的行为与其他任何ref一样：它们是响应式的，可以传递到组合函数中（或从中返回）。

Render/ JSX的用法

export default {
  setup() {
    const root = ref(null)

    return () => h('div', {
      ref: root
    })

    // with JSX
    return () => <div ref={root}/>
  }
}

内部用法 v-for

Composition API template refs do not have special handling when used inside v-for. Instead, use function refs (new feature in 3.0) to perform custom handling:

<template>
  <div
    v-for="(item, i) in list"
    :ref="el => { divs[i] = el }">
    {{ item }}
  </div>
</template>

<script>
import { ref, reactive, onBeforeUpdate } from 'vue'

export default {
  setup() {
    const list = reactive([1, 2, 3])
    const divs = ref([])

    // make sure to reset the refs before each update
    onBeforeUpdate(() => {
      divs.value = []
    })

    return {
      list,
      divs
    }
  }
}
</script>

defineComponent

该功能仅用于类型推断。为了让TypeScript知道应该将对象视为组件定义，以便可以推断传递给的数据的类型，这是必需的setup()。这是无操作行为的明智选择。它需要一个组件定义并按原样返回参数。

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    foo: String
  },
  setup(props) {
    props.foo // <- type: string
  }
})

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-09-10，如有侵权请联系 cloudcommunity@tencent.com 删除

api