Vue(14)——组合式API①

setup

特点：执行实际比beforeCreate还要早，并且获取不到this

<script>
export default{
  setup(){
    console.log('setup函数');
    
  },
  beforeCreate(){
    console.log('beforeCreate函数');
      
  }
}
</script>

在setup函数中提供的数据和方法，想要在模版当中利用，必须在函数最后使用return。

<script>
export default{
  setup(){
    const a = 'okk';
    const loga = ()=>{
      console.log(a);
    }
    console.log('setup函数');
    return{
      a,
      loga
    }
  },
  beforeCreate(){
    console.log('beforeCreate函数');
  },
  
}
</script>

<template>
  <div>{{ a }}</div>
</template>

当然有更简便的方法，setup语法糖。在script标签里面加上setup即可。

<script setup>
const a = 'okk'
const loga =() =>{
  console.log(a);
  
}
</script>

reactive和ref

reactive

作用：接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤：

1. 从vue包中导入reactive函数
2. 在<script setip>中执行reactive函数并传入类型为对象的初始值，并使用变量接收返回值 

<script setup>
import { reactive } from 'vue';
const state = reactive({
  count:100
})
const add = ()=>{
  state.count++
}
</script>


<template>
  <div>
    <div>{{ state.count }}</div>
    <button @click="add">+</button>
  </div>
</template>

 reactive只能接受对象类型的数据，也有可以接受简单类型的数据的函数

ref

作用：接收简单类型或者对象类型的数据传入并返回一个响应式对象

核心步骤：

1. 从vue包导入ref函数
2. 在<script setup>中执行ref函数并传入初始值，使用变量接收ref函数的返回值

 注 : 在script中访问数据的时候需要通过.value，在template中不需要

<script setup>
import { ref } from 'vue';
const state = ref(0)
const add = ()=>{
  state.value++
}
</script>


<template>
  <div>
    <div>{{ state }}</div>
    <button @click="add">+</button>
  </div>
</template>

computed

核心步骤：

1. 导入computed函数
2. 执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

<script setup>
import { computed, ref } from 'vue';


const list = ref([1,2,3,4,5,6,7,8])
const com = computed(()=>{
  return list.value.filter(item=>item>2)
})
</script>


<template>
  <div>
    <div>原始数据:{{ list }}</div>
    <div>计算后:{{ com }}</div>
  </div>
</template>

 watch

作用：侦听一个或多个数据的变化，数据变化时执行回调函数

两个参数：immediate(立即执行),deep（深度侦听）

监视单个数据的变化：

watch(ref对象,(newValue,oldValue) =>{...})

监视多个数据的变化：

watch([对象1,对象2],(newArr,oldArr)=>{...})

<script setup>
import { watch, ref } from 'vue';

const count = ref(0)
const name = ref('张三')

const change =() =>{
  count.value++
}
const changename=() =>{
  name.value='李四'
}
// 监视单个数据
// watch(count,(newValue,oldValue)=>{
//   console.log(newValue,oldValue);
// })

//监视多个数据watch([对象1,对象2],(newArr,oldArr)=>{...})
watch([count,name],(newArr,oldArr)=>{
  console.log(newArr,oldArr);
  
} )
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="change">改数字</button>
    <div>{{ name }}</div>
    <button @click="changename">改名称</button>
  </div>
</template>

immediate

说明：在侦听器创建时立刻触发回调，响应式数据变化之后继续执行回调

watch([count,name],(newArr,oldArr)=>{

  console.log(newArr,oldArr);

},{

  immediate:true

}

)

deep 

默认watch进行的是浅层监视，可以监视简单类型，不能监视到复杂类型内部数据的变化。

deep是深度监视，能够监视到对象类型里面某个数据的变化

watch(userInfo,(newValue)=> {

  console.log(newValue);

},{

  deep:true

})

精确侦听对象的某个属性 

watch(

  () => userInfo.value.age,

  (newValue,oldValue) => console.log(newValue,oldValue)

)