vue

Vue2.x

父传子子调用父的方法子组件绑定方法@xx = “xx”，子组件内部用this.$emit(”xx”,arguments)
子组件有很多属性的话可以用this.$attr来集合表示props
子组件拿到所有父组件传过来的function的话直接用this.$listeners拿到
父组件给所有的子孙组件添加属性或者方法用provider/inject来写
子组件拿到一级父组件或者父组件拿到一级子组件的话可以用this.$children或者this.$parent 可以拿到component上面的属性或者方法，并不保障顺序，拿到的属性也不是响应式的
拿ref，对应的dom绑定ref 然后在首次渲染之后也就是mounted方法后可以用this.$ref.xx来用
用$root来拿到根组件，可以通过this.$root.$children[x]来拿到下面对应的子组件
子组件可以通过sync来修改父组件的值，比如绑定的:xxx.sync = “title”，那么在子组件中就可以通过this.$emit(”update:xx”,arguments)来改变title
eventBus 就是声明一个全局的Vue 把所有的通信数据，事件监听都存储在这个变量上。相当于在Vue的实例上去绑定这些，方法名要保证统一不然会被覆盖。Vue.prototype.$EventBus = new Vue()
Vue.observable可以去让一个对象可响应，然后可以直接用对象内部绑定到页面，实现可监听
递归生成组件，可以在组件内部循环生成自己，但是要定义name，并且需要有一个阈值。

<template>
  <div v-for="(item,index) in treeArr">
      子组件，当前层级值：  <br/>
      <!-- 递归调用自身, 后台判断是否不存在改值 -->
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // 必须定义name，组件内部才能递归调用
  name: 'tree',
  data(){
    return {}
  },
  // 接收外部传入的值
  props: {
     item: {
      type:Array,
      default: ()=>[]
    }
  }
}
</script>

函数式组件，templete 增加属性functional 函数式组件内部没有生命周期没有属于自己的状态，只有prop 跟react的function component一样的。可以用来当纯UI组件。
Vue.component() 可以全局注册组件
Vue.extend()可以生成一个片段，可以当作component进行注册，也可以实例化new来绑定到想要绑定的元素上
mixin可以用来声明重复的逻辑
Vue.nextTick()就是一个微任务，在当前渲染任务完毕之后，也就是当前DOM渲染完成之后可以用这个延时函数来拿到最新的ref进行操作
Vue.directive可以生成一个全局的自定义指令，绑定在元素上面可以实现自定义的指令效果。

Vue.directive("change-color",function(el,binding,vnode){
  el.style["color"]= binding.value;
})

Vue.complie html模板生成可以使用，配合render渲染对应的dom
Vue.config.errorHandler 监听vue报错
vue3中子组件的props不能用结构会失去props的响应式。需要用toRefs包裹再进行结构

单文件组件

优势

更少的样板内容，更简洁的代码
能够使用纯typescript声明props和抛出事件
更好的运行性能（其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理）
更好的IDE类型推断行性能
所有的声明变量以及响应式数据都可以直接在template中使用，包括$attr以及$solt 还有ref 可以直接使用而不是xxx.value的方法
defineProps defineEmits在单文件中使用，我们需要用这两个来声明props的类型以及需要用props的时候要用defineProps来声明并使用 defineEmits来声明emit并且可以声明ts类型并且来使用
父组件如果需要通过ref拿到子组件的属性方法之类的需要在子组件中使用defineExpose来声明需要被父组件使用的属性或者方法。
在script中如果需要使用attr或者solt可以使用useAttr或者useSolt两个辅助函数

vue3生命周期钩子

setup():开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount():组件挂载到节点之前执行的函数（部分首屏请求可以放在这边防止闪屏问题）
onMounted():组件挂载完成之后之执行的函数（可以在这边拿到组件或者dom的ref）
onBeforeUpdated():组件更新之前执行的函数
onUpdated() : 组件更新完成之后执行的函数
onBeforeUnmount() : 组件卸载完成后执行的函数（这边可以移除事件监听或者清除定时器）
onActivated() : 被包含在中的组件，会多两个生命周期的钩子函数。被激活时执行
onDeactivated() : 比如从A组件，切换到B组件，A组件消失时执行
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数