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)

)