vue3で画面の表示領域の幅と高さを取得する方法

1. vue2 から vue3

vue3.0 は vue2.x バージョンと下位互換性があり、メインコアの双方向バインディング原則を最適化し、また、よりフレンドリーで ts 構文と互換性があります。 vue3 は、ES6 の新しいプロキシ プロキシに基づいて実装されています。

1.1 vue3 の特徴: 新しく追加された複合 API、ネイティブ JS に近く、より分離された (react からインスピレーションを受けた) オンデマンドでロード 1.2 vue2 との違い

同じ点: ライフサイクルは基本的に同じで、基本的に vue2 のテンプレート構文と一致し、vue2 のオプション、データ メソッドの計算されたウォッチなどと基本的に一致します。

相違点: 異なる起動方法、異なるグローバル メソッドのマウント、vue3 は複数のルート ノードを持つことができる、異なるライフサイクル アンインストール、vue3 の新しいパーツの setup() はコンポーネントがマウントされる前に実行されます。

2.

win R を使用して vue3 をインストールし、cmd と入力してコマンド ウィンドウを開き、次の手順に従ってインストールします。

2.1 スキャフォールディングのインストール

npm i @vue/cli -g

2.2 プロジェクトの作成

vue create mv3 //mv3为项目名称

2.3 手動インストール

2.4 プロジェクトの入力と実行サーバー

cd /mv3
npm run serve

3. vue3 ライフ サイクル

Vue3 は引き続き Vue2 のライフ サイクル フックを使用しますが、2 つのフックが変更されました - beforeDestroy は名前が変更されます beforeUnmount (アンマウント前) - destroy は名前が変更されますunmounted (uninstalled). vue2 との違いは、vue3 では el テンプレートが利用可能になった後に初期化されるのに対し、vue2 では最初に el テンプレートが作成されてからテンプレートが見つかることです。

Vue3 ライフサイクル図は次のとおりです:

#4. vue3 コア

4.1 セットアップコンポーネント

vue2 では、ライフ サイクルは vue インスタンスのオプションで公開され、使用時に直接呼び出されます。vue3 でライフ サイクル フックを使用する場合は、使用する前に最初にプロジェクトをインポートする必要があります。 。

import {onMounted} from 'vue'

4.2 ref は応答性の高いデータを作成します

vue 3 では、新しい ref 関数を使用して、任意の応答性の高い変数をどこでも動作させることができます。ref() 関数は、指定された To create 関数に従って使用できます。応答データ オブジェクトの場合、戻り値はオブジェクトであり、.value 属性が 1 つだけ含まれます。 setup() 関数内では、ref() によって作成された応答データはオブジェクトを返すため、.value を使用してアクセスする必要があります。

ref を使用して、応答データを含む参照オブジェクト (参照オブジェクト、ref オブジェクトと呼ばれる) を作成します。これは、基本型またはオブジェクトにすることができます。

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

4.3 レスポンシブ参照型メソッドのリアクティブ作成

ES6 プロキシ実装に内部的に基づいてオブジェクト タイプのレスポンシブ データを定義し、プロキシ オブジェクトを通じてソース オブジェクトの内部データを操作します。オブジェクトの Reactive プロキシを返します。

import {reactive} from 'vue'
// 定义一个引用类型的响应式数据list 默认是
const list = reactive(["vue","react","angular"])

4.4 計算済み & メソッド

計算済み属性キーワード: 計算済み。

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

computed とメソッド

メソッドを使用して computed を置き換えることができます。効果は同じですが、computed は依存関係キャッシュに基づいています。関連する依存関係が変更された場合にのみ更新されます。価値を認めてください。メソッドを使用すると、再レンダリング時に関数が必ず呼び出され、再度実行されます。

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

4.5 監視モニタリング

Watch(パラメータ 1, パラメータ 2) は、デフォルトで遅延リスニングに設定されます。つまり、コールバック関数は、リスニング ソースが変更された場合にのみ実行されます。パラメータ 1 はリスニング ソース、パラメータ 2 はコールバック関数です。

ケース: ステッパー コンポーネント (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 &#39;vue&#39;
//定义props传入参数
const props=defineProps({
    //类型为数字或者字符串，默认值为1
    value:{type:[Number,String],default:1}
})
//定义一个响应式对象初始值为props.value
const count=ref(props.value);
//定义事件发送器
var emits=defineEmits(["input"]);
//监听count的变化
watch(count,()=>{
    //发送一个inout事件  事件值为count的value
    emits("input",count.value);
})
//只要watchEffect中出现了数据，数据发生变化都会被执行
watchEffect(()=>{
    count.value=props.value;
})
//defineExpose规定了组件哪些值可以被引用获取
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可以简写（不用导出，组件不用注册）
import StepperCom from &#39;@/components/StepperCom.vue&#39;
import {ref} from &#39;vue&#39;
    const num=ref(5)
</script>

5. ケース (ビジュアルエリアの幅と高さのデータを取得する)

src/utils/utils.js

import {ref,onMounted,onBeforeUnmount} from 'vue'
export function useWinSize(){
    const size=ref({width:1920,height:1080});
    //窗口变化时更新size
    function onResize(){
        size.value={
            //用窗口的最新宽高更新width和heigth
            width:window.innerWidth,
            height:window.innerHeight
        }
    }
    //组件挂载完毕更新size
    onMounted(()=>{
        window.addEventListener("resize",onResize);
    })
    //组件要卸载的时候移除事件监听
    onBeforeUnmount(() => {
        window.removeEventListener("resize",onResize);
    })
 
    return size;
}

src/views/HomeView.vue

<template>
  <div>
    <h2>可视区域宽度与高度</h2>
    <p>{{size}}</p>
  </div>
</template>
<script setup>
 
//导入useWinSize方法
import {useWinSize} from &#39;@/utils/utils.js&#39;
 
//方法执行，返回一个对象size
const size=useWinSize();
 
</script>

以上がvue3で画面の表示領域の幅と高さを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。