©2020-2024 ioDraw All rights reserved
<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(){ // Indicates that it is responsive const count = ref(100);
const data = reactive({ x:100, y:100 }) const add = ()=>{ // Write a piece of logic data.x +=
88; data.y += 99; } // You must return to the module to enable 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 Achieve responsive and ref It doesn't make much difference , Nothing more than reactive（obj） This function receives an object
And when you modify it , You can modify the value directly , You don't need to be like ref equally , Modify with one xxx.value To modify
That's the difference
Above words , Is to put the array data in , If we want to x,y Expose , It's used at this time toRefs ?
try
<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 After unfolding, it has its own response const reactData = toRefs(data); const add =
()=>{ // Write a piece of logic data.x +=10; data.y +=10; } // You must return to the module to enable 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>
There are many modifications , Similar functions can also be realized !
that 's ok , Let's test it ! Come on, students !
Technology