Vue3的响应式机制分析

1. 响应式原理

三种响应式方案：defineProperty、Proxy、和 value setter

前两种大家都很熟悉，value setter就是利用了 object 对象的 get 和 set 属性进行的劫持，Vue3 ref实现就是第三种方法。

2. 定制响应式数据

想办法解决所有的操作状态在刷新后就都没了这个问题？

localStorage + watchEffect

import { ref, watchEffect, computed } from "vue";

let title = ref("");
let todos = ref(JSON.parse(localStorage.getItem('todos')||'[]'));
watchEffect(()=>{
    localStorage.setItem('todos',JSON.stringify(todos.value))
})
function addTodo() {
  todos.value.push({
    title: title.value,
    done: false,
  });
  title.value = "";
}

我们可以封装一个useStroage函数

function useStorage(name, value=[]){
    let data = ref(JSON.parse(localStorage.getItem(name)|| JSON.stringify(value)))
    watchEffect(()=>{
        localStorage.setItem(name,JSON.stringify(data.value))
    })
    return data
}

3. Vueuse工具包

开发可以参考：https://vueuse.org/functions.html

安装：

npm install @vueuse/core

利用Vueuse工具包简单实现一个全屏功能：

<template>
  <h1 @click="toggle">click</h1>
</template>
<script setup>
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, enter, exit, toggle } = useFullscreen()
</script>