vue3 <script>和<script setup>和setip()的区别

在 Vue 3 中，使用 `setup` 函数来代替 Vue 2 中的 `data`、`computed`、`methods` 等选项，同时也可以在 `setup` 中访问到 `props`、`context` 等参数。以下是一个简单的 Vue 3 `setup` 函数的示例： ``` <template> <div> <p>{{ message }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ message: 'Hello Vue 3!', count: 0 }) const increment = () => { state.count++ } return { message: state.message, increment } } } </script> ``` 在 `setup` 函数中，我们使用 `reactive` 函数来创建响应式对象 `state`，包含了 `message` 和 `count` 两个属性。然后我们定义了 `increment` 方法，用于增加 `count` 的值。最后通过 `return` 语句将 `message` 和 `increment` 方法暴露出去，以便在模板中使用。

### 实现 Vue3 中获取客户端本地 IP 地址 在现代浏览器的安全策略下，直接通过 JavaScript 前端代码获取本机 IP 地址存在一定的限制。然而，可以利用 WebRTC 技术绕过这一限制并实现目标功能[^1]。 以下是基于 WebRTC 的具体实现方案： #### 使用 WebRTC 获取本地 IP 地址 WebRTC 是一种实时通信协议，能够暴露设备的网络接口信息，从而允许开发者捕获用户的内网和外网 IP 地址[^3]。 ```javascript function getLocalIPs(callback) { const ips = []; const peerConnection = new RTCPeerConnection({ iceServers: [] }); peerConnection.createDataChannel(''); peerConnection.onicecandidate = function(event) { if (event.candidate && event.candidate.candidate) { let candidate = event.candidate.candidate; let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4})+)/gi; let match = ipRegex.exec(candidate); while(match !== null){ ips.push(match[0]); match = ipRegex.exec(candidate); } } }; peerConnection.createOffer().then(offer => { return peerConnection.setLocalDescription(offer); }).catch(error => console.error('Error creating offer:', error)); setTimeout(() => callback(ips), 1000); // Wait a bit to gather candidates } ``` 此函数会尝试创建一个 `RTCPeerConnection` 对象并通过其 ICE 协商机制收集候选者中的 IP 地址。 #### 将其实现到 Vue3 组件中 为了将上述逻辑集成到 Vue3 应用中，可以在组件的 `setup()` 函数或者组合式 API 中调用该方法，并将其结果绑定至模板数据。 ```vue <template> <div> <p>您的本地 IP 地址：</p> <ul> <li v-for="(ip, index) in localIps" :key="index">{{ ip }}</li> </ul> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const localIps = ref([]); function getLocalIPs(callback) { const ips = []; const peerConnection = new RTCPeerConnection({ iceServers: [] }); peerConnection.createDataChannel(''); peerConnection.onicecandidate = function(event) { if (event.candidate && event.candidate.candidate) { let candidate = event.candidate.candidate; let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4})+)/gi; let match = ipRegex.exec(candidate); while (match !== null) { ips.push(match[0]); match = ipRegex.exec(candidate); } } }; peerConnection.createOffer() .then((offer) => peerConnection.setLocalDescription(offer)) .catch((error) => console.error('Error creating offer:', error)); setTimeout(() => callback(ips), 1000); // Wait a bit to gather candidates } getLocalIPs((result) => { localIps.value = [...new Set(result)]; // Remove duplicates and set the result. }); return { localIps }; }, }; </script> ``` 以上代码展示了如何在 Vue3 中使用 WebRTC 来获取本地 IP 地址列表，并动态渲染到页面上。 需要注意的是，某些浏览器可能默认禁用了 WebRTC 泄露本地 IP 功能。在这种情况下，需调整设置或将选项 **Anonymize local IPs exposed by WebRTC** 设为 Disabled[^4]。 --- ### 注意事项 尽管 WebRTC 提供了一种有效的方式来获取本地 IP 地址，但也带来了隐私风险。因此，在实际应用中应谨慎处理此类敏感信息，并遵循相关法律法规保护用户隐私。 ---