组合式API-reactive和ref函数，computed计算属性，watch函数

一.reactive（）接收一个对象类型的数据，返回一个响应式的对象：

<script setup>
import {reactive} from 'vue'
const state = reactive({
  count:100
})
const setCount =() => {
  state.count++
}
</script>
<template>
  <div>
    <div>{{ state.count }}</div>
    <button @click="setCount">+1</button>
  </div>
</template>

 二.ref()接收简单类型或者对象类型的数据传入并返回一个响应式对象

推荐声明数据，统一用ref

注意：脚本中访问数据，需要通过.value

          在template中，.value不需要加（自动扒掉了一层）

<script setup>
import {ref} from 'vue'
const count = ref (0)
const setCount = () => {
  count.value ++
}
</script>
<template>
  <div>{{ count }}</div>
  <button @click="setCount">+1</button>
</template>

三.computed计算属性

const 计算属性 = computed (() => {
   return 计算返回的结果

}

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

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

增加一个修改函数

<script setup>
import {computed,ref} from 'vue'
const list = ref([
  1,2,3,4,5,6,7,8
])
const computedList = computed(() => {
  return list.value.filter(item => item > 2)
})

const addFn = () =>{
list.value.push(666)
}
</script>

<template>
  <div>
    <div>原始数据:{{ list }}</div>
    <div>计算后数据:{{ computedList }}</div>
  </div>
  <button @click="addFn">修改添加</button>
</template>

注意：计算属性不应该有“副作用”，比如异步请求/修改dom

           避免直接修改计算属性的值，计算属性应该是只读的，特殊情况可以配置get  set 

四.watch函数

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

俩个额外参数：1.immediate(立即执行） 2.deep(深度侦听）

1，侦听单个数据

• 导入watch函数
• 执行watch函数传入要侦听的响应式数据（ref对象）和回调函数

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

<script setup>
import {ref,watch} from 'vue'
const count = ref(0)
const nickname = ref('张三')
const changeCount = () =>{
  count.value++
}
const changeNickname = () =>{
  nickname.value = '李四'
}
//1.监视单个数据变化
// watch(ref对象,(newValue,oldValue) => {...})
watch(count,(newValue,oldValue) => {
  console.log(newValue,oldValue)
})

<template>
  <div>{{ count }}</div>
  <button @lick="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeNickname">改昵称</button>
</template>

2，侦听多个数据

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

<script setup>
import {ref,watch} from 'vue'
const count = ref(0)
const nickname = ref('张三')
const changeCount = () =>{
  count.value++
}
const changeNickname = () =>{
  nickname.value = '李四'
}
</script>
<template>
  <div>{{ count }}</div>
  <button @lick="changeCount">改数字</button>
  <div>{{ nickname }}</div>
  <button @click="changeNickname">改昵称</button>
</template>

3.配置额外的项

原本的监听只在修改内容时触发一次，如果希望一进页面就触发一次，在第三个参数位置放上一个对象，对象里放上immediate:true

<script setup>
const countt = ref(0)
const setcountt = () =>{
  countt++
}
watch(countt,(newValue,oldValue) =>{
  console.log('countt发生了变化')
},{
  immediate:true,
  // deep:true
})
</script>
<template>
  <button @click="setcountt">修改countt的值</button>
</template>

 

4.深度监视

 deep进行深度监视，而watch默认进行的是浅层监视

const ref1 = ref(简单类型） 可以直接监视

const ref2 = ref(复杂类型） 监视不到复杂类型内部数据变化

 

<script setup>
const userInfo = ref({
  name:'zs',
  age:18
})
const setusreInfo = () => {
  userInfo.value.age++   //地址改变的是对象里的属性，整个对象地址是没有改变的
}
watch(userInfo,(newValue) =>{    //仅仅如此检测到的数据是没有变化的，因为传入的是userInfo对象，而该对象地址并没有改变，改变的是对象里的属性，也就是要进行深层监视，所以在下面再添加一个对象写上deep属性
  console.log(newValue)
},{
  deep:true
})

</script>

<template>
  <button>修改userInfo</button>
</template>

5.对于对象中的属性进行监视

watch(() =>userInfo.value.age,(newValue,oldValue) => {
  console.log(newValue,oldValue)
})