computed）网站首页 技术交流

const state = reactive({
  foo: 1,
  bar: 2
})
// 双向ref,会与源属性同步
const fooRef = toRef(state, 'foo') // 重点！！！！

// 修改引用将更新原引用
fooRef.value++
console.log(state.foo, fooRef.value, '修改引用将更新原引用', state.foo === 2) // true

// 修改原引用也会更新`ref`
state.foo++
console.log(state.foo, fooRef.value, '修改原引用也会更新`ref`', fooRef.value === 3) // true

文档：

响应式 API：工具函数 | Vue.js

4、如何保证解构 / 扩展不丢失响应性 ?

原题：

在 JavaScript 中，我们经常解构/扩展对象。在 Vue.js中，我们同样解构/扩展“响应式”对象，但它会失去响应性。

答案：

当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性：toRefs(对象)

toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用 toRef

例子1：

function useCount() {
  const state = reactive({
    count: 0
  })

  function update(value) {
    state.count = value
  }

  return {
    state: toRefs(state),
    update
  }
}

// 引入的时候
// 确保解构不丢失响应性
const {
  state: { count },
  update
} = useCount()

    <p>
      <span @click="update(count - 1)">-</span>
      {{ count }}
      <span @click="update(count + 1)">+</span>
    </p>

例子2：

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型：{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

例子3：

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // ...基于状态的操作逻辑

  // 在返回时都转为 ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

文档：

响应式 API：工具函数 | Vue.js

5、创建一个可写的计算属性

原题：

vuejs-challenges/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

computed()

接受一个 getter 函数，返回一个只读的响应式 ref 对象。

该 ref 通过 .value 暴露 getter 函数的返回值。

它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

创建一个只读的计算属性 ref：

const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2

plusOne.value++ // 错误

创建一个可写的计算属性 ref：

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

/**
 * 确保 `plusOne` 可以被写入。
 * 最终我们得到的结果应该是 `plusOne` 等于 3 和 `count` 等于 2。
 */
plusOne.value++

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

文档：

Vue3 + Vue-cli (1) 基础篇_vue3 vue-cli_小草莓蹦蹦跳的博客-CSDN博客

响应式 API：核心 | Vue.js