未捕获的类型错误：升级到 vue 3.x 时无法读取未定义的属性（读取“深”）答案

【问题标题】：Uncaught TypeError: Cannot read properties of undefined (reading 'deep') when upgrade to vue 3.x未捕获的类型错误：升级到 vue 3.x 时无法读取未定义的属性（读取“深”）
【发布时间】：2022-06-20 15:59:20
【问题描述】：

vue 升级到 3.x 后，控制台显示如下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'deep')
    at withDirectives (commons1.js:10679:17)
    at Proxy.render (eval at compileToFunction (commons1.js:40198:21), <anonymous>:36:7)
    at renderComponentRoot (commons1.js:7874:44)
    at ReactiveEffect.componentUpdateFn [as fn] (commons1.js:11968:57)
    at ReactiveEffect.run (commons1.js:5819:29)
    at setupRenderEffect (commons1.js:12094:9)
    at mountComponent (commons1.js:11877:9)
    at processComponent (commons1.js:11835:17)
    at patch (commons1.js:11436:21)
    at render (commons1.js:12579:13)

我不知道发生了什么，认为这可能是一个兼容问题。我不知道如何找到哪里出了问题。我无法从输出 js 中知道哪里出了问题（从这个错误中我不知道源代码哪里出了问题），代码如下所示：

/**
 * Adds directives to a VNode.
 */
function withDirectives(vnode, directives) {
    const internalInstance = currentRenderingInstance;
    if (internalInstance === null) {
        ( true) && warn(`withDirectives can only be used inside render functions.`);
        return vnode;
    }
    const instance = internalInstance.proxy;
    const bindings = vnode.dirs || (vnode.dirs = []);
    for (let i = 0; i < directives.length; i++) {
        let [dir, value, arg, modifiers = _vue_shared__WEBPACK_IMPORTED_MODULE_1__.EMPTY_OBJ] = directives[i];
        if ((0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.isFunction)(dir)) {
            dir = {
                mounted: dir,
                updated: dir
            };
        }
        // here throw the error message
        if (dir.deep) {
            traverse(value);
        }
        bindings.push({
            dir,
            instance,
            value,
            oldValue: void 0,
            arg,
            modifiers
        });
    }
    return vnode;
}

当遇到dir.deep 行时，抛出这个错误，我应该如何解决这个问题？我试图从谷歌搜索似乎没有人面临同样的问题。

【问题讨论】：

标签： javascript vuejs3

【解决方案1】：

我今天遇到了这个问题，我发现问题是因为我试图使用未注册的指令。

如果你在错误发生之前的调用中放置一个断点，在你的情况下 at Proxy.render (eval at compileToFunction (commons1.js:40198:21), <anonymous>:36:7) 你会发现像const _directive_focus = _resolveDirective("focus"); 这样的东西，然后你就知道你缺少什么指令了

【讨论】：

【解决方案2】：

对我来说这是 v-model 中的一个错字

<input type="text" class="form-control" v-moel="newUser.name">

在我将拼写错误v-moel 改成v-model 后，它得到了修复

【讨论】：

【解决方案3】：

对我来说，这是因为在从 Vue2 迁移到 Vue3 之后，在 <input/> 元素上使用了一个名为 v-focus 的指令。我不知道这是 Vue3 的重大变化还是我错过了什么，但有人解释了 here 如何重新实现它。

【讨论】：

【解决方案4】：

对我来说这是 v-on 中的一个错字

<CartItem 
v-for="item in cartItems" :key="item.id" :item="item" 
v-von:remove-item="removeFromCart($event)">
</CartItem>

在我将 v-von 的错字修复为 v-on 后，它得到了修复

【讨论】：