vue3學習指導教程(附帶獲取屏幕可視區(qū)域寬高)
一、從vue2到vue3
vue3.0 向下兼容 vue2.x 版本，優(yōu)化了主要核心雙向綁定原理和體積大小，并且更加友好的兼容 ts 語法。vue3是基于ES6新增的proxy代理實現的。
1.1 vue3的特點 新增了組合式api更接近原生js更加解耦（收到react啟發(fā)）按需加載1.2 與vue2的區(qū)別
相同點：生命周期基本一致、與vue2的模板語法基本一致、與vue2的選項基本一致data methods computed watch等。
不同點：啟動方式不同、全局方法掛載不一樣、vue3可以擁有多個根節(jié)點、生命周期卸載不同、vue3新增部分 setup()在組件掛載前運行。
二、vue3的安裝使用
win+R，輸入cmd打開命令窗口，按照以下步驟進行安裝。
2.1 安裝腳手架
npm i @vue/cli -g
2.2 創(chuàng)建項目
vue create mv3 //mv3為項目名稱
2.3 手動安裝
2.4 進入并運行項目服務器
cd /mv3 npm run serve
三、vue3生命周期
Vue3中繼續(xù)使用Vue2中的生命周期鉤子，但有有2個鉤子發(fā)生了改變 - beforeDestroy改名為beforeUnmount（卸載前） - destroyed改名為unmounted（卸載） 與vue2不同的是，vue3中是有了el模板之后才會去初始化，而vue2中是先created之后再去找模板。
Vue3生命周期示意圖如下：
四、vue3核心
4.1 setup組件
在vue2中，生命周期暴露在vue實例的選項上，使用時直接調用；vue3中使用生命周期鉤子，需要先導入項目，才能夠使用。
import {onMounted} from 'vue'4.2 ref創(chuàng)建響應式數據
在 vue 3中，可以通過一個新的 ref 函數使任何響應式變量在任何地方起作用 ；ref() 函數可以根據給定的值來創(chuàng)建一個響應式的數據對象，返回值是一個對象，且只包含一個 .value 屬性。在 setup() 函數內，由 ref() 創(chuàng)建的響應式數據返回的是對象，所以需要用 .value 來訪問。
使用ref可以創(chuàng)建一個包含響應式數據的引用對象（reference對象，簡稱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) // 14.3 reactive創(chuàng)建響應式引用類型方法
定義一個對象類型的響應式數據，內部基于ES6的Proxy實現，通過代理對象操作源對象內部數據進行操作；返回一個對象的響應式代理。
import {reactive} from 'vue'
// 定義一個引用類型的響應式數據list 默認是
const list = reactive(["vue","react","angular"])4.4 computed & methods
計算屬性關鍵詞: computed。
var twiceNum = computed(()=>num.value*2)
computed vs methods
可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基于它的依賴緩存，只有相關依賴發(fā)生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執(zhí)行。
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}4.5 watch監(jiān)聽
watch(參數1，參數2) 默認是懶偵聽的，即僅在偵聽源發(fā)生變化時才執(zhí)行回調函數。參數1是偵聽源，參數2是回調函數。
案例：創(chuàng)建一個stepper組件（src/components/StepperCom.vue），在HomeView中引入（src/views/HomeView.vue）
src/components/StepperCom.vue
<template>
<span>
<button @click="count--">-</button>
<input type="text" style="width:90px;" v-model="count">
<button @click="count++">+</button>
</span>
</template>
<script setup>
//defineProps定義props
import {defineProps,ref,watch,defineEmits,watchEffect,defineExpose} from 'vue'
//定義props傳入參數
const props=defineProps({
//類型為數字或者字符串，默認值為1
value:{type:[Number,String],default:1}
})
//定義一個響應式對象初始值為props.value
const count=ref(props.value);
//定義事件發(fā)送器
var emits=defineEmits(["input"]);
//監(jiān)聽count的變化
watch(count,()=>{
//發(fā)送一個inout事件 事件值為count的value
emits("input",count.value);
})
//只要watchEffect中出現了數據，數據發(fā)生變化都會被執(zhí)行
watchEffect(()=>{
count.value=props.value;
})
//defineExpose規(guī)定了組件哪些值可以被引用獲取
defineExpose({count})
</script>src/views/HomeView.vue
<template>
<div>
<h1>setup</h1>
<button @click="num++">{{num}}</button>
<stepper-com :value="10" @input="num=$event"></stepper-com>
</div>
</template>
<script setup>
//使用setup可以簡寫（不用導出，組件不用注冊）
import StepperCom from '@/components/StepperCom.vue'
import {ref} from 'vue'
const num=ref(5)
</script>五、案例（獲取可視區(qū)域寬高數據）
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);
})
//組件要卸載的時候移除事件監(jiān)聽
onBeforeUnmount(() => {
window.removeEventListener("resize",onResize);
})
return size;
}src/views/HomeView.vue
<template>
<div>
<h1>可視區(qū)域寬度與高度</h1>
<p>{{size}}</p>
</div>
</template>
<script setup>
//導入useWinSize方法
import {useWinSize} from '@/utils/utils.js'
//方法執(zhí)行，返回一個對象size
const size=useWinSize();
</script>總結
到此這篇關于vue3學習的文章就介紹到這了,更多相關vue3獲取屏幕可視區(qū)域寬高內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue 中filter的多種用法,本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2018-04-04
在 Vue 中，一些簡單的功能，我們可以直接定義為全局方法，然后掛到 Vue 上就能使用了，這篇文章主要介紹了Vue3?中自定義插件的實現,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue 實現剪裁圖片并上傳服務器功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Vue?收集表單數據方法詳情，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了vue項目之頁面class不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
解決Vue axios post請求,后臺獲取不到數據的問題方法
今天小編就為大家分享一篇解決Vue axios post請求,后臺獲取不到數據的問題方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue框架和react框架的區(qū)別以及各自的應用場景使用
這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應用場景使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹一下Vue3動態(tài)面包屑是如何實現的，實現思路又是什么，以及發(fā)給大家介紹一下面包屑的功能，文章通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了Vue實現多標簽選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11