TODO-TS+Vue

组件

组件-数据双向绑定

• 父组件

<v-input v-model:keyword="keyword"></v-input>

• 子组件

<input
  :value="keyword"
  @input="$emit('update:keyword',$event.target.value)"
/>
---
props: ["keyword"],

组件-v-model多个数据双向绑定

• 父组件

<username
  v-model:firstName="firstName"
  v-model:lastName="lastName"
></username>

• 子组件

<input
  :value="firstName"
  @input="$emit('update:firstName', $event.target.value)"
/>
<input
  :value="lastName"
  @input="$emit('update:lastName', $event.target.value)"
/>
---
props: ["firstName", "lastName"]

组件-slot

• 父组件

<v-button>确认</v-button>
<v-button></v-button>

• 子组件

<button><slot>default</slot></button>

组件-自定义attribute继承

• attribute继承-子组件的根标签默认继承组件引用的class,id,style属性
• 取消默认继承 inheritAttrs: false
• 自定义标签继承 <input type="text" v-bind="$attrs" />

生命周期-keep-alive

• vue 生命周期函数-页面加载和改变过程中触发的方法
• keep-alive-组件切换过程保存被销毁的组件，避免重复渲染，结合生命周期actived/deactived使用；
• $nextTice-在视图加载或改变完成后执行的方法，可以在改变数据后实时的用DOM获取改变的相应数据；

Vue-网络请求

• axios-网络请求插件;
• fetch-jsonp-jsonp网络请求插件;
• 公共方法全局引用-例 app.config.globalProperties.Axios=Axios，使用 this.Axios;
• fetch-jsonp使用-参数jsonpCallback: 'cb';
• 防抖-200ms定时请求，200ms内再次请求会清除定时器，重新设置200ms定时器请求方法；案例-百度下拉搜索；

Vue-mixins

• mixins-公共业务逻辑融合，例mixins: [baseMixin];
• mixins作用-公共逻辑抽离，实现功能的复用，公用属性和公用方法，类似组件的继承;
• mixins就近原则-重复属性，公共的和组件形同的属性会使用组件的属性;
• 全局配置Mixins-main.js中-app.mixin(xxx);

Vue-teleport

• teleport-自定义节点挂载到指定节点;
• 弹窗组件-Modal;
• 触发关闭事件-父组件 @close-modal="isVisible=false"，子组件$emit('close-modal');
• 弹窗组件节点挂载到body-<teleport to="body">;

Vue3.0-CompositionAPI

• CompositionAPI作用-代码共享和重用代码;
• 要求-写在 setup 方法中, 通过vue引入;
• API-ref, reactive, watchEffect, watch, computed, toRefs, 生命周期函数 hooks;
• ref, reactive-定义双向绑定数据，ref 定义非对象数据，reactive 定义对象;
• toRefs-解构响应式对象数据; 使用...toRefs()而不是...原因-使用...数据是非双向绑定的;
• computed-计算属性;
• readonly-'深层'的只读代理，响应对象转原始对象;
• watch, watchEffect-监听数据变化;
• watch和watchEffect区别
  • watch不可以监听对象的值, watchEffect可以;
  • watch 会监听到非对象前后变化的值, watchEffect不会
  • watch 监听到才执行, watchEffect 加载时会执行一次;