vue3 一些非常非常好用的小东西（更新中。。。）

1. vue3 的 v-model 指定传入某个数据

例： 父组件是这样， myName 和 maAge 是父组件内要传入子组件的数据

<h-table v-model:name="myName"  v-model:age="myAge">
</table>

子组件在props中通过 name 、age 就可以接收到父组件传过来的 myName、myAge
并且通过 update:name 、update:age 就可把值传回到父组件的 myName、 myAge
例：

<script>
  setup(props, { emit }) {
    props:['name', 'age']
    const changeName = () => {
      emit('update:name', '张三')
      emit('update:age', 20)
    }
  }
</script> 

非常清爽！ 点赞

2. 组件传参使用 readonly

在vue和react框架有一条规范是单向数据流，所以我们在向下传参的时候，不希望下层组件更改数据，此时我们在传参时可以使用readonly，确保传输到子组件的数据不被更改！

3.自定义指令 directive

对比vue2来说。

vue2自定义指令声明周期有5个（不是很友好，增加学习成本）

bind
inserted
update
componentUpdated
unbind

vue3中，自定义指令生命周期基本依照了vue的生命周期(减少学习成本)

created
beforMonunt
mounted
beforUpdate
updated
beforUnmount
Unmounted

注册自定义指令vue2与vue3一致

此处 vm 为 vue实例。

vm.directive('自定义指令名'，{生命周期 例：
update: function(el,binding,vnode,oldVnode){}
})

这里需要注意的地方是 vm.directive('自定义指令名称'，‘第二个参数’)

‘第二个参数’ 需要注意

它可以是一个对象，对象中生命周期是以键值对的形式，根据需求在对应的生命周期进行代码书写。
也可以是一个函数，当它是一个函数时，会默认被挂载到两个生命周期上。
1.在vue2中，会默认挂在 bind 与 update 上
2.在vue3中，会默认挂在 mounted 与 update 上

4.filter 过滤器

在vue2中可以使用filter 在模板中使用管道符 | 来使用filter。
在vue3中被移除，推荐使用 计算属性来替代 ，也减少了学习成本。