Vue3.0 —— setup、ref、reactive和 computed的简介及使用

一. setup

特性：

        1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的

　　2、setup函数是 Composition API（组合API）的入口

　　3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

使用：

        1.setup可以作为函数使用： 

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="change">change</button>
  </div>
</template>

<script>
  import {ref} from "vue"
  export default {
    data() {
      return {
       
      }
    },
    setup() {
      let msg = ref("hello")
      function change() {
        msg.value = "修改之后的值"
      }
      return {msg,change}
    }
  }

</script>

setup作为函数使用时需要注意：

            1.这个函数内部的变量/函数是局部的
            2.这个函数的返回值 可以被当前组件的任意地方使用
            3.这个函数内部不要使用this来操作组件数据
            4.setup返回的对象中的数据和data中的数据同名了 setup优先级更高
            5.setup在组件加载期间 只会运行一次

2.setup也可以作为<script></script>标签的属性，即<script setup></script>；这样写就不用写return来返回，模块中也能使用标签内的数据。

二、ref

        ref的作用：定义一个响应式的数据

        语法：let xxx = ref("value")

        注意：1.在js中操作数据时要使用.value，即xxx.value

                   2.模板中读取数据不需要.value,可以直接使用

                   3.接收的数据类型可以是基本数据类型也可以是引用数据类型

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="change">change</button>
  </div>
</template>

<script>
  import {ref} from "vue"
  export default {
    data() {
      return {
       
      }
    },
    setup() {
      let msg = ref("hello")
      function change() {
        msg.value = "修改之后的值"
      }
      return {msg,change}
    }
  }

</script>

三、reactive

        作用：定义一个对象类型的响应式数据(基本数据类型别用它，用ref函数)，主要用于嵌套层级比较复杂的数据

        语法：let代理一个对象 = reactive(被代理的对象) 接收一个对象（或数组），返回一个代理器对象（proxy对象），即 let xxx = reactive(value)

        注意：在js中操作数据时不需要使用.value，可以直接使用变量

<script setup>
    let arr2 = reactive([111,{name:"xiaozhang",like:["game","study"]}])
    let change6 = ()=> {
        arr2[1].like[0] = "read"
    }
</script>   

<template>
  <div>
    <p>{{arr2[1].like[0]}}</p>
    <button @click="change6">change6</button>
  </div>
</template> 

四、computed计算属性

        vue3.0中的computed计算属性与vue2中的用法一致。

<script setup>
    import {
        ref,
        reactive,
        computed
    } from 'vue'

    let msg = ref("订单")

    let arr = reactive([{
            title: "产品1",
            price: 16,
            count: 3
        },
        {
            title: "产品2",
            price: 13,
            count: 2
        },
        {
            title: "产品3",
            price: 19,
            count: 7
        },
        {
            title: "产品4",
            price: 12,
            count: 1
        },
        {
            title: "产品5",
            price: 16,
            count: 5
        }
    ])

    let total = computed(() => {
        return arr.reduce((n1, n2) => {
            return n1 + n2.price * n2.count
        }, 0)
    })

    let change = () => {
        arr[0].count = 10
    }

    let add = (index) => {
        arr[index].count++
    }

    let subtract = (index) => {
        if (arr[index].count > 0) {
            arr[index].count--
        } else {
            arr.splice(index, 1)
        }
    }
</script>

<template>
    <div>
        <div class="box">
            <p>{{msg}}</p>

            <div v-for="(el,index) in arr" :key="index">
                <div>{{el.title}} --- {{el.price}}元 ---
                    <button @click="subtract(index)">-</button>
                    {{el.count}}
                    <button @click="add(index)">+</button>
                </div>
            </div>
            <button>{{total}}元</button>
            <button @click="change">修改</button>

        </div>
    </div>
</template>

<style scoped>
    .box {
        width: 300px;
        height: 300px;
        background-color: gray;
    }
</style>