vue3思维导图

• 应用Vue.createApp
  • 完整 api 参考应用 API
  • Data
    • 函数，创建新组件时调用，返回对象
    • 实例property仅在首次创建时添加
    • 有必要使用null、undefined占位
  • props
    • 从父组件接收数组或对象
  • computed
    • 计算属性，所有复杂计算应使用，数据变更响应渲染
    • <span>{{hasMessage}}</span>，方法则是{{hasMessage()}}
    • 结果一致，但computed基于响应依赖关系缓存，methods每次都会渲染
  • watch
    • 侦听器，开销大，异步使用
  • :class :style增强
    • 数组:class=[att1 att2]
    • 对象，按值结果:class={active: isActive, error: hasError}
    • 混合 :class=[{active: isActive}, att1]
    • 继承父节点:class="$attrs.class"
• 指令
  • v-开头的特殊属性
  • 属性预期值是单个 js 表达式(v-for、v-on除外)
  • 条件渲染
    • v-if v-else v-else-if
      • v-if比v-for优先级高
    • v-show，控制display属性
  • 列表渲染
    • v-for
      • v-for:"i in [1,2,3]"
      • v-for:"(item, index) in ['a', 'b', 'c']"
      • v-for:"(value, name, index) in {'v1':'n1'}"
      • 整数v-for:"n in 10"
      • 通过:key=来给元素定位
      • 组件<cmp v-for="item in items" :item="item"/>，必须绑定属性才会传递给引用组件内
  • v-on @ 事件处理
    • 事件@click="counter+=1"
    • 多事件 @click="one($event), two($event)"
    • 修饰符@click.stop="doThis" @click.stop.prevent
      • stop prevent capture self once passive
  • v-model表单输入绑定
    • 语法糖，针对不同表单，监听不同事件
  • v-once渲染一次
• 三种语法
  • 完整 v-on:click="method"
  • 缩写@click="method"
  • 动态参数@[event]="method"
• 缩写
  • v-bind =:
  • v-on = @
  • v-slot=#
• 大小写不敏感
  • camelCase
  • kebab-case
  • 字符串模板不适用
• 组件
  • 带name的可复用实例
  • props传递数据
    • props:['p1', 'p2']
    • props:{'title':String}
    • 数据单向向下流动
    • 验证
      • 类型String [String, Number]
      • p:{required: true} p:{default: 100} p:{validator(v) {}}
    • 非props 属性访问
      • class style id等 attr 可通过$attrs继承访问
      • 通过inheritAttrs: false禁止继承
  • 自定义事件@click="$emit('enlargeText')" @click="enlargeText"
  • 占位 <slot></slot>
    • 默认name="default"，不包含内容时使用slot包裹的内容
    • 通过插槽属性传递数据
    • 定义<slot :item="item"></slot>
    • 访问<template v-slot="slotName"> {{slotName.item}}</template>
    • 解构访问<template v-slot="{item}">...</template>
  • provide/inject
    • 提供深层数据传递，默认不是响应式
    • provide:{data:111} inject:['data']
    • provide() { return {}}
    • 响应式provide() { return {length: Vue.computed(()=>this.data.length)}}
  • 动态组件
    • is 属性实现
    • keep-alive失活组件缓存
    • 异步组件defineAsyncComponent(()=> new Promise((resolve, reject)=> {}))
  • 模板引用ref
    • <input ref="input"/>
    • this.$refs.input.focus()
  • 组件组合
    • setup(props,context)在组件创建之前执行
      • ref(val)值封装为引用 const counter = ref(0)
      • toRefs(props)跟踪props中变化
      • 生命周期onMounted
      • 侦听器watch

•  vue3
•  前端
•  思维导图