【Vue3】组合式API—ref，reactive

1.初识setup

1.setup两种返回值

1.setup需要一个返回对象，且对象内所有数据都可以在模板中使用

<script>
export default {
  name: 'App',
  setup(){
    // 直接定义数据，方法，函数等
    let name = '山鱼';
    let age = 18;
    function sayHello(){
      alert(`你好我叫${name},我今年${age}岁`)
    }
    // 必须得返回出去才能在页面接收到
    return {
      name,
      age,
      sayHello
    }
  }
}
</script>

这里vue3把数据分成了两种，一种是setup，另一种是setup(other)

2.返回渲染函数

①先引入从vue中的h

import { h } from "vue";

②使用h渲染函数

③会覆盖掉页面所有的内容只显示渲染函数的内容

vue3依旧支持vue2的写法和使用

注：

1.尽量不要与Vue2中配置混用Vue2.x配置 (data、methos、computed…) 中可以访问到setup中的属性、方法但在setup中不能访问到Vue2.x配置 (data、methos、computed…)。如果有重名冲突,setup优先
2.setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。

ref函数

我们在之前在setup里面所定义的数据并不是响应式的数据，我们可以验证一下。

<template>
  <h1>使用setup</h1>
  <div>name:{{ name }}</div>
  <div>age :{{ age }}</div>
  <button @click="updateInfo"></button>
</template>

<script>
export default {
  name: "App",
  setup() {
    let name = "山鱼";
    let age = 18;
    function updateInfo() {
      name = "ls", age = 22;
    }
    return {
      name,
      age,
      updateInfo,
    };
  },
};
</script>

当我们点击按钮后页面并不会进行数据的变化，但是我们可以打印一下，数据已经发生了改变

使用ref

首先在vue中引入ref，然后在将ref函数应用到我们所定义的数据上，然后ref将我们的数据加工后再放到name，age里面，我们可以看下经过ref加工后的数据变成什么样的了呢。【ref将我们所写的数据变成了一个对象RefImpl】，这个RefImpl其实是一个引用实现的实例对象简称（引用对象）。我们要想修改name，age的值就得.value拿到值然后进行修改

but，在模板中就不需要.value，因为他会自动.value

那么如果要修改对象中的数据应该怎么改呢？

我们可以看到job这个对象.value之后是一个Proxy代理对象。所以直接job.value.type就可以直接改

1.作用: 定义一个响应式的数据
2.语法: const xxx = ref(initValue)

①创建一个包含响应式数据的引用对象 (reference对象，简称ref对象)
②JS中操作数据:xxx .value
③模板中读取数据:不需要.value，直接: <div>{{xxx}}</div>
3.注:
①接收的数据可以是: 基本类型、也可以是对象类型
象 (reference对象，简称ref对象)
②JS中操作数据:xxx .value
③模板中读取数据:不需要.value，直接: <div>{{xxx}}</div>
3.注:
①接收的数据可以是: 基本类型、也可以是对象类型
②基本类型的数据: 响应式依然是靠object.defineProperty()的get 与set 完成的

写在最后

博主简介🛌
某神秘组织成员
前端小白，前端优质创作者，阿里云博主，一个开朗的网友
有一个名为山鱼社区的社区，收录许多优秀博主的创作内容
创作不易希望能得到您的支持，您的支持是我创作的动力✌