【Vue】v-model进阶+ref+nextTick

【v-model进阶】

可以实现双向数据绑定： 数据变了，视图跟着变，  视图变了，数据跟着变

原理： v-model只是个语法糖，作用在原生输入框input上，本质是给input传了一个value属性， 并监听input事件， 拿到了输入框的值， 数据一变， 就去影响了视图的更新

下面这两个本质上可以划等号

【v-model用在组件上】

v-model除了用在表单元素上, 还可以用在组件上, 实现数据的双向绑定

【简化代码】

子组件接收数据的方式还是太复杂了， 可以使用 defineModel() 进行简化上述代码

用defineModel() 接收父传子的v-model数据， defineModel() 返回一个ref响应式数据， 该数据的初始值与父传子的v-model数据相同

并且， 该数据可读可写， 子组件可直接修改， 修改后的数据会直接同步到父组件数据中

【ref】

这里指的是作用在标签上的ref属性， 而不是之前了解到的ref函数

ref 可以用于 获取原生DOM元素 或 组件实例， 进而调用组件提供的方法

上图中， 通过ref拿到了DOM元素， 就可以根据DOM元素进行二次样式的修改

【调用组件方法】

【nextTick】

vue3提供的一个方法

当代码中响应式数据变了， 想获取到更新后的DOM如果用之前的方法是拿不到的， 这是因为DOM的更新是异步的， 因此需要nextTick方法， 把代码写在这个方法的回调中

该代码可以实现需求： 点击编辑，显示编辑框 ，随后让编辑框立刻获取焦点