<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>
修改的比较多,也可以实现类似的功能!

行,大家去测试下吧!同学加油!

 

 

 

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信