vue3.0-setup、ref、reactive、computed

1、setup

Vue3.0中一个新的配置向，值为一个函数

组件中所有用到的:数据、方法等等，均要配置在setup中

<template>
<div>
<h1>{{msg}}---{{title}}</h1>
</div>
</template>
<script>
export default{
setup(){
let msg="hello"
let title="hello world"
return {msg,title} 
}
}
</script>

setup语法糖：

<script setup>
    const name="李华"
</script>
<template>
    <div>
        <div>{{name}}</div>
    </div>
</template>

2、ref函数

定义一个响应式的数据

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

js中操作数据：xxx.value，模板中读取数据不需要.value,直接<div>{{xxx}}</div>

<script setup>
    import {ref} from "vue"

    let city=ref("西藏")
    let url=ref("https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/53f73933-683c-4ab3-a963-bdabeddba23d.jpg@!550")
    let cityfn=()=>{
        city.value="新疆"
        url.value="https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/33423a80-ac8d-45a9-993f-1bee7adba6e4.jpg@!550"
    }


    let arr=ref(["朝辞白帝彩云间","千里江陵一日还","两岸猿声啼不住","轻舟已过万重山"])
    let arrfn=()=>{
        arr.value[0]="孤舟蓑笠翁"
        // arr.value[2]=arr.value[0]
    }
</script>
<template>
    <div class="box">
        <div class="box2">
            <h3>{{city}}</h3>
            <img :src="url" alt="">
            <button @click="cityfn" class="btn1">切换</button>
        </div>

        <div class="box3">
            <h4>早发白帝城</h4>
            <div v-for="(el,index) in arr">
                {{el}}
            </div>
            <button @click="arrfn" :style="{marginTop:'10px'}">换句</button>
        </div>
    </div>
</template>

3、reactive

定义一个对象类型的响应式数据(基本数据类型别用它，用ref函数)

const 代理一个对象 = reactive(被代理的对象) 接收一个对象（或数组），返回一个代理器对象（proxy对象）

内部基于ES6的Proxy实现，通过代理对象内部的数据都是响应式的

<script setup>
    import {
        reactive
    } from "vue"

    const obj = reactive({
        name: "张三",
        zhiye: "白日梦想家",
        age: 19
    })
    let fn1 = () => {
        obj.zhiye = "造梦者"
        obj.success = "梦到自己中了500万"
    }



    const obj2 = reactive({
        touxiang: "https://cdn-hz.skypixel.com/uploads/cn_files/account/avatar_image/752f55c4-9249-424b-8704-46047e2e5f15.jpg@!64x64",
        name: "异域行者",
        guojia: "中国",
        title: "story作者",
        jieshao: "一名来自西藏的航拍爱好者"
    })
    let fn2 = () => {
            obj2.touxiang= "https://cdn-hz.skypixel.com/uploads/cn_files/account/avatar_image/78361405-4686-4534-8947-fd1178de3ea0.jpg@!64x64"
            obj2.name= "RoboTou"
            obj2.title= "签约摄影师"
            obj2.jieshao= "不负时光，发现在路上的自由"
    }
</script>

<template>
    <div class="box">
        <div class="box2">
            <p :style="{fontSize:'20px',height:'100px',lineHeight:'50px'}">
                {{obj.name}}----{{obj.zhiye}}----{{obj.age}}
                <div>
                    {{obj.success}}
                </div>
            </p>
            <button @click="fn1">变身</button>
        </div>

        <div class="box3" :style="{marginTop:'20px'}">
            <div>
                <img :src="obj2.touxiang">
            </div>
            <div>姓名：{{obj2.name}}</div>
            <div>国家：{{obj2.guojia}}</div>
            <div>标签：{{obj2.title}}</div>
            <div>自我介绍：{{obj2.jieshao}}</div>
            <button @click="fn2" :style="{marginTop:'10px'}">修改信息</button>
        </div>
    </div>
</template>

4、computed

与vue2.x中的compute功能一致

<template>
    <div class="box">
        <h2>加法计算</h2>
        <input type="number" v-model="num1">+
        <input type="number" v-model="num2">=
        <input type="number" v-model="he">
    </div>
</template>
<script setup>
    import {
        ref,
        reactive,
        computed
    } from "vue"
    
    // 加法计算
    let num1 = ref("")
    let num2 = ref("")
    let he = computed(() => {
        return Number(num1.value) + Number(num2.value)
    })
</script>