软件工程学科评估排名_搭建网站一般多少钱_seo外链工具软件_品牌营销策略四种类型

参考官方文档，本文基于官方文档，补充额外的问题验证与处理过程，对于文档中已有完整描述的在此文章中不再赘述

API

组合式API：不具备Vue3新增删除属性依旧触发响应性变化的特性
h()：仅用于替换createElement，不需要将参数扁平化处理
getCurrentInstance：组合式API支持该API获取原实例
ref：组合式API中可通过ref定义响应式变量并挂载，通过a.value的方式即可访问绑定元素

vue-router

// 3.6.0版本之后可通过useRouter和useRoute获取路由
import { useRouter, useRoute } from 'vue-router/composables'
const router = useRouter()
const route = useRoute()// 路由参数监听可触发
watch(() => route.query,(newPath, oldPath) => {console.log(newPath, oldPath)},{deep: true}
)

// 通过实例访问也可获取路由
import { getCurrentInstance, watch } from 'vue'
const router = getCurrentInstance().proxy.$router
const route = getCurrentInstance().proxy.$route// 路由参数监听无法触发
watch(() => route.query,(newPath, oldPath) => {console.log(newPath, oldPath)},{deep: true}
)

DOM原生变量

报错Failed to read a named property '__v_isRef' from 'Window': Blocked a frame with origin "http://127.0.0.1:9088" from accessing a cross-origin frame.

原因分析

原生 DOM 对象（如 Window、Document、HTMLElement 等）并不是 Vue 响应式系统的一部分。它们是浏览器提供的 API，Vue 无法对其进行代理或观察。因此，直接对这些对象的属性进行操作不会触发 Vue 的更新机制。
contentWindow 是一个 Window 对象。直接将 contentWindow 赋值给一个 ref 变量可能会导致一些问题，因为 Vue 的响应式系统并不支持对原生 DOM 对象的直接操作。
__v_isRef 是 Vue 内部用于标识一个变量是否是响应式引用的属性。当你尝试访问 contentWindow 的属性时，可能会触发安全错误 SecurityError，尤其是在跨域的情况下
我的项目中将iframe的contentWindow字段赋值给响应式变量BiWindow，通过该变量调用postMessage时报错

解决方法

BiWindow设置为非响应式变量

let BiWindow = null

使用reactive拆分window对象

let BiWindow = reactive(iframeObj.contentWindow)

beforeRouteEnter

参考链接博客

问题：在<script setup>中无法定义beforeRouteEnter函数

解决

使用defineExpose导出beforeRouteEnter中需通过vm调用的变量与函数
额外的<script>定义beforeRouteEnter并执行对应逻辑

<script setup>
defineExpose({loading,selectTenant,selectEnv
})
</script>
<script>beforeRouteEnter(to, form, next) {const tenantTemp = sessionStorage.getItem('newTenant')const envTemp = sessionStorage.getItem('newenv')if (!tenantTemp || !envTemp) { // 从登录页面或直接路由进入next(vm => {console.log(vm)vm.loading = false})} else {next(vm => {sessionStorage.removeItem('newTenant')sessionStorage.removeItem('newenv')vm.selectTenant(JSON.parse(tenantTemp))vm.selectEnv(JSON.parse(envTemp))})}}
</script>