★★组合API

• ★可选链

  • 语句结尾加上?

• Summary:

  const {emit,expose,attrs,slots} = context

  • setup的声明周期位于beforeCreate和 created之间

• 组合api中不要使用计算属性

• 响应式数据

  • 引入ref

  • 读取值的时候需要使用xxx.value

    import {ref} from 'vue'
    
    export default{
    	setup(){
    	xxx
    	xxx
    	return {xxx,xxx}
    	}
    }

• methods

  let xxx = ()=>{}
  let xxx = function(){}

• watch

  import {watch} from 'vue'
  watch(target,callback)

• watchEffect

  • 启用时自执行，通过watchEffect设置初始值
  • 后续只在使用了响应式数据时执行
  • 让监听在某些情况下失效

  import {watchEffect} from 'vue'
  const stop = watchEffect(()=>{})
  
  使用返回值时，使watch监听失效
  stop()

• props

  与setup同级,子组件父组件写法与optionsApi类似
  props:{}
  setup(props){
  	let component = ref(props.xxx)
  }

• emits

  父组件传递事件，子组件emits接收
  emits:['xxx']
  setup(props,context){
  	const {emit} = context
  
  	let func = ()=> emit('xxx',xxx)
  	return {func}
  }

• context

  • 通过对context解构，可以提取其中的属性

• ★ref

  1 组件获取：
  
  <template>
  	<yFunc ref="xxxxx"></yFunc>
  </template>
  
  <script>
  	export default{
  		setup(){
  			const xxxxx = ref()						将变量名设置成标签ref参数
  			const xxxFunc = (v)=>xxxxx.value?.num   这里的问号表示如果存在再返回
  		}
  	}
  </script>
  
  2 组件返回
  return {xxxFunc}
  
  通过ref获取到的组件，使用xxxxx.value.xxx可以获取在子组件中返回的属性

• expose限制暴露

  setup(){
  	const {emit,expose} = context
  	expose({xxx})										//只对外暴露的属性
  	return {xxx,xxx,xxx}
  }

• 引入生命周期组件

  import {onMounted} from 'vue'
  setup(){
  	onMounted(()=>{
  		...
  	})
  }

• slot

  使用slots接收所有default，在子组件中定义slot位置，在父组件中引入
  
  子组件
  const {slots} = context
  const defaults = slots.default()
  return {defaultSlot}
  
  <template>
  	<component :is="defaults[0]">
  	xxx
  	xxx
  	xxx
  	<component :is="defaults[1]">
  </template>
  
  
  父组件
  <yDIY>
  	<h1></h1>
  	<p></p>
  </yDIY>

• computed

  根据响应式数据发生动态变化，说白了是依赖响应式数据，响应式数据变了计算属性也跟着变化。
  以响应式数据为基础
  
  引入
  import {computed} from 'vue'
  声明
  let sum = ()=>num.value + 100;
  返回
  return {sum}

• provide&inject

  数据在父组件中修改
  在子组件中修改，传递方法进行修改(必须为响应式数据)
  provide('xxx',(newValue)=>{xxx.value = newValue})
  
  
  父组件引入provide,子组件引入inject
  import {provide} from 'vue'
  import {inject} from 'vue'
  
  使用
  provide('发送','发送的值')
  const user = inject('接收','如果接收为空时的默认值')
  
  返回(子组件)
  return {user}
  
  以上是发送静态数据，响应式数据需要用ref进行包裹,如下：
  	相应的，获取值的时候使用msg.value
  
  let msg = ref('xxx')
  provide('xxx',msg)

• reactive

  • 通过reactive调用的变量，不能改变其引用地址，即设置另一个引用对象
  • Vue只对数据进行检测，不对数据中的属性进行检测；需要进行二级相应,二级响应时需要加上value值
    • 方法1：
      • let obj =reactive({name:'young'})
      • let name = ref(obj.name)
    • 方法2：torefs()
      • let obj = reactive({name:'young'})
      • return

  ref对基本数据类型进行包装，需要用~.value获取其值
  reactive对引用类型进行包装，其调用时不需要通过~.value的形式，如：
  	let arr = reactive([])
  	arr.push('xxx')
  import {reactive} from 'vue'
  
  对数据进行展开

• return

---

setup语法糖

优点：不必将数据手动返回，接口文件不必挂载

• ★组件全局异步

  <suspense>
      <template #default>
        <div>
          //component
        </div>
      </template>
      <template #fallback>Loding...</template>
    </suspense>
  
    两个插槽
  
  - 在异步加载完毕后
  - 在加载过程中

• defineProps({})

• defineEmits([])

• ★vue样式继承

  • 子组件的样式会默认继承父组件，css属性查找比class和id要慢很多倍，性能上不好

  • 解决方法：

    • 设置class，id等属性，不使用vue默认提供的属性选择器查找，不使用scoped

    解决方法1：在子组件中，最外侧加上标签
    <section>
        <div>
        	<input type="text" :value="todo.title">
        <button>删除</button>
      </div>
    </section>
    
    解决方法2：对样式设置类，具体化样式