Vue3理解(8)

表单输入绑定

1.在处理表单时我们通常要将表单输入框的内容同步给JavaScript中相应的变量。手动连接绑定和更改事件监听器很麻烦，Vue的v-model指令帮我们简化了这一步骤。

2.另外v-model可以适用不同类型的输出，会根据元素自动使用对应的DOM属性和事件组合

3.如果v-model表达式的初始值不匹配任何一个选择项，元素会渲染成一个‘未选择’的状态，在ios上这将导致用户无法选择第一项，因为ios在这种情况下不会触发change事件。

4.修饰符，.lazy默认情况下v-model会在每次input事件后更新数据你可以添加lazy修饰符在每次change事件后更新数据，.number将用户输入的值转为数字，.trim如果你想去除用户输入内容的两端空格可以使用trim修饰符。

Vue生命周期函数

1.vue的生命周期函数就是每个组件实例从创建初始化，编译模板，挂载DOM，数据更新时改变DOM，以及销毁的全过程。

组合式API生命周期钩子函数

onMounted() 注册一个回调函数在组件挂载完后执行,常用于执行需要访问组件所渲染的DOM树的相关的副作用，或者服务端渲染应用中用于确保DOM相关代码仅在客户端执行。

onUpdated() 注册一个回调函数在响应式状态变更而更新其DOM树之后调用，这个钩子会在DOM更新后被调用。

onUnmounted() 注册一个回调函数在最近实例被卸载之后调用，可以清除一些副作用如定时器，DOM事件监听器或者服务器连接

onBeforeMount() 注册一个钩子在组件被挂载之前调用，这个钩子被调用时组件已经完成所有响应,但是还没有创建DOM节点，它即首次执行DOM渲染过程。

onBeforeUpdate() 注册一个钩子在组件在子组件即将因为响应式状态变更而更新其DOM树之前调用，可在Vue更新DOM之前访问DOM状态。

onBeforeUnmount() 注册一个钩子在组件实例被卸载之前调用，在这个函数被调用时组件实例依然还保有全部功能。

onErrorCaptured() 注册一个钩子在捕获了后代组件传递错误时调用，错误捕获来源，组件渲染，事件处理器，生命周期钩子，setup()函数，侦听器，自定义指令钩子，过渡钩子，这个钩子函数带有三个实参，错误对象，触发该错误的组件实例，以及一个说明错误来源的信息字符串，你可以在errorCaptured()中更改组件为用户显示的一个错误，这个钩子可以通过返回false阻止错误继续向上传递。

onRenderTracked() 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用，这个钩子仅可以在开发模式下使用。

onRenderTriggered() 注册一个调试钩子函数，当响应式数据变更触发了组件渲染时调用，这个钩子仅可以在开发模式下使用。

onActivated() 注册一个回调函数，若组件实例时缓存树的一部分,当组件被插入DOM中被调用。

onDeactivated() 注册一个回调函数，若组件实例时缓存树的一部分,当组件从DOM中被移除时调用。

onServerPrefetch() 注册一个异步函数，在组件实例在服务器上被渲染之前调用，这个钩子返回一个promise，服务端渲染会在渲染该组件等待该Promise完成，这个钩子仅会在服务器渲染中执行，可以用于执行一些仅存在于服务器的数据抓取过程。

选项式API生命周期钩子函数

beforeCreate() 在组件实例初始化完成后立即调用

created() 在组件实例处理完所有状态相关的选项后调用

beforeMount() 在组件挂载之前调用，这个时候没有创建DOM节点，它即使首次执行DOM渲染过程。

mouted() 在组件被挂载之后调用，其自身的DOM树已经插入到父容器中此时可以获取和操作DOM元素

beforeUpdate() 在组件即将因为一个响应式状态而改变更新其DOM元素之前调用。

update() 在组件因为一个响应式状态变更而更新其DOM树之后调用。

beforeUnmount() 在组件实例被卸载之前调用。

unmounted() 在组件被卸载时调用，可以清理计时器，DOM监听事件，服务器连接等。

errorCaptured() 注册一个钩子在捕获了后代组件传递错误时调用，错误捕获来源，组件渲染，事件处理器，生命周期钩子，setup()函数，侦听器，自定义指令钩子，过渡钩子，这个钩子函数带有三个实参，错误对象，触发该错误的组件实例，以及一个说明错误来源的信息字符串，你可以在errorCaptured()中更改组件为用户显示的一个错误，这个钩子可以通过返回false阻止错误继续向上传递。

renderTracked() 注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用，这个钩子仅可以在开发模式下使用。

renderTriggered() 注册一个调试钩子函数，当响应式数据变更触发了组件渲染时调用，这个钩子仅可以在开发模式下使用。

activated() 注册一个回调函数，若组件实例时缓存树的一部分,当组件被插入DOM中被调用。

deactivated() 注册一个回调函数，若组件实例时缓存树的一部分,当组件从DOM中被移除时调用。

serverPrefetch() 注册一个异步函数，在组件实例在服务器上被渲染之前调用，这个钩子返回一个promise，服务端渲染会在渲染该组件等待该Promise完成，这个钩子仅会在服务器渲染中执行，可以用于执行一些仅存在于服务器的数据抓取过程。