1. <dd id="erndk"></dd>
                1. vue3中ref的理解

                  互聯網 2022/5/1 23:13:07

                  1.什么是ref?ref和reactive一樣,也是用來實現響應式數據的方法由于reactive必須傳遞一個對象,所以在實際開發中如果只是想讓某個變量實現響應式的時候回非常麻煩所以Vue3提供了ref方法實現簡單值得監聽2.ref本質ref底層其實還是reactive,所以當運行時系統會自動根據傳入的…

                  1.什么是ref?
                  ref和reactive一樣,也是用來實現響應式數據的方法
                  由于reactive必須傳遞一個對象,所以在實際開發中如果只是想讓某個變量實現響應式的時候回非常麻煩
                  所以Vue3提供了ref方法實現簡單值得監聽
                  2.ref本質
                  ref底層其實還是reactive,所以當運行時系統會自動根據傳入的ref轉換成reactive.
                  3.ref注意點
                  在vue中使用ref的值不用通過value獲取
                  在js中使用ref的值必須通過value獲取

                   

                   

                  4.ref獲取元素
                  在vue2中我們可以通過給元素添加ref=‘xxx’,然后在代碼中通過refs.xxx的方式來獲取元素,在vue3中也可以通過ref來獲取元素.
                  但不是像以下這種熟悉的方式,因為在vue3中沒有$和refs這些東西.

                  錯誤示范

                   

                   

                  正確寫法

                  <template>
                  <div>
                  <div ref="box">我是div</div>
                  </div>
                  </template>

                  <script>
                  import { ref,onMounted } from "vue";
                  export default {
                  setup() {
                  let box = ref(null); //本質是reactive({value:null})
                  // 需要在生命周期獲取
                  onMounted(()=>{
                  // 當界面掛載出來后就會自動執行
                  console.log(box.value);
                  })
                  //接受的是null,原因是setup執行時機比mounted早,dom還沒形成
                  console.log(box.value);
                  return { box };
                  },
                  };
                  </script>

                   

                   

                  原文鏈接:https://blog.csdn.net/weixin_47886687/article/details/112919563

                  隨時隨地學軟件編程-關注百度小程序和微信小程序
                  關于找一找教程網

                  本站文章僅代表作者觀點,不代表本站立場,所有文章非營利性免費分享。
                  本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章,希望廣大程序員努力學習,讓我們用科技改變世界。
                  [vue3中ref的理解]http://www.yachtsalesaustralia.com/tech/detail-318559.html

                  贊(0)
                  關注微信小程序
                  程序員編程王-隨時隨地學編程

                  掃描二維碼或查找【程序員編程王】

                  可以隨時隨地學編程啦!

                  技術文章導航 更多>
                  国产在线拍揄自揄视频菠萝

                        1. <dd id="erndk"></dd>