Composition API ref reactive

Composition API

​ composition API也叫组合式API,它是vue3的新特性,当代码量太多的时候,使用vue2的方式编辑不利于维护,所有出现了它

​ setup()函数时vue3中,专门为组件提供的新属性,它为composition API新特性提供了统一的入口

通过setup引入使用组件(直接添加在标签上)

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
    <Home></Home>
  </div>
</template>

<script setup>//给script标签添加setup,引入的组件可以直接在template中使用
    //组件编译过程中的代码运行是在setup函数中，
	//所有es模块导出都认为暴露给上下文的值，并且包含在setup()返回对象中
  import HelloWorld from "./components/HelloWorld.vue"
  import Home from './components/home.vue'
</script>

setup函数接收的参数

<script>
export default {
    props:{
        msg:Number
    },
    setup(props,context){//它接收两个参数,props接收props属性,context接收上下文对象,包含一些属性attrs、slots、emit,这些属性在vue2中需要通过this才能调用
        //setup函数中的代码会自己运行,setup函数中没this
        console.log(props.msg)
        console.log(context.emit('biu',33))
    }
}
</script>

setup定义方法

<template>
  <div class="" @click="fn">
     主页
  </div>
</template>

<script>
export default {
    setup(props,context){
        const fn = ()=>{
            console.log('调用方法')
        }
        return {fn}//模板中使用变量和方法都需要调用,所以需要return出去,且必须是对象形式
    }
}
</script>

ref创建响应式数据

<template>
  <div>
     主页
     <p @click="add">{{count}}</p><!--模板中使用可以跳过value向下找-->
     <input type="text" v-model="count">
  </div>
</template>

<script>
    import {ref} from 'vue'//使用ref需要引入
    export default {
        setup(props,context){
            const num = 0//直接这样定义,数据不是响应式的
            //ref()会创建一个响应式对象,如果要访问它的值,通过.value
            const count = ref(0)
            const add = ()=>{
                count.value++
            }
            return {
                count,
                add
            }
        }
    }
</script>

reactive创建响应式数据

<template>
  <div>
     <p>姓: <input type="text" v-model="surname"></p>
     <p>名: <input type="text" v-model="firstName"></p>
     <p class="text">全名: <span>{{fullName}}</span></p>
  </div>
</template>

<script>
    import {
        computed, 
        reactive, 
        ref,
        toRefs
    } from 'vue'
    export default {
        setup(props,context){
            const user = reactive({
                surname:"",
                firstName:""
            })
            const fullName = computed(()=>{//定义响应式计算属性,它会根据依赖,自动计算返回响应式数据,这个数据是ref形式的
                return user.surname + user.firstName
            })
            console.log(toRefs(user))//toRefs会将一个响应式数据类型,转换成普通数据类型,并对它进行包装
            return {
                ...toRefs(user),//不能直接解构响应式数据对象,先通过toRefs转换后再解构,解构之后在模板中使用,就可以直接通过写user中的属性名访问,解构之后相当于每个属性都是一个ref
                fullName
            }
        }
    }
</script>

ref跟reactive都是创建响应式数据的

​ ref: 推荐创建基础数据类型使用

​ reactive: 推荐创建复杂数据类型使用