Vue3组件详情

一、父组件向子组件传值 ref、props

// 父组件
<Son :showDialogVisible="showDialogVisible" />
<script>
import {defineComponent,ref} from 'Vue';
setup(){
  const showDialogVisible=ref(true);
  return {showDialogVisible}
}
</script>

<script>
// 子组件
import {defineComponent,ref} from 'Vue';
export default defineComponent({
  name:"",
  props:{showDialogVisible:Boolean},
  setup(props){
    return {props}
  }
})
</script>

二、子组件向父组件传值 emit

子组件中：
由于Vue数据传递时单向数据流，子组件没有权利修改父组件传递过来的数据，只能用emit通知父组件去修改。

<script>
 // 子组件
  setup(props,context){
    context.emit('setShow',false)
    return;
  }
  ...或者...
  setup(props,{emit}){
    emit('setShow',false)
    return;
  }
</script>

// 父组件
<Son :showDialogVisible="showDialogVisible"
 @setShow="setShowDialogVisible" />
<script>
import {defineComponent,ref} from 'Vue';
setup(){
  const showDialogVisible=ref(true);
  const setShowDialogVisible=(bool)=>{
    showDialogVisible=bool;
  }
  return {showDialogVisible,setShowDialogVisible}
}

三、子组件向父组件传值 v-model

如果子组件向父组件传的值正好是父组件向子组件传的值，可以直接在该属性上进行双向绑定。

// 子组件
// 直接修改从props中拿到的数据；
 context.emit('update:showDialogVisible',false)

</script>
// 父组件
<Son v-model：showDialogVisible="showDialogVisible"/>
<script>

四、setup语法糖

在vue2.0时期，组件里定义的各类变量，方法，计算属性等是分别放到data,methods,computed选项里。

setup是vue3.0后推出的语法糖，按需引入computed,watch,directive等，一个业务逻辑可以编写在一起，让代码更加简洁便于浏览。

1、基本用法

<script setup>
	console.log('Hello World');
</script>

只需在 < script > 里添加一个setup属性，编译时会把 < script setup> < / script >里的代码编译成一个setup函数。
普通的 < script > 只会在组件被首次引入的时候执行一次，< script setup> 里的代码会在每次组件实例被创建的时候执行。

2、data和methods

< script setup> 里声明的变量和函数，不需要return暴露出去，就可以直接在template使用。

<script setup>
  import {ref,reactive} from 'vue';
  const msg = "Hello World";//普通变量
  // 响应式变量
  let num = ref(11); //ref 声明基本变量类型
  const obj = reactive({//reactive 声明对象类型变量：Object，Array，Date
    key:"this is a object"
  })
  function getName(){}
</script>

3、计算属性 computed

<script setup>
  import {ref,computed} from 'vue';
  let num = ref(0); 
  const countPlus = computed(()=>{
    return num.value+1;
  })
</script>

4、监听器 watch、watchEffect

// watch
<script setup>
  import {ref,reactive,watch} from 'vue';
  // 监听ref
  let num = ref(0); 
  watch(num,(newval,oldval)={
    // ...
  })
  // 监听reactive
  const obj = reactive({
    key:"this is a object"
  })
  watch(obj.key,(newval,oldval)={
    // ...
  },{
    immediate:true,// 立即执行，默认false
    deep:true,//深度监听，默认false
  })
  
  const onChange = function () {
    num.value++;
    obj.key="this change"
  }
</script>

watchEffect :Vue3.0新增的监听属性的方法，与watch的区别在于，watchEffect不需要指定监听对象，回调函数里可直接获取到修改后的属性的值。

<script setup>
  import {ref,reactive,watchEffect} from 'vue';
  let num = ref(0); 
  const obj = reactive({
    key:"this is a object"
  })
  setTimeout( ()=> {
    num.value++;
    obj.key="this change"
  })
  watchEffect((newval,oldval)=>{
    console.log("修改后的count"，count.value);
    console.log("修改后的obj",obj.key);
  })
</script>

5、自定义指令 directive

以vNameDirective的形式来命名本地自定义指令，可以直接在模板中使用。

<template>
 <h1 v-my-directive>今天的日记</h1>
</template>
<script setup>
// 导入指令可重命名
// import {myDirective as vMyDirective} from './MyDirective.js'
// 自定义指令
const vMyDirective={
  beforeMount:(el)=>{
    // 元素上做一些操作
  }
}
</script>

6、import导入的内容可以直接使用

导入的模快内容，不需要通过method来暴露它；
导入外部组件，不需要通过components注册使用；

7、声明props和emit

// Child.vue
<template>
  <h1>信息:{{info}}</h1>
  <el-button @click="onChange">点击</el-button>
</template>
<script setup>
import {defineProps,defineEmits} from 'vue';
// 声明Props
const props =defineProps({
  info:{type:String,default:""}
})
// 声明Emits
const $emit = defineEmits(['changeInfo']);
const onChange=function(){
  $emit('changeInfo','child返回值')
}
</script>

// Parent.vue
<template>
  <Child :info="msg" @changeInfo="onAction"></Child>
</template>
<script setup>
import {ref} from 'vue';
import Child from './Child.vue'
const onAction=function(event){
  console.log(event);
}
</script>

8、父组件获得子组件的数据（等同于Vue2.0中的$ref）

父组件想要通过ref获取子组件的变量或函数，子组件须使用defineExpose暴露出去。

// Child.vue
<script setup>
 import {ref,define} from 'vue';
 const info = ref('I am child');
 const onChange = function(){console.log('')};
 defineExpose({info,onChange})
</script>

// Parent.vue
<template>
  <Child ref="childRef"></Child>
  <el-button @click="onAction">点击</el-button>
</template>
<script setup>
 import {ref} from 'vue';
 import Child from './Child.vue'
 const childRef = ref();
 const onAction = function(){
   console.log(childRef.value.info)
   console.log(childRef.value.onChange());
 };
</script>

9、provide和inject传值

无论组件层次结构有多深，父组件都可以通过provide选项来为其所有子组件提供数据。

// Parent.vue
<template>
  <Child></Child>
</template>
<script setup>
 import {ref,provide} from 'vue';
 import Child from './Child.vue'
const msg = ref('Hello,my son');
const onShow = function(){...};
provide('myprovide',{msg,onShow})
</script>

// Child.vue
<template>
  <el-button @click="getDate">点击获取父组件的值</el-button>
</template>
<script setup>
 import {inject} from 'vue';
 const provideState = inject('myProvide');
 const getDate = function(){
  console.log(provideState.msg);
  console.log(provideState.onShow());
 }
</script>

10、对await异步支持

< script setup>中可以使用顶层await,结果代码会被编译成async setup()。例子：

<script setup>
  const post = await fetch('/api/post/tabledata').then(res=>{
    
  })
</script>

11、nextTick

//方式一
<script setup>
import {nextTick} from 'vue';
nextTick(()=>{});// Dom已更新
</script>

//方式二
<script setup>
import {nextTick} from 'vue';
await nextTick();// nextTick是一个异步函数，返回一个Promise实例
</script>

12、全局属性 globalProperties

// main.js
import {createApp} from 'vue';
import App from './App.vue';
const app = createApp(App);
// 定义一个全局属性
app.config.globalProperties.global="全局属性"；
app.$mount("#app");

<script setup>
//组件内使用
import {getCurrentInstance} from 'vue';
const { proxy } = getCurrentInstance();//获取Vue实例
console.log(proxy.$global);//输出
</script>

13、与普通< script >标签一起使用

可以与普通< script>标签一起使用，但是以下一些情况不会使用到：
①无法在＜script setup＞声明的选项 ,例如inheritAttrs 或通过插件启用的自定义的选项；
②声明命名导出，< script setup ＞定义的组件果默认以文件各作为组件名．
③运行副作用或者创建只需要执行一次的对象

< script >
//普通< script >，在模块范围下执行（只执行一次）
 runSideEffectOnce();
// 声明额外的选项
export default {
 name :'ComponentName ',//组件重命名
 inberitAttrs:false ,
 customOptons:{}
}
</ script >

<script setup )
//在 setup ()作用域中执行（对每个实例皆如此）
<script)

14、v-memo新指令

该指令与 v - once 类似， v - once 是只渲染一次之后的更新不再渲染，而 v - memo 是根据条件来渲染。该指令接收一个固定长度的数组作为依赖值进行记忆对比，如果数组中的每个值都和上次渲染的时候相同，则该元素（含子元素）不刷新。
①应用于普通元素或组件

< template >
< div v-meno ="[valueA ,valueB]">…</ div >//普通元素
< component v-memo ="[valueA , valueB]"></ component >//组件
< /template >

< script setup )
 import component from ".../components/component.vne "
< /script >```

当组件重新渲染的时候，如果 valueA 与 valueB 都维持不变，那么对这个＜ div ＞以及它的所有子节点的更新都将被跳过。
②结合 v - for 使用
v - memo 仅供性能敏感场景的针对性优化，会用到的场景应该很少。渲染 v - for 长列表（长度大于1000）可能它是最有用的场景：

< template >
	< div v-for =" item in list " :key =" item.id " v-memo ="[ item.id == selected ]">
	< p > ID : {{item.id}}-selected : {{item.id == selected}}< /p >
	< / div>
</ template >

当 selected 发生变化时，只有 item . id === selected 的该项重新渲染，其余不刷新。

五、Vue3生命周期