组合式API

vue2

<script>
export default {
  data(){
    return{
      count:0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>

vue3

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

setUp语法

原始写法

<script>
export default {
  setup() {
    const message = 'this is message'
    const logMessage = () => {
      console.log(message)
    }
    return {
      message,
      logMessage
    }
  },
}
</script>

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

语法糖写法

<!--setup-开关：允许在script书写组合式API-->
<script setup>
const message = 'this is message'
const logMessage = () => {
  console.log(message)
    
}
</script>

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

rective

<!--setup-开关：允许在script书写组合式API-->
<script setup>
import {reactive} from "vue";

//2.执行函数 传入一个对象类型的参数，变量接收
const state = reactive({
  count:0
})

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

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

<style scoped>
</style>

ref

<!--setup-开关：允许在script书写组合式API-->
<script setup>
import {ref} from 'vue'

//2.执行函数 传入一个参数[简单类型 + 对象类型]，变量接收
const count = ref(0)
console.log(count)
const setCount = ()=>{
  //脚本区域修改ref产生的响应式对象数据 必须通过.value属性
  count.value++
}
</script>

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

rective 和 ref

reactive和ref函数的共同作用是什么？
用函数调用的方式生成响应式数据
reactive vs ref ？
reactive不能处理简单类型的数据
ref参数类型支持更好但是必须通过.value访问修改
ref函数的内部实现依赖于reactive函数
在实际工作中推荐使用哪个？
推荐使用ref函数，更加灵活，小兔鲜项目主用ref