《Vue进阶教程》第六课：computed()函数详解(上)

往期内容：

1) 基本使用

📝计算属性computed()函数

1参数: 函数/对象

2作用: 创建一个计算属性

3返回: 计算属性对象

示例1

接收函数作为参数

javascript 复制代码

const state = reactive({firstname: 'xiao', lastname: 'ming'})
// 接收一个副作用函数做为参数, 返回一个ref类型对象
const fullname = computed(() => {
  return state.firstname + state.lastname
})
// 通过.value操作
console.log(fullname.value)

示例2

接收一个对象作为参数, 但是这种方式用的不多.

接收对象作为参数

javascript 复制代码

const state = reactive({firstname: 'xiao', lastname: 'ming'})
// 接收一个副作用函数做为参数, 返回一个ref类型对象
const fullname = computed({
  get() {
    return state.firstname + ' ' + state.lastname
  },
  set(newValue) {
    [state.firstname, state.lastname] = newValue.split(' ')
  }
})
// 通过.value操作
console.log(fullname.value)

2) 计算属性的特点

懒执行

示例

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <script>
      const { reactive, computed } = Vue
      const state = reactive({ firstname: 'xiao', lastname: 'ming' })

      const fullname = computed(() => {
        console.log('默认不执行, 只有当访问fullName.value时执行')
        return state.firstname + state.lastname
      })

      setTimeout(() => {
        fullname.value
      }, 1000)
    </script>
  </body>
</html>

缓存

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="../node_modules/vue/dist/vue.global.js"></script>

    <script>
      const { reactive, computed } = Vue
      const state = reactive({ firstname: 'xiao', lastname: 'ming' })

      const fullname = computed(() => {
        console.log('computed')
        return state.firstname + state.lastname
      })
      console.log(fullname.value) // 初次访问时, 执行1次, 保存到缓存
      console.log(fullname.value) // 再次访问, 直接返回缓存中的数据

    </script>
  </body>
</html>

3) effect的高级用法

effect函数的高级用法

1lazy: 懒执行

2scheduler: 自定义更新

lazy选项

示例

懒执行

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <script>
      const { ref, effect } = Vue

      const count = ref(0)
      // effect 返回 run() 函数,
      //  1. 加入lazy:true选项后, 不会自动调用副作用函数
      //  2. 手动执行run()函数, 才会调用副作用函数, 建立依赖关系
      const run = effect(
        () => {
          console.log('一开始不执行, 调用run才会执行', count.value)
        },
        { lazy: true }
      )
      console.log(run)
    </script>
  </body>
</html>

scheduler选项

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <script>
      const { ref, effect } = Vue

      const count = ref(0)

      effect(
        () => {
          console.log('第一次执行这里', count.value)
        },
        {
          scheduler: () => {
            console.log('更新时, 执行这里...')
          },
        }
      )
    </script>
  </body>
</html>