26 - 实现简易版v-model指令

[T0205]

`<script setup lang='ts'>
import { ref, watchEffect } from "vue"
/**

• Implement a custom directive
• Create a two-way binding on a form input element
  */
  interface DirectiveBinding {
  value: string
  }

interface DirectiveEl extends HTMLInputElement {
value: string
vueInputListener: any
}

const VOhModel = {
mounted(el: DirectiveEl, binding: DirectiveBinding) {
el.value = binding.value;
console.log('执行mounted')
const handleInput = (e: Event) => {
value.value = (e.target as DirectiveEl).value
};
el.addEventListener('input', handleInput, false);
// 存储监听器引用以便稍后可以移除
el.vueInputListener = handleInput;
},
updated(el: DirectiveEl, binding: DirectiveBinding) {
console.log('执行updated')
el.value = binding.value;
},
unmounted(el: DirectiveEl) {
if (el.vueInputListener) {
el.removeEventListener('input', el.vueInputListener, false);
}
}
};

const value = ref("Hello Vue.js")
const setValue = () => {
value.value = 'tang'
}

</script>

{{ value }}

改变

`