vue3에서 화면의 가시 영역의 너비와 높이를 얻는 방법

1. vue2에서 vue3으로

vue3.0은 vue2.x 버전과 역호환되고, 메인 코어 양방향 바인딩 원리와 크기를 최적화하며, TS 구문과 더 친숙하고 호환됩니다. vue3은 ES6의 새로운 프록시 프록시를 기반으로 구현되었습니다.

1.1 vue3의 특징: 새롭게 추가된 결합 API, 네이티브 js에 더 가깝고 더 분리됨(반응에서 영감을 받음) Loading on Demand 1.2 vue2와의 차이점

동일점: 라이프 사이클은 기본적으로 동일하며 vue2의 템플릿 구문 기본적으로 동일하며 vue2의 옵션, 계산된 데이터 방법 등과 기본적으로 일치합니다.

차이점: 다양한 시작 방법, 다양한 전역 방법 마운트, vue3은 여러 루트 노드를 가질 수 있음, 다양한 수명 주기 제거, vue3의 새 부분 setup()은 구성 요소가 마운트되기 전에 실행됩니다.

2. vue3을 설치하려면

win+R을 사용하고 cmd를 입력하여 명령 창을 열고 다음 단계에 따라 설치하세요.脚2.1 스캐폴드 설치

npm i @vue/cli -g

E

2.2 프로젝트 생성

vue create mv3 //mv3为项目名称

E

2.3 수동 설치

2.4 프로젝트 서버 입력 및 실행

cd /mv3
npm run serve

E

3, Vue3 라이프 사이클

Vue3은 Vue2에서 라이프 사이클 후크를 계속 사용합니다. 하지만 하지만 두 개의 후크가 변경되었습니다. beforeDestroy는 beforeUnmount(마운트 해제 전)로 이름이 바뀌었습니다. Destroy는 unmounted(제거)로 이름이 바뀌었습니다. vue2와의 차이점은 vue3에서는 el 템플릿을 사용할 수 있게 된 후에 초기화된다는 점입니다. 나중에 템플릿을 찾아보세요.

Vue3 라이프사이클 다이어그램은 다음과 같습니다.

IV.vue3 core

4.1 설정 컴포넌트

vue2에서는 라이프사이클이 vue 인스턴스의 옵션에 노출되며 사용 시 직접 호출됩니다. ; vue3에서는 수명이 사용됩니다. 사이클 후크를 사용하려면 먼저 프로젝트로 가져와야 합니다.

import {onMounted} from 'vue'

4.2 ref는 반응형 데이터를 생성합니다.

vue 3에서는 새로운 ref 함수를 통해 모든 반응형 변수가 어디서나 작동하도록 할 수 있습니다. ref() 함수는 주어진 값 Data 객체를 기반으로 반응형 변수를 생성할 수 있습니다. 객체이며 하나의 .value 속성만 포함합니다. 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의 프록시 구현을 기반으로 하고 프록시 객체를 통해 소스 객체의 내부 데이터에 대해 작동하는 객체 유형의 리액티브 데이터를 정의합니다. 객체의 프록시.

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

4.4 계산 및 방법

계산 속성 키워드: 계산.

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

computed vsmethod

메서드를 사용하여 계산을 대체할 수 있습니다. 효과는 동일하지만 계산은 종속성 캐시를 기반으로 하며 관련 종속성이 변경될 때만 다시 평가됩니다. 메서드를 사용하면 다시 렌더링할 때 항상 함수가 호출되고 다시 실행됩니다.

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

54.5 Watch monitor

Watch (Parameter 1, Parameter 2) 기본값은lazy, 즉 청취 소스의 소스가 변경될 때만 콜백 함수가 실행됩니다. 매개변수 1은 청취 소스이고, 매개변수 2는 콜백 함수입니다.

사례: 스테퍼 구성 요소(src/comComponents/StepperCom.vue)를 생성하고 이를 HomeView(src/views/HomeView.vue)에 도입합니다.

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

위 내용은 vue3에서 화면의 가시 영역의 너비와 높이를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!