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
    }
);
相关推荐
weixin_437830941 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮1 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel2 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常2 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip2 小时前
JavaScript事件流
前端·javascript
小菜全2 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C2 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG2 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904272 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路3 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架