vue3怎么獲取屏幕可視區(qū)域?qū)捀?/h1>

發(fā)布時(shí)間：2023-04-18 16:09:27 來(lái)源：億速云 閱讀：124 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇“vue3怎么獲取屏幕可視區(qū)域?qū)捀摺蔽恼碌闹R(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“vue3怎么獲取屏幕可視區(qū)域?qū)捀摺蔽恼掳伞?/p>

一、從vue2到vue3

vue3.0 向下兼容 vue2.x 版本，優(yōu)化了主要核心雙向綁定原理和體積大小，并且更加友好的兼容 ts 語(yǔ)法。vue3是基于ES6新增的proxy代理實(shí)現(xiàn)的。

1.1 vue3的特點(diǎn) 新增了組合式api更接近原生js更加解耦（收到react啟發(fā)）按需加載1.2 與vue2的區(qū)別

相同點(diǎn)：生命周期基本一致、與vue2的模板語(yǔ)法基本一致、與vue2的選項(xiàng)基本一致data methods computed watch等。

不同點(diǎn)：?jiǎn)?dòng)方式不同、全局方法掛載不一樣、vue3可以擁有多個(gè)根節(jié)點(diǎn)、生命周期卸載不同、vue3新增部分 setup()在組件掛載前運(yùn)行。

二、vue3的安裝使用

win+R，輸入cmd打開(kāi)命令窗口，按照以下步驟進(jìn)行安裝。

2.1 安裝腳手架

npm i @vue/cli -g

2.2 創(chuàng)建項(xiàng)目

vue create mv3 //mv3為項(xiàng)目名稱

2.3 手動(dòng)安裝

服務(wù)器

cd /mv3
npm run serve

三、vue3生命周期

Vue3中繼續(xù)使用Vue2中的生命周期鉤子，但有有2個(gè)鉤子發(fā)生了改變 - beforeDestroy改名為beforeUnmount（卸載前） - destroyed改名為unmounted（卸載） 與vue2不同的是，vue3中是有了el模板之后才會(huì)去初始化，而vue2中是先created之后再去找模板。

Vue3生命周期示意圖如下：

import {onMounted} from 'vue'

4.2 ref創(chuàng)建響應(yīng)式數(shù)據(jù)        

在 vue 3中，可以通過(guò)一個(gè)新的 ref 函數(shù)使任何響應(yīng)式變量在任何地方起作用 ；ref() 函數(shù)可以根據(jù)給定的值來(lái)創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象，返回值是一個(gè)對(duì)象，且只包含一個(gè) .value 屬性。在 setup() 函數(shù)內(nèi)，由 ref() 創(chuàng)建的響應(yīng)式數(shù)據(jù)返回的是對(duì)象，所以需要用 .value 來(lái)訪問(wèn)。

使用ref可以創(chuàng)建一個(gè)包含響應(yīng)式數(shù)據(jù)的引用對(duì)象（reference對(duì)象，簡(jiǎn)稱ref對(duì)象），可以是基本類(lèi)型、也可以是對(duì)象。

import { ref } from 'vue' //使用前先導(dǎo)入
 
const counter = ref(0)
 
console.log(counter) // { value: 0 }
console.log(counter.value) // 0
 
counter.value++
console.log(counter.value) // 1

4.3 reactive創(chuàng)建響應(yīng)式引用類(lèi)型方法

定義一個(gè)對(duì)象類(lèi)型的響應(yīng)式數(shù)據(jù)，內(nèi)部基于ES6的Proxy實(shí)現(xiàn)，通過(guò)代理對(duì)象操作源對(duì)象內(nèi)部數(shù)據(jù)進(jìn)行操作；返回一個(gè)對(duì)象的響應(yīng)式代理。

import {reactive} from 'vue'
// 定義一個(gè)引用類(lèi)型的響應(yīng)式數(shù)據(jù)list 默認(rèn)是
const list = reactive(["vue","react","angular"])

4.4 computed & methods

計(jì)算屬性關(guān)鍵詞: computed。

var twiceNum = computed(()=>num.value*2)

computed vs methods

        可以使用 methods 來(lái)替代 computed，效果上兩個(gè)都是一樣的，但是 computed 是基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值。而使用 methods ，在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行。

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

4.5 watch監(jiān)聽(tīng)

         watch(參數(shù)1，參數(shù)2) 默認(rèn)是懶偵聽(tīng)的，即僅在偵聽(tīng)源發(fā)生變化時(shí)才執(zhí)行回調(diào)函數(shù)。參數(shù)1是偵聽(tīng)源，參數(shù)2是回調(diào)函數(shù)。 

案例：創(chuàng)建一個(gè)stepper組件（src/components/StepperCom.vue），在HomeView中引入（src/views/HomeView.vue）

src/components/StepperCom.vue

<template>
    <span>
        <button @click="count--">-</button>
        <input type="text"  v-model="count">
        <button @click="count++">+</button>
    </span>
</template>
<script setup>
//defineProps定義props
import {defineProps,ref,watch,defineEmits,watchEffect,defineExpose} from 'vue'
//定義props傳入?yún)?shù)
const props=defineProps({
    //類(lèi)型為數(shù)字或者字符串，默認(rèn)值為1
    value:{type:[Number,String],default:1}
})
//定義一個(gè)響應(yīng)式對(duì)象初始值為props.value
const count=ref(props.value);
//定義事件發(fā)送器
var emits=defineEmits(["input"]);
//監(jiān)聽(tīng)count的變化
watch(count,()=>{
    //發(fā)送一個(gè)inout事件  事件值為count的value
    emits("input",count.value);
})
//只要watchEffect中出現(xiàn)了數(shù)據(jù)，數(shù)據(jù)發(fā)生變化都會(huì)被執(zhí)行
watchEffect(()=>{
    count.value=props.value;
})
//defineExpose規(guī)定了組件哪些值可以被引用獲取
defineExpose({count})
</script>

 src/views/HomeView.vue

<template>
  <div>
    <h2>setup</h2>
    <button @click="num++">{{num}}</button>
    <stepper-com :value="10" @input="num=$event"></stepper-com>
  </div>
</template>
<script setup>
//使用setup可以簡(jiǎn)寫(xiě)（不用導(dǎo)出，組件不用注冊(cè)）
import StepperCom from '@/components/StepperCom.vue'
import {ref} from 'vue'
    const num=ref(5)
</script>

五、案例（獲取可視區(qū)域?qū)捀邤?shù)據(jù)）

src/utils/utils.js

import {ref,onMounted,onBeforeUnmount} from 'vue'
export function useWinSize(){
    const size=ref({width:1920,height:1080});
    //窗口變化時(shí)更新size
    function onResize(){
        size.value={
            //用窗口的最新寬高更新width和heigth
            width:window.innerWidth,
            height:window.innerHeight
        }
    }
    //組件掛載完畢更新size
    onMounted(()=>{
        window.addEventListener("resize",onResize);
    })
    //組件要卸載的時(shí)候移除事件監(jiān)聽(tīng)
    onBeforeUnmount(() => {
        window.removeEventListener("resize",onResize);
    })
 
    return size;
}

src/views/HomeView.vue

<template>
  <div>
    <h2>可視區(qū)域?qū)挾扰c高度</h2>
    <p>{{size}}</p>
  </div>
</template>
<script setup>
 
//導(dǎo)入useWinSize方法
import {useWinSize} from '@/utils/utils.js'
 
//方法執(zhí)行，返回一個(gè)對(duì)象size
const size=useWinSize();
 
</script>

以上就是關(guān)于“vue3怎么獲取屏幕可視區(qū)域?qū)捀摺边@篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。