这是我参与「第四届青训营」笔记创作活动的第5天

VUE3难点回顾

props

它可以对每个props进行数据类型的校验，例如： <my-counter count="a":state="true"></my-counter> props:{count:Number,state:Boolean}中count值为String类型，state为布尔类型。

可直接为组件的props指定基础的校验类型，从而防止组件的使用者为其绑定错误的数据，类型包括：String,Number,Boolean,Array,Object,Date,Function,Symbol等。

可以通过数组的形式指定多个可能的类型：propA:[String,Number],

如果必须让组件的使用者为其传递属性的值，可通过以下代码来设置必填项：

export default {
 props {
  propA: {
   type: String,
   required: true
   },
  },
}

·计算属性必须定义在computed节点中

·计算属性必须是一个function函数

·计算属性必须有返回值

·计算属性必须当做普通属性使用

相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖发生变化时，才会重新进行运算，因此计算属性性能更好。 ##组件使用v-model

父传子：

1.父组件通过v-blind：属性绑定的形式，把数据传递给组件

2.子组件中，通过props接收父组件传递过来的数据

子传父：

1.在v-bind：指令之前添加v-model指令

2.在子组件中声明emits自定义事件，格式为updates：XXX

3.调用$emits()触发自定义事件，更新父组件的数据

计算属性和侦听器的应用场景不同：

计算属性侧重于监听多个值的变化，最终计算并返回一个新值

侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值

vue框架为组件内置了不同时刻的生命周期函数，会伴随着组件的运行而自动调用

·当组件在内容中被创建完毕之后，会自动调用create函数

·当组件被成功渲染到页面之后，会自动调用mounted函数