vue3.0 API

Ref 语法

• 作用：这是定义一个普通数据类型响应式数据
  • string,number,boolean,arr 等
  • 获取 ref 的值的时候，需要通过 .value 的方式去获取到的！
  • 修改 ref 定义的普通数据的时候，需要使用 XXX.value

<div>{{ count }}</div> // 显示count
<button @click="countAdd">count++</button>
<button @click="getUser">点击获取用户名</button> // 点击 获取当前的 count
// 数据的双向绑定
<input type="text" placeholder="请输入" v-model="count" />

// 引入
import { defineComponent, ref } from "vue";

  // 使用
  setup() {
    const count = ref(0);

    // count ++
    const countAdd = () => {
      count.value = count.value + 1;
    };

      // 获取用户名
    const getUser = () => {
      console.log("day", count.value);
      alert(count.value);
    };
    // 类似 vue2之中的 data的定义数据
    return {
      count,
      countAdd,
      getUser
    };
  }

reactive 语法

• 作用：实现复杂数据的 响应式数据
  • 定义对象 obj
  • 修改 reactive 定义的对象的属性 obj.XXX

    <div>用户信息 -- {{ userInfo.username }} -- {{ userInfo.age }}</div>
    <button @click="getUser">点击获取用户名</button>
    <button @click="setUser">点击修改用户名</button>
    // 数据的双向绑定
    <input type="text" placeholder="请输入" v-model="userInfo.age" />

import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: "Reg",
  // 组合 api 里面的
  setup() {
    const userInfo = reactive({
      username: "pink",
      age: 20
    });

    // 获取用户名
    const getUser = () => {
      console.log("day", userInfo.age);
      alert(userInfo.age);
    };
    const setUser = () => {
      userInfo.age = 30;
    };

    // 类似 vue2之中的 data的定义数据 并且传递所操作的方法
    return {
      userInfo,
      getUser,
      setUser
    };
  }
});

toRefs 的作用

• toRefs 函数可以将 reactive()创建出来的响应式对象，对当前的响应式对象进行结构后，还是响应式数据，否则的话，直接使用...的时候，解构的并非响应式数据！

    <button @click="setAge">点击修改年龄</button>
    <div>
      我是age: {{ age }}
      <input type="text" placeholder="请输入" v-model="age" />
    </div>

  // 引入
  import { defineComponent, ref, reactive, toRefs } from "vue";
  // 组合 api 里面的
  setup() {
    const userInfo = reactive({
      username: "pink",
      age: 20
    });

    const setAge = () => {
      userInfo.age = 30;
    };

    // 类似 vue2之中的 data的定义数据 并且传递所操作的方法
    return {
      setAge,
      // 由于 reactive 定义的是响应式数据，直接使用 ...的时候 是转化为普通对象属性了，达不到响应式效果，
      // 因此需要使用 toRefs 把普通对象的属性 和 响应式对象的属性一一匹配 之后才实现响应式数据
      // ...userInfo
      ...toRefs(userInfo)
    };
  }

readonly 不常使用

• 作用：就是把响应式数据修改为普通数据，不具备响应式属性，只能起到只读效果

<template>
  <div>
    <div>
      <div>
        <div>原始对象</div>
        <div>
          <input type="text" placeholder="userName" v-model="obj.userName" />
        </div>
        <div>{{ obj.userName }}</div>
        <div>
          <div>readonly 修改响应式数据为只读效果</div>
          <input type="text" placeholder="userName" v-model="user.userName" />
        </div>
        <div>{{ user.userName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, readonly } from "vue";
export default defineComponent({
  name: "Reg",
  components: {},
  setup() {
    // 定义一个原始对象 不具有响应式属性
    let obj = {
      userName: "小渣亮",
      age: 30,
    };
    let user = reactive({
      userName: "lala",
    });
    // 把响应式数据 转化 为原始数据 不具有响应式
    user = readonly(user);
    return {
      obj,
      user,
    };
  },
});
</script>

toRef

• 作用：
  • 就是从响应式数据(对象)之中的某一个属性，单独拿出去使用，依旧需要转化为响应式数据
  • 当这单独拿出来的数据，发生改变的时候，都是具有响应式的，和那个响应式对象也是有关联的！
  • 注意点：一般来说，都是直接使用 toRefs 的方式 去转化为响应式数据的！

<template>
  <div>
    <div>
      我是响应式数据 的username --- {{ username }}
      <button @click="setUserName">修改userInfo 中的username</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, toRef } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let userInfo = reactive({
      username: "pink",
      age: 20,
    });
    // 使用 toRef的方式
    // let username = toRef(userInfo, "username");
    // const setUserName = () => {
    //   username.value = "傻屌";
    // };
    // 使用 toRefs的方式
    const setUserName = () => {
      userInfo.username = "傻屌";
    };

    return {
      // username, 使用 toRef的方式
      ...toRefs(userInfo), // 使用 toRefs的方式
      setUserName,
    };
  },
});
</script>

isRef

• 作用：
  • 判断当前的值 是否为 ref 定义的响应式数据值

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

<script lang="ts">
import { defineComponent, reactive, toRefs, toRef, ref, isRef } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let userInfo = reactive({
      username: "pink",
    });
    let count = ref(0);
    console.log(isRef(count)); // true
    let stateUser = toRefs(userInfo);
    console.log(isRef(stateUser)); // false
    console.log(isRef(stateUser.username)); // true 这是由于 使用 ...运算符展开了

    return {};
  },
});
</script>

unref

• 作用：
  • 就是判断当前的对象，是否为响应式对象，若是就返回响应式对象，否则的话返回普通对象
  • unref(obj) === isRef(obj) ? obj.value : obj;

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

<script lang="ts">
import { defineComponent, reactive, ref, unref } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let userInfo = {
      uName: "ppp",
    };
    const obj = unref(userInfo);
    let obj2 = reactive({
      uName: "popo",
    });
    obj2 = unref(obj2);
    // unref(obj) === isRef(obj) ? obj.value : obj; 就是判断当前的对象，是否为响应式对象，若是就返回响应式对象，否则的话返回普通对象
    console.log("obj", obj, "obj2", obj2);
    // 结果
    // obj {uName: "ppp"} => 普通对象  ； obj2 Proxy {uName: "popo"} => 响应式对象
  },
});
</script>

ref

• 作用：
  • 定义一个 ref 值，获取当前节点值，可以用于修改里面的文本等！

ref 在元素上使用

<template>
  <div>
    <div ref="child">我是 child啊</div>
    <button @click="setName">改变名称</button>
    <button @click="getName">获取名称</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let child: any = ref(null);
    const setName = () => {
      child.value.innerText = "被修改的child";
      // console.log("修改的", child.value); // 获取到当前节点  <div ref="child">我是 child啊</div>
    };
    const getName = () => {
      console.log("获取哦", child.value); // 获取到当前节点  <div ref="child">我是 child啊</div>
    };
    return {
      child,
      setName,
      getName,
    };
  },
});
</script>

ref 在组件之中使用

• 作用：
  • 父组件，可以拿到子组件，并且操作子组件的方法等！
• 父组件

<template>
  <div>
    <div>
      我是父组件 --- 操作子组件
      <button @click="changeSonName">父修改子组件name</button>
      <Son ref="son" />
    </div>
  </div>
</template>

<script lang="ts">
import Son from "./childCom/Son.vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "About",
  components: {
    Son,
  },
  setup() {
    let son: any = ref(null);
    const changeSonName = () => {
      // son.value 拿到son组件的实例对象
      // console.log("son", son.value);
      son.value.changeCName(); // 调用子组件的  changeCName 方法
    };
    return {
      son,
      changeSonName,
    };
  },
});
</script>

• 子组件

<template>
  <div>我是子组件cName --- {{ cName }}</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Son",
  components: {},
  setup() {
    let cName = ref("张三");
    const changeCName = () => {
      cName.value = "李四";
    };
    return {
      cName,
      changeCName,
    };
  },
});
</script>

ref 结合数组的操作

<template>
  <div>
    <ul>
      <!-- 注意点：el就是 当前li的本身 也就是把当前的数据注入到当前li之中 -->
      <li
        v-for="(item, index) in arr"
        :key="item.id"
        :ref="
          (el) => {
            if (el) list[index] = el;
          }
        "
      >
        {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
  name: "About",
  components: {},
  setup() {
    let list = ref([]);
    let arr = ref([
      {
        id: 1,
        age: 20,
      },
      {
        id: 2,
        age: 30,
      },
    ]);
    onMounted(() => {
      // list.value 可以拿到当前 list数组的每一个对象的数据
      console.log("list", list.value[0]); //<li data-v-039c5b43="">20</li> 拿到当前的节点
      console.log("arr", arr.value[0]); // Proxy {id: 1, age: 20} 响应式数据
    });
    return {
      arr,
      list,
    };
  },
});
</script>
<style lang="scss" scoped></style>