学习笔记-reactive响应式| 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

 

 用ref 设置响应式对象

JS中设置对象

import { ref } from "vue";

var user = ref({

  username: "Wellington",

  age: 18,

});

调用方法

function setUserAge() {

  user.value.age = 14;

  console.log(user);

}

在视图页面显示

 

  <h1>用户名{{ user.username }}</h1>

  <h1>年龄{{ user.age }}</h1>

  <button @click="setUserAge">点击修改年龄</button>

显示结果

 

 

点击按钮后，年龄从18变成14，但是user.value.age的写法比较麻烦

 

 用reactive 设置响应式对象

reactive 能进行响应式转换可以解包ref

JS中设置对象

import { ref,reactive } from "vue";

const teacher = reactive({

  username: "Wellington",

  type: "帅呆了",

});

调用方法

function setTeacherName() {

  teacher.username = "老王";

}

在视图页面显示

 

  <h1>老师：{{ teacher.username }}</h1>

  <button @click="setTeacherName">修改名字</button>

显示结果

 

 

整体源代码：

 

<template>

  <h1>用户名{{ user.username }}</h1>

  <h1>年龄{{ user.age }}</h1>

  <button @click="setUserAge">点击修改年龄</button>

 

  <h1>老师：{{ teacher.username }}</h1>

  <button @click="setTeacherName">修改名字</button>

 

  <h1>用户名{{ user2.username }}</h1>

  <h1>年龄{{ user2.age }}</h1>

  <button @click="setUser2Age">点击修改年龄</button>

</template>

 

<script setup>

import { ref, reactive } from "vue";

var user = ref({

  username: "Wellington",

  age: 18,

});

 

const teacher = reactive({

  username: "Wellington",

  type: "帅呆了",

});

 

function setUserAge() {

  user.value.age = 14;

  console.log(user);

}

 

function setTeacherName() {

  teacher.username = "老王";

}

 

let user2 = reactive(user.value);

function setUser2Age() {

  user2.age = 100;

}

</script>

 

 总结

ref和reactive都可以实现响应式对象，但是实际开发中，reactive要简洁