【Vue3重点概念总结和实践六】（v-once / 封装一个切换器 / 异步操作 / 实现本地存储函数）

目录

1、优化性能的指令

2、切换器

3、异步操作

4、实现本地存储函数

5、Vue3 + Vue-cli (1) 基础篇

6、Vue3+ Vue-cli (2) 组件篇

---

1、优化性能的指令

原题： 

Vue.js 提供了一个指令，以便只渲染一次元素和组件，并且跳过以后的更新。

vuejs-challenges/questions/12-optimize-perf-directive/README.zh-CN.md at main · webfansplz/vuejs-challenges · GitHub

答案：

v-once：仅渲染元素和组件一次，并跳过之后的更新。

在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

<script setup>
import { ref } from 'vue'
const count = ref(0)

setInterval(() => {
  count.value++
}, 1000)
</script>

<template>
  <span v-once>使它从不更新: {{ count }}</span>
</template>

文档：

内置指令 | Vue.js

2、切换器

原题： 

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

答案：

<script setup>
import { ref } from 'vue'
/**
 * 实现一个切换状态的可组合函数
 * 确保该功能正常工作
 */
function useToggle(flag) {
  const state = ref(flag)
  const toggle = () => (state.value = !state.value)
  return [state, toggle]
}
const [state, toggle] = useToggle(false)
</script>

<template>
  <p>State: {{ state ? 'ON' : 'OFF' }}</p>
  <p @click="toggle">Toggle state</p>
</template>

3、异步操作

原题： 

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

答案：

<script setup>
import { ref } from 'vue'
const count = ref(0)

/**
 * 实现`until`函数
 */
function until(initial) {
  function toBe(value) {
    return new Promise(resolve => {
      initial.value = value
      console.log('异步里面')
      resolve()
    })
  }
  return {
    toBe
  }
}

// 打印顺序 => 置0 等待 异步里面 true 定时器触发
async function increase() {
  count.value = 0
  console.log('置0')
  setInterval(() => {
    console.log('定时器触发')
    count.value++
  }, 1000)
  console.log('等待')
  await until(count).toBe(3)
  console.log(count.value === 3) // 确保输出为true
}
</script>

<template>
  <!-- 点击事件触发后，从3开始递增1 -->
  <div @click.once="increase">触发increase函数{{ count }}</div>
</template>

4、实现本地存储函数

原题： 

我们经常需要使用 localStorage API，一个好用的可组合函数封装将帮助我们更好地使用它。

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

答案：

<script setup>
import { computed, ref } from 'vue'
/**
 * 实现`useLocalStorage`函数
 */
function useLocalStorage(key, initialValue) {
  let init = ref(initialValue)
  let count = computed({
    get: () => {
      const curVal = localStorage.getItem(key)
      if (!curVal) {
        localStorage.setItem(key, init.value)
      }
      return init.value
    },
    set: val => {
      init.value = val
      localStorage.setItem(key, val)
    }
  })
  return count
}

const counter = useLocalStorage('counter', 0)
// 我们可以通过触发`counter`的`getter`来获取本地存储的值
console.log(counter.value)
// 同样地,我们也可以通过触发`counter`的`setter`来设置本地存储的值
const update = () => counter.value++
</script>

<template>
  <p>当前计数值{{ counter }}</p>
  <button @click="update">更新</button>
</template>

5、Vue3 + Vue-cli (1) 基础篇

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

6、Vue3+ Vue-cli (2) 组件篇

Vue3+ Vue-cli (2) 组件篇_vue3 根组件 应用_小草莓蹦蹦跳的博客-CSDN博客