vue3學習指導教程(附帶獲取屏幕可視區(qū)域?qū)捀?
一、從vue2到vue3
vue3.0 向下兼容 vue2.x 版本,優(yōu)化了主要核心雙向綁定原理和體積大小,并且更加友好的兼容 ts 語法。vue3是基于ES6新增的proxy代理實現(xiàn)的。
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實例的選項上,使用時直接調(diào)用;vue3中使用生命周期鉤子,需要先導入項目,才能夠使用。
import {onMounted} from 'vue'
4.2 ref創(chuàng)建響應式數(shù)據(jù)
在 vue 3中,可以通過一個新的 ref 函數(shù)使任何響應式變量在任何地方起作用 ;ref() 函數(shù)可以根據(jù)給定的值來創(chuàng)建一個響應式的數(shù)據(jù)對象,返回值是一個對象,且只包含一個 .value 屬性。在 setup() 函數(shù)內(nèi),由 ref() 創(chuàng)建的響應式數(shù)據(jù)返回的是對象,所以需要用 .value 來訪問。
使用ref可以創(chuàng)建一個包含響應式數(shù)據(jù)的引用對象(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) // 1
4.3 reactive創(chuàng)建響應式引用類型方法
定義一個對象類型的響應式數(shù)據(jù),內(nèi)部基于ES6的Proxy實現(xiàn),通過代理對象操作源對象內(nèi)部數(shù)據(jù)進行操作;返回一個對象的響應式代理。
import {reactive} from 'vue' // 定義一個引用類型的響應式數(shù)據(jù)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 ,在重新渲染的時候,函數(shù)總會重新調(diào)用執(zhí)行。
methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }
4.5 watch監(jiān)聽
watch(參數(shù)1,參數(shù)2) 默認是懶偵聽的,即僅在偵聽源發(fā)生變化時才執(zhí)行回調(diào)函數(shù)。參數(shù)1是偵聽源,參數(shù)2是回調(diào)函數(shù)。
案例:創(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傳入?yún)?shù) const props=defineProps({ //類型為數(shù)字或者字符串,默認值為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中出現(xiàn)了數(shù)據(jù),數(shù)據(jù)發(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ū)域?qū)捀邤?shù)據(jù))
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ū)域?qū)挾扰c高度</h1> <p>{{size}}</p> </div> </template> <script setup> //導入useWinSize方法 import {useWinSize} from '@/utils/utils.js' //方法執(zhí)行,返回一個對象size const size=useWinSize(); </script>
總結(jié)
到此這篇關于vue3學習的文章就介紹到這了,更多相關vue3獲取屏幕可視區(qū)域?qū)捀邇?nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法
今天小編就為大家分享一篇解決Vue axios post請求,后臺獲取不到數(shù)據(jù)的問題方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue框架和react框架的區(qū)別以及各自的應用場景使用
這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應用場景使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10