vue3 组件生命周期,watch和computed

背景:

Uncaught (in promise) ReferenceError: Cannot access 'state' before initialization

翻译成中文:

Uncathed(in promise)引用错误:初始化前无法访问"state"

错误原因:

在watch里面想要修改组件生命周期中创建的reactive({})创建的动态数据

错误代码如下:

<script setup>

import { reactive, ref, watch } from "vue";

import { useRoute, useRouter } from "vue-router";

const ruleForm = ref();

const router = useRouter();

const props = defineProps({

isAdd: {

type: String,

default: "add",

},

});

const emits = defineEmits(["clickBack"]);

const getBack = () => {

emits("clickBack", "add");

};

//生命周期的触发时机。watch在onMounted之前

watch(

() => props.isAdd,

(newValue, oldValue) => {

console.log('ajiang>>>', newValue);

if (newValue === "edit") {

state.homeType = "edit";

} else {

state.homeType = "add";

}

},

{

immediate: true,

deep: true

}

);

const state = reactive({

loading: false,

homeTitle: "航次测算",

homeBack: "返回上级",

homeType: "add", //edit

});

</script>

修改思路:

修改代码如下:

javascript 复制代码
const props = defineProps({
    isAdd: {
        type: String,
        default: "add",
    },
});
const isAdd = computed(() => {
    return props.isAdd
})
watch(
    () => isAdd,
    (newValue, oldValue) => {
        console.log('ajiang>>>', newValue);
        if (newValue === "edit") {
            state.homeType = "edit";
        } else {
            state.homeType = "add";
        }
    },
    {
        immediate: true,
        deep: true
    }
);
相关推荐
史上最菜开发8 分钟前
a-input输入框,苹果电脑(MAC)输入法的输入Bug
vue.js·macos·bug
怕冷的火焰(~杰)10 分钟前
yarn安装electron和better-sqlite3失败问题(rebuild:better-sqlite3)
前端·javascript·electron
IT_陈寒38 分钟前
JavaScript性能优化:7个90%开发者不知道的V8引擎黑科技
前端·人工智能·后端
摸鱼的春哥38 分钟前
“全栈模式”必然导致“质量雪崩”!和个人水平关系不大
前端·javascript·后端
Eme丶1 小时前
Nginx部署vue以及转发配置记录
前端·vue.js·nginx
大气层煮月亮1 小时前
Oracle EBS ERP之报表开发—嵌入Web中的报表预览、报表打印
前端·数据库·oracle
excel1 小时前
Vue 中 v-show 与 v-if 的全面解析
前端
回忆哆啦没有A梦4 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__5 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生5 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js