⭐ 自定义实现 v-model ```js // directive/myModel.js import Vue from "vue"; // Vue.directive('my-model', { // bind(el, binding, vnode, oldVNode) { // console.log("🚀 ~ inserted ~ el:", el); // el.value = binding.value; // console.log("🚀 ~ inserted ~ binding.value:", binding.value); // el.addEventListener("input", function (event) { // vnode.context.$set(vnode.context.$data, binding.expression, event.target.value); // }); // } // }); // 👉 函数简写形式 // Vue.directive('my-model', function (el, binding, vnode, oldVNode) { // console.log("🚀 ~ inserted ~ el:", el); // el.value = binding.value; // console.log("🚀 ~ inserted ~ binding.value:", binding.value); // el.addEventListener("input", function (event) { // vnode.context.$set(vnode.context.$data, binding.expression, event.target.value); // }); // }); // 指令与元素解绑时，释放注册事件（组件卸载时注销注册事件，避免内存溢出） let intervalId = null; Vue.directive('my-model', { bind(el, binding, vnode, oldVNode) { const updateVMDataProps = function (event) { vnode.context.$set(vnode.context.$data, binding.expression, event.target.value); intervalId && clearInterval(intervalId); intervalId = null; intervalId = setInterval(() => { // 检验元素卸载后指令中注册的事件是否被注销 console.log("🚀 ~ updateVMDataProps ~ vnode.context:", vnode.context); }, 2000); }; el.value = binding.value; el.addEventListener("input", updateVMDataProps); el._updateVMDataProps = updateVMDataProps; }, unbind(el, binding, vnode, oldVNode) { console.log("🚀 ~ unbind ~ el:", el); if (el._updateVMDataProps) { try { el.removeEventListener("input", el._updateVMDataProps); clearInterval(intervalId); } catch (error) { console.log("🚀 ~ unbind ~ error:", error); } delete el._updateVMDataProps; } } }); ``` 🚗 使用 1.注册自定义指令 ```js // main.js import App from "./App.vue"; import Vue from "vue"; import "./diyDirective/myModel"; new Vue({ el: "#app", render: h => h(App) }); ``` 2.使用自定义的 v-model 指令 ```js // App.vue ``` 效果👇

自定义实现指令

useGieGie在#学习打卡# 整理 vue2 知识点/v下的评论详情