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

一. setup

特性：

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

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

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

使用：

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

 
<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也可以作为标签的属性，即；这样写就不用写return来返回，模块中也能使用标签内的数据。

二、ref

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

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

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

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

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

 
<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，可以直接使用变量

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

四、computed计算属性

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

 
<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>