Bagaimana untuk mendapatkan lebar dan ketinggian kawasan yang kelihatan pada skrin dalam vue3

1 Dari vue2 hingga vue3

vue3.0 serasi ke belakang dengan versi vue2.x, mengoptimumkan prinsip dan saiz pengikatan dua hala teras utama. . Dan ia lebih mesra dan serasi dengan sintaks ts. vue3 dilaksanakan berdasarkan proksi proksi baharu dalam ES6.

1.1 Ciri-ciri vue3: Api gabungan yang baru ditambah, lebih dekat dengan js asli, lebih dipisahkan (diilhamkan oleh tindak balas) Memuatkan atas permintaan 1.2 Perbezaan daripada vue2

Mata yang sama: kitaran hayat pada asasnya ialah sama , pada asasnya konsisten dengan sintaks templat vue2, pada asasnya konsisten dengan pilihan vue2, kaedah data jam tangan yang dikira, dsb.

Perbezaan: kaedah permulaan yang berbeza, pemasangan kaedah global yang berbeza, vue3 boleh mempunyai berbilang nod akar, penyahpasangan kitaran hayat berbeza, persediaan bahagian baharu vue3() berjalan sebelum komponen dipasang.

2. Pasang vue3 menggunakan

win+R, masukkan cmd untuk membuka tetingkap arahan dan ikuti langkah berikut untuk memasang.

2.1 Pasang perancah

npm i @vue/cli -g

2.2 Buat projek

vue create mv3 //mv3为项目名称

2.3 Pemasangan manual

2.4 Masukkan dan jalankan projek pelayan

cd /mv3
npm run serve

3. Kitaran hayat vue3

Vue3 terus menggunakan cangkuk kitaran hayat dalam Vue2, tetapi 2 cangkuk telah berubah - sebelumDestroy dinamakan semula sebelum Nyahlekap (sebelum dinyahlekap) - dimusnahkan dinamakan semula Ia adalah dinyahlekap (dinyahpasang). Perbezaan daripada vue2 ialah dalam vue3, ia akan dimulakan selepas templat el tersedia, manakala dalam vue2, ia akan dibuat dahulu dan kemudian cari templat.

Rajah kitaran hayat Vue3 adalah seperti berikut:

4 komponen persediaan

Dalam vue2, kitaran hayat didedahkan pada pilihan contoh vue dan dipanggil terus apabila digunakan apabila menggunakan cangkuk kitaran hayat dalam vue3, anda perlu mengimport projek terlebih dahulu sebelum ia boleh; digunakan.

import {onMounted} from 'vue'

4.2 ref mencipta data responsif

Dalam vue 3, anda boleh membuat sebarang pembolehubah responsif berfungsi di mana-mana sahaja melalui fungsi ref() boleh digunakan mengikut yang diberikan Untuk mencipta objek data responsif, nilai pulangan ialah objek yang mengandungi hanya satu atribut .value. Dalam fungsi setup(), data responsif yang dicipta oleh ref() mengembalikan objek, jadi ia perlu diakses menggunakan .value.

Gunakan ref untuk mencipta objek rujukan (objek rujukan, dirujuk sebagai objek ref) yang mengandungi data responsif, yang boleh menjadi jenis asas atau objek.

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 reaktif mencipta kaedah jenis rujukan responsif

Tentukan data responsif jenis objek, yang secara dalaman berdasarkan pelaksanaan Proksi ES6 dan beroperasi pada data dalaman objek sumber melalui objek proksi; mengembalikan proksi Reaktif untuk objek.

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

4.4 dikira & kaedah

Kata kunci atribut yang dikira: dikira.

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

kaedah dikira vs

Anda boleh menggunakan kaedah untuk menggantikan yang dikira Kesannya adalah sama, tetapi dikira berdasarkan cache kebergantungannya. Ia hanya akan dimuat semula apabila kebergantungan yang berkaitan. Ambil nilai. Dengan kaedah, fungsi akan sentiasa dipanggil dan dilaksanakan semula apabila membuat semula.

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

4.5 pemantauan jam tangan

jam tangan(parameter 1, parameter 2) malas mendengar secara lalai, iaitu fungsi panggil balik hanya dilaksanakan apabila sumber pendengaran berubah. Parameter 1 ialah sumber mendengar, parameter 2 ialah fungsi panggil balik.

Kes: Buat komponen stepper (src/components/StepperCom.vue) dan perkenalkan ia ke dalam 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 Sarung (mendapatkan data lebar dan ketinggian kawasan visual)

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>

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan lebar dan ketinggian kawasan yang kelihatan pada skrin dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!