web123456

vue3.0 study notes (ref and shallowRef functions are responsive)

  • <template>
  • <p>Profession:{{}}</p>
  • <p>salary:{{}}</p>
  • <button @click="changeClick">Click to change the data</button>
  • </template>
  • <script>
  • import {ref} from 'vue'
  • export default {
  • name: 'App',
  • setup(){
  • //Equivalent to vue2.0In-housedata refPrepare for responsiveness
  • let workObj=ref({work:'Front-end engineer',wage:'30K'})
  • //Method Change the data inside the object through.valueMake changes
  • function changeClick(){
  • workObj.value.work='UI Designer'
  • workObj.value.wage='8K'
  • }
  • //at lastreturngo out
  • return{
  • workObj,
  • changeClick
  • }
  • }
  • }
  • </script>