vue3中ref注意點（系列五）

  1.什么是ref?

    - ref和reactive一樣, 也是用來實現響應式數據的方法

    - 由於reactive必須傳遞一個對象, 所以導致在企業開發中

      如果我們只想讓某個變量實現響應式的時候會非常麻煩

      所以Vue3就給我們提供了ref方法, 實現對簡單值的監聽

  2.ref本質:

    - ref底層的本質其實還是reactive

      系統會自動根據我們給ref傳入的值將它轉換成

      ref(xx) -> reactive({value:xx})

  3.ref注意點:

    - 在Vue中使用ref的值不用通過value獲取

    - 在JS中使用ref的值必須通過value獲取

 

 

<template>
  <div>
<!--    <p>{{state.age}}</p>-->
    <!--
    注意點:
    如果是通過ref創建的數據, 那么在template中使用的時候不用通過.value來獲取 因為Vue會自動給我們添加.value -->
    <p>{{age}}</p>
    <button @click="myFn">按鈕</button>
  </div>
</template>

<script>
  /*
  1.什么是ref?
    - ref和reactive一樣, 也是用來實現響應式數據的方法
    - 由於reactive必須傳遞一個對象, 所以導致在企業開發中
      如果我們只想讓某個變量實現響應式的時候會非常麻煩
      所以Vue3就給我們提供了ref方法, 實現對簡單值的監聽
  2.ref本質:
    - ref底層的本質其實還是reactive 系統會自動根據我們給ref傳入的值將它轉換成 ref(xx) -> reactive({value:xx})
  3.ref注意點:
    - 在Vue中使用ref的值不用通過value獲取
    - 在JS中使用ref的值必須通過value獲取
  * */
  // import {reactive} from 'vue';
  import {ref} from 'vue';
export default {
  name: 'App',
  setup() {
    // let state = reactive({
    //   age: 18
    // })
    /*
    ref本質:
    ref本質其實還是reactive
    當我們給ref函數傳遞一個值之后, ref函數底層會自動將ref轉換成reactive
    ref(18) -> reactive({value: 18})
    * */
    let age = ref(18);
    function myFn() {
      // state.age = 666;
      // age = 666;
      age.value = 666;
      console.log(age);
    }
    return {age, myFn}
  }
}
</script>

<style>

</style>