vue3(3)

7、watchEffect vs watch

Vue3 的 watch 方法与 Vue2 的概念类似，watchEffect 会让我们有些疑惑。其实 watchEffect 与 watch 大体类似，区别在于：

watch 可以做到的

懒执行副作用

更具体地说明什么状态应该触发侦听器重新运行

访问侦听状态变化前后的值

对于 Vue2 的 watch 方法，Vue3 的 “watch” 多了一个「清除副作用」 的概念，我们着重关注这点。

这里拿 watchEffect 来举例：

watchEffect：它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

watchEffect 方法简单结构

watchEffect(onInvalidate => {
  // 执行副作用
  // do something...
  onInvalidate(() => {
    // 执行/清理失效回调
    // do something...
  })
})

执行失效回调，有两个时机

副作用即将重新执行时，也就是监听的数据发生改变时

组件卸载时

8、计算属性 - Computed Properties

我们一起试试添加一个计算属性来转换username成小写字母。

在 Vue2 中实现，我们只需要在组件内的选项属性中添加即可

export default {

  // .. 
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    }
  }
}

Vue3 的设计模式给予开发者们按需引入需要使用的依赖包。这样一来就不需要多余的引用导致性能或者打包后太大的问题。Vue2就是有这个一直存在的问题。

所以在 Vue3 使用计算属性，我们先需要在组件内引入computed。

使用方式就和反应性数据（reactive data）一样，在state中加入一个计算属性:

import { reactive, onMounted, computed } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    // ...
  }