【VUE】2.vue知识点梳理

1.Vue 3中的proxy

在Vue 3中，getCurrentInstance()方法允许你访问组件的当前实例（相当于vue2中的this）。这主要用于高级用法和库的开发，并不推荐在一般的应用代码中使用。proxy是组件实例的代理，你可以通过它来访问组件的数据、方法等。

应用场景：

• 在高级插件或组件库中，需要访问组件内部的状态或方法。

2. 全局方法注册

在Vue 3中，你可以通过app.config.globalProperties来注册全局属性或方法，然后在组件内部通过this或getCurrentInstance().proxy来访问。

注册全局ECharts：

import { createApp } from 'vue'  
import echarts from 'echarts'  
  
const app = createApp({})  
app.config.globalProperties.$echarts = echarts  
  
// 在组件中使用  
export default {  
  mounted() {  
    this.$echarts.init(this.$refs.chart)  // proxy.$echarts.init(this.$refs.chart)
  }  
}

3. 全局组件注册

全局组件注册使得在任何组件模板中都可以直接使用这个组件，无需在每个文件中单独引入。

import { createApp } from 'vue'  
import DictTag from './components/DictTag.vue'  
  
const app = createApp({})  
app.component('DictTag', DictTag)

4. 父子组件双向数据通信

父子组件双向数据通信v-modul:prop；$emit('change:prop')

Vue 3推荐使用v-model进行父子组件间的双向通信，但注意v-model在Vue 3中已经被修改为一个自定义指令，可以接受参数来自定义prop和event。

自定义v-model：

<!-- 子组件 -->  
<template>  
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">  
</template>  
  
<script>  
export default {  
  props: ['modelValue']  
}  
</script>  
  
<!-- 父组件 -->  
<template>  
  <ChildComponent v-model:prop="parentData" />  
</template>

5. provide/inject通信

provide/inject是Vue中用于跨层级组件通信的API，主要用于祖先组件向其所有子孙后代组件传递数据。

响应式数据：

• provide-inject通信适用于后代组件关系，响应式数据应包装一层computed

// 祖先组件  
provide('data', computed(() => someData))  
  
// 后代组件  
const data = inject('data')

7. $nextTick

用于在DOM更新完成后执行某些操作，非常适合在数据变化后需要访问更新后的DOM的场景。

使用场景：

• 在数据更新后需要立即获取DOM元素的尺寸或位置。
• $nextTick解决组件异步执行dom更新问题，dom渲染完毕执行回调

8. 全局自定义指令

Vue允许你注册全局自定义指令，用于在元素上添加特殊的行为。

app.directive('focus',{
    // 第一次插入DOM时触发 vue2 bind
    mounted(el) {
        el.focus()
    },
    // DOM更新时触发 vue2 update
    updated(el) {
        el.focus()
    }
})
​
app.directive('focus',(el) => {
        // 函数简写，mounted和updated触发相同业务处理
        el.focus()
    }
})
​
app.directive('color',(el, binding) => {
        // binding 为指令绑定的参数值
        el.style.color = binding.value
    }
})