一些参考进行访问的时候的规划，还有官方案例的深度解析以及vue的响应式进阶api的使用，看完后可能会让你有些想法。

在编写 Vue 要声明具有响应式特性的数据的时候，我们不妨用来ref定义数据，然后可以透过.value来直接修改它。

// 宣告一個具有響應式的資料
const name = ref("");

// 更改變數的 value
name.value = "mike"

当我们今天遇到在子组件去修改父组件的状态需要的时候，除了使用emit外部，也可以利用类似于单向数据流的方式，定义一个状态的函数然后用 props 传递下去。

单向数据流其实就是 react 中的 Lifting State Up ( 状态提升 )，概念是一样的。

关于 Emit 与单向数据流的一些细节在参加铁人赛之前的时候我有针对这个主题进行一些介绍，可以搭配观看。https://ithelp.ithome.com.tw/articles/10273655

<script setup>
  const isOpen = ref(false);
  const Toggle = () => isOpen.value = !isOpen.value;
</script>

<template>
  <Header :Toggle="Toggle" />
  <Nav :Toggle="Toggle" :Toggle="Toggle" />
</template>

其中我相信大家应该都没有什么棘手的问题，接下来我要来探讨一下变数访问控制这件事。

封装（Encapsulation）

在大型架构在开发的时候，我们很常会使用封装的概念来编写我们的程序代码，举个最简单的例子来说，我们定义了一个变数，但是我们要修改这个变数不是采用直接的方式=来进行设置，而是利用隐藏功能来进行修改，中间的细节和过程，只穿透功能（介面）来操作变数。

// 宣告變數
let a = 1;

// 宣告 set function
const setCount = (int) => {
   a = int;
}

// 使用 set function 修改變數
setCount(4);

在上面提到的例子中，通过函式setCount来修改变量count的值，而不是直接操作变量，就是一种封装的做法，这样可以控制变量设置的过程，例如加入额外的检查或逻辑。

然而这种做法大量的被现代前端框架的React运用的淋漓尽致，当今天使用useState的时候，就可以有值以及set函数可以使用。

官方文件：https ://react.dev/reference/react/useState

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [address, setAddress] = useState('Taiwan');
}

我们可以不用去再另外定义设置函数，身为一个 Vue 的开发者，我觉得 React 在 useState 这方面真的做的很。在小型专案上面来说不错，我直接定义然后用去修改真的是ref超.value方便修改，但是当你今天需要发出或者传递要传递 props 的时候你还是需要定义 set 函数，这个时候你去的父层组件在可能会ref同时存在.value，set function尤其你的专案或者组件开始变大，相对话说会乱了一点。

举个简单的例子，我有一个activeIdx状态是需要查看网址的查询参数来更改的，但是我同时会在下面开始进入网页的时候以及网址有波动的时候去改变状态，从的例子可以activeIdx看到话说对于设置一个状态来说有太多的地方了，如果一接手别人的代码看到这样子会有一种别扭的感觉。

const route = useRoute();

const activeIdx = ref(0);

const setActiveIdx = (idx) => {
  activeIdx.value = idx;
};

watch(route, (newRoute) => {
    activeIdx.value = newRoute.query.activeId;  // 這邊去修改
});

onMounted(()=> {
  setActiveIdx(route.query.activeId) // 這邊去修改
})

时间终于造成了问题？

很多时候是因为写代码的过程演进过来的，首先一开始可能并没有定义的setActiveIdx必要，只需要交叉.value去设置就好，然后当需求越做越大的时候开始需要提交道具你可能就去定义设置函数，后面又需要在父层一开始进去去设定activeIdx状态，随着时间增加一个接一个，然后时间又很赶，没时间整理代码就会出现这样的情况。

统一你的状态访问方式

现在在Vue的中大型开发上面，会有composables（消耗逻辑处理）以及pinia（全域状态管理）的使用，针对这些封装的我们的逻辑也会有状态以及提供set function来去操作，虽然有些东西并不强制一定要提供这些设置功能，但是对于引入这些抽出的状态来说，利用封装的概念提供设置功能是可以避免跟踪组件的状态冲突以及增加代码的唯一性，重要的是可以有更好的追踪的方案流动。

所以我现在基本上在定义ref此类的响应方式资料的时候，只要在规划上面会拆组件或者稍微复杂一些，我可能会手动增加一个设置功能，事先准备，来避免我前面提到的改变状态的地方过多的问题，而且未来增加新的需求的时候你也可以直接透过设定功能来更改值，方便的很。

const username = ref("");

const setUsername = (name) => username.value = name;

问题连接就出现了

如果我有很多个ref我不是就需要很多设定功能……

const age = ref(28);
const userName = ref('Taylor');
const address = ref('Taiwan');
const setAge = (num) => age.value = num;
const setUserName = (name) => userName.value = name;
const setAddress = (addr) => address.value = addr;

这样虽然解决了前面提到的问题，但是也出现了每次都要定义 set 函数的麻烦，代码也变得多，所以有没有一种办法是可以把 React 的 useState 放在 Vue 里面实现呢？

const [state, setState] = useState(initialState)

因此接下来为了实现 React 的 useState 的语法，我们要编写一个可组合项

先打个预防针，以下部分代码可能会使部分Vue用户身体不适，请尽速离开此页面。

我们可以先添加 composables/ useState.js的文件，然后添加以下的代码

import { shallowRef } from "vue";

export function useState(baseState) {
  const state = shallowRef(baseState);
  const update = (newValue) => {
    state.value = newValue;
  };
  return [state, update];
}

这么大我们就可以在开发的时候使用跟React一样的方式来定义数据。

<script setup>
  import { useState } from "./composables/useState.js";
  const [name, setName] = useState("mike");
  const [info, setInfo] = useState({
    name: "mike",
    age: 12,
  });
</script>

<template>
  <h2>name: {{ name }}</h2>
  <pre>info: {{ info }}</pre>

  <input type="text" v-model="name" />
  
  <button @click="setName('jacky')">set name</button>
  <button @click="setInfo({ name: 'andy', age: 20 })">set info</button>
</template>

这样的一种处理方式就可以减少每次在定义ref的时候都要重新写一套函数，造成代码会很多很杂的问题，而且也不会失去响应式的特性！

范例给大家参考！https://codesandbox.io/p/devbox/vue3-usestate-w297jd

为什么不是参考？什么是shallowRef？

shallowRef是一个 Vue 的响应式进阶 API，它是ref浅层的作用层，它和ref不同，shallowRef内部的值并转换不会生成响应式，只有针对.value的集合才会是响应式，所以第一层的部分。

shallowRef常用于大型数据结构的优化与外部的状态管理系统集成。

const state = shallowRef({ count: 1 })

// 不會觸發更新
state.value.count = 2

// 會觸發更新
state.value = { count: 2 }

当我们使用useState之后，就不能直接针对对象去设置值，需要将具体的对象加上新的值一起写入

const [info, setInfo] = useState({
    name: "mike",
    age: 12,
});

// 把原本的物件加上新的值一起寫入
setInfo({
  ...info,
  address: addr,
});

基本上就相当于直接替换整个对象一样，所以草莓就不需要使用ref来增加无所谓的可能消耗。

ref的响应方式是深度的，虽然这样很有趣，但是在数据量庞大的时候，深度响应性也会导致不小的履行负载，因为每个属性访问都会触发代理的追踪。但是这种负载通常只有在处理超大规模数据或体系很深的对象时，比如一次渲染需要100,000+个属性时，会变得比较明显。

所以 Vue 提供了一种解决方案，跨越使用shallowRef并shallowReactive来绕过深度响应。shallow API 的状态只在第一层是响应方式的，对所有深度的对象不会做任何处理。这使得对深度属性的访问变得更快，但是我们必须将所有深度对象的属性视为不可变（不可变），并且只能使用替换整个对象来触发更新。

来源：https://medium.com/i-am-mike/vue3-變數的存取控制與效能最佳化-fdd45a9789ac