composition

返回的是一个ref 所以如果修改值的话需要用.value

const fullNameComputed = computed(()=>{
 return first.value+last.value
)

const fullnameComputedFuns = computed({
  set: function () {

  },
  get: function () {

  }
})

生命周期函数

导入的名称为on+生命周期名称它是调用所有的生命周期函数在内部传入回调函数但是没有created beforecreate 在setup里相当于这两个把这两个函数干的事可以直接写在setup里面

 onMounted(() => {
      reactiveClick()
    })

provide 和 inject

 const name = ref('why')
provide('name', name)
const nameNew = inject('name')

watch和watchEffect

watch

他是一个函数默认是深度监听 watch({监听的代码},{配置：immediate 是否进来就首次监听})

const nameWacth=ref('xsh')
watch(nameWacth,(oldValue,newValue)=>{
 
},{immediate:true})

支持监听的对象是一个函数 并且会执行这个函数 监听的类型就是函数返回的类型 如果想返回一个是普通对象 就需要{...obj}

watch(()=>nameWactch,(old,new)=>{
})

如果返回了是一个普通对象 就需要设置deep 要不他不会深度监听的
watch(()=>{...nameWatch},(old,new)=>{
},{deep:true})

监听多条数据
watch([nameNew,namesWatch],(old,new)=>{})

watchEffect

直接传入一个回调函数传入的函数会默认执行
在执行的过程中会自动收集所有依赖（响应式的数据）
只有收集的依赖发生变化会重新执行
如果想停止监听需要调用下watchEffect的返回值

const stopWacth=watchEffect(()=>{

})
 if(name===10){
   stopWatch()
 }

setup 语法糖

它是在单文件组件（SFC）中使用组合式API的编译时语法糖，当同时使用SFC与组合式API时推荐使用该语法糖官方文档写出的优点 1**. 更少的样板内容更简洁的代码** 2. 能够使用纯的ts声明props和抛出时间 3. 更好的运行性能（因为在这个标签下的内容和template在vue源码是放在同一作用域下面的 所以不用跨域引用了） 4. 更好的ide类型推断性能（ide就是编辑器）具体写法不同

里面的代码会被编译成组件setup（）函数内容 并且在组件每一次创建实例都会随着重新执行一遍
所有编写的顶层代码都是暴露给template 所以就不用return它们了
导入的组件也可以直接使用
如果使用props的话 需要使用defineProps（）默认导入的不需要自己手动导入
如果使用emit 需要使用defineEmit()
如果想吧属性暴露出去 需要使用defineExpose。在调用的时候可以用ref活着parent

const props=defineProos({
    name:{
         type:String,
         default:'默认值'
    }
})

const emit = defineEmit(['shouInfoEmit'])

emit('shouInfoEmit','111')

defineExpose({
  foo
})

CompositionAPI （2）