vue3 组合式API

<!-- 深度监听  deep 点击按钮控制台，才输出count变化了: 1, 老值: 0;否则控制台不输出 -->
<script setup>
    import { ref,watch } from 'vue'
    const state = ref({count:0})
    const setCount = () => {
       state.count.value++
     }

    watch(state, () => 
      {
       console.log(`count变化了: ${newValue}, 老值: ${oldValue}`)
      },
      {
       deep:true
      }
    )
</script>

<template>
    <div>
      <button @click="setCount">count is: {{ state.count }}</button>
    </div>
</template>

setup 语法糖 （API入口）

 <script setup>
  // 数据
  const message = 'this is ms'
    // 函数
    const logMessage = () =>{
      console.log(message);
    }
 
</script>

<template>
   <div>{{ message }}</div>
   <button @click="logMessage ">log</button>
</template>

ref和 reactive的用法

共同点： 用函数调用的方式生成响应式数据

不同点： reactive: 只支持对象类型的数据

ref: 可以支持简单类型和对象类型的数据， 在脚本区域修改ref产生的响应式对象数据，必须通过value属性，来获取。

<script setup>
// 用ref和reactive 共同点。用函数调用的方式生成响应式数据
// 1.导入函数
// import { reactive } from 'vue';
// // 只支持对象类型
// const state = reactive({
//   count:0

// })

// // 定义一个函数

// const setCount =()=>{
//   state.count++ 
// }

import { ref } from 'vue';

const state = ref(0)
const setCount =() =>{
  // 在脚本区域修改ref产生的响应式对象数据，必须通过value属性
  state.value++
}
</script>

 <template>
 <!-- <button @click="setCount">{{ state.count }}</button> -->
<button @click="setCount">{{ state }}</button>
 </template>

计算属性computed

<script setup>
// 原始响应式数据
import { ref } from 'vue';
// 导入computed
import {computed} from 'vue';
const list = ref([1,2,3,4,5,6,7,8])
// 执行函数 return 计算之后的值，变量接收

const computedList  = computed(() =>{
 
  // 计算属性中不应该有副作用（比如异步请求，修改dom）
  // 避免直接修改计算属性的值（计算属性应该是只读的）
  return list.value.filter(item => item > 2)
})

setTimeout(()=>{
    list.value.push(9,10)
},3000)
</script>

<template>
     <div>
       原始响应式数组 - {{ list }}
     </div>

     <div>
       计算属性数组 - {{ computedList }}
     </div>
</template>

watch基本使用

<script setup>

import { ref,watch } from 'vue'
const count = ref(0)
// 监听count的变化
// watchAPI,ref对象不需要加.value
watch(count, (newValue, oldValue) => {
  console.log(`new: ${newValue}, old: ${oldValue}`)
})
</script>  

<template>
  <h1>{{ count }}</h1>
  <button @click="count++">count is: {{ count }}</button>
</template>

监听多个数据源

<script setup>

import { ref,watch } from 'vue'

const count = ref(0)
const name = ref('zhangsan')
const changeCount = () => {
  count.value++
}
const changeName = () => {
  name.value = 'lisi'
}

// 监听多个数据源
watch(
  [count,name],
  ([newCount,newName],[oldCount,oldName])=>
  {
    console.log(`newCount: ${newCount}, oldCount: ${oldCount}`)
    console.log(`newName: ${newName}, oldName: ${oldName}`)
  }
)
</script>

<template>
  
    <div>
      <button @click="changeCount">count is: {{ count }}</button>
    </div>

    <div>
      <button @click="changeName">name is: {{ name }}</button>
    </div>
  
</template>

立即执行

<!-- 立即执行的watchAPI  immidiate -->
<!-- 默认浅层监听   -->
 <script setup>
    import { ref,watch } from 'vue'
    const count = ref(0)
    const setCount = () => {
       count.value++
    }

    watch(count, (newValue, oldValue) => 
      {
       console.log(`new: ${newValue}, old: ${oldValue}`)
      },
      {
       immediate:true
      }
    )
</script>

<template>
    <div>
      <button @click="setCount">count is: {{ count }}</button>
    </div>
</template> 

深度执行

<script setup>
    import { ref,watch } from 'vue'
    const state = ref({count:0})
    const setCount = () => {
       state.count.value++
     }

    watch(state, () => 
      {
       console.log(`count变化了: ${newValue}, 老值: ${oldValue}`)
      },
      {
       deep:true
      }
    )
</script>

<template>
    <div>
      <button @click="setCount">count is: {{ state.count }}</button>
    </div>
</template>

精确侦听

<!-- 精确侦听对象的某个属性 -->

<!-- 在不开启deep的情况下，监听age的变化，只有age变化时才会执行回调 -->

<script setup>
    import { ref,watch } from 'vue'
    const state = ref({
      name:'asdas',
      age:10
    })
    const changeName = () => {
       state.value.name = 'children'
     }
    const changeAge = () => {
       state.value.age = 20
    }
 
  //  精确侦听某个具体属性 侦听age
  watch(
    () => state.value.age,
    () => {
       console.log('age变化了')
    }
  ) 
</script>

<template>
   <div>
     <div>当前name == {{ state.name }}</div>
     <div>当前age == {{ state.age }}</div>
    <div>
      <button @click="changeName">修改name</button>
      <button @click="changeAge">修改age</button>
    </div>
   </div>
    
</template>

生命周期API

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('1.组件挂载完毕mounted执行了');
}) 
onMounted(() => {
  console.log('2.组件挂载完毕mounted执行了');
}) 
</script>

<template>

</template>

组合式API下的父传子（转到 父传子 内容）

基本思想：

1. 父组件中给子组件绑定属性

2. 子组件内部通过props 选项接收