vue使用hooks抽离和使用公共js抽离区别

hooks抽离后引入不同页面使用 不会存在数据状态共享，普通js抽取函数会有数据状态共享。

代码如下：

Test为主文件，分别引入Test1和Test2

<template>
<Test1/>
<hr/>
<Test2/>
</template><script setup>
import Test1 from './Test1.vue'
import Test2 from './Test2.vue'</script>

Test1和Test2中都引入了外部js代码：此时为普通js抽取函数的情况

Test1：

<template>Test1 内容<br />{{ num }}<br />{{ doubleNum }}<br /><button @click="changeNum">点击</button><button @click="addNum">Test1点击+1</button>
</template><script setup>
//普通抽取函数，会有状态共享，改变一个引入的变量，其他页面引入的变量也会改变
import { num, changeNum, doubleNum } from './export.js'const addNum = () => {num.value++}</script>

Test2：

<template>Test2 内容<br />{{ num }}<br />{{ doubleNum }}<br /><button @click="changeNum">点击</button>
</template><script setup>
import { num, changeNum, doubleNum } from './export.js'</script>

外部export.js：

import { ref, computed } from "vue"
export const num = ref(0)
export const changeNum = () => {num.value++
}
export const doubleNum = computed(() => {return num.value * 2
})

此时，在页面中点击Test1或Test2中按钮进行修改num的值，另外一个页面中数据也会变，状态共享了：

 当修改为Hooks抽离：

Test1：

template>Test1 内容<br />{{ num }}<br />{{ doubleNum }}<br /><button @click="changeNum">点击</button><button @click="addNum">Test1点击+1</button>
</template><script setup>
import { testHooks } from './testHooks.js'
const { num, changeNum, doubleNum } = testHooks()
const addNum = () => {num.value++
}
</script>

Test2：

<template>Test2 内容<br />{{ num }}<br />{{ doubleNum }}<br /><button @click="changeNum">点击</button>
</template><script setup>
import { testHooks } from './testHooks.js'
const { num, changeNum, doubleNum } = testHooks()
</script>

testHooks.js:

import { ref, computed } from "vue"
export const testHooks = () => {const num = ref(0)const changeNum = () => {num.value++}const doubleNum = computed(() => {return num.value * 2})return {num,changeNum,doubleNum}
}

此时修改其中一个后，另外一个状态不受影响：

总结：普通抽取函数，会有状态共享，改变一个引入的变量，其他页面引入的变量也会改变，hooks抽取引入后状态互不影响；