vue3 reactive 实现响应式

<template> <div> <img alt="Vue logo" src="./assets/logo.png"> <button @click =
"add">add</button> <p> {{data.x}}--{{data.y}} </p> </div> </template> <script
lang="ts"> import { defineComponent } from 'vue'; import HelloWorld from
'./components/HelloWorld.vue'; import {ref,reactive} from "vue"; export default
defineComponent({ name: 'App', setup(){ //表明它是响应式的 const count = ref(100);
const data = reactive({ x:100, y:100 }) const add = ()=>{ // 写一段逻辑 data.x +=
88; data.y += 99; } // 必须返回模块中才能够使 return { data, add } } }); </script> <style>
#app { font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
text-align: center; color: #2c3e50; margin-top: 60px; } </style>
reactive 实现响应式和ref没有多大的差别，无非reactive（obj） 这个函数接收的是一个对象

而且修改的时候,可以直接修改值，不需要像ref 一样，修改带一个xxx.value 去修改

就这个点差别

上面的话，是将数组放到了data 中，假如我们想吧 x,y 暴露出去，这个时候就用到了toRefs ?

试试
<template> <div> <img alt="Vue logo" src="./assets/logo.png"> <button @click =
"add">add</button> <p> {{x}}---{{y}} </p> </div> </template> <script lang="ts">
import { defineComponent } from 'vue'; // import HelloWorld from
'./components/HelloWorld.vue'; import {reactive ,toRefs} from "vue"; export
default defineComponent({ name: 'App', setup(){ const data = reactive({ x:100,
y:100 }) // reactData 展开好后自带响应式 const reactData = toRefs(data); const add =
()=>{ // 写一段逻辑 data.x +=10; data.y +=10; } // 必须返回模块中才能够使 return { add,
...reactData } } }); </script> <style> #app { font-family: Avenir, Helvetica,
Arial, sans-serif; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;
margin-top: 60px; } </style>
修改的比较多，也可以实现类似的功能！

行，大家去测试下吧！同学加油！

 

 

 

• « 上一篇：Redis 的使用场景
• » 下一篇：KeyError: “[‘xxxx‘] not found in axis“