ویو نسخه 3 در سال 2020 نسخه جدید ریلیس شد.
تفاوت سینتکس ها در vue2 با vue3
vue2
vue3
فرق (option-api) vue2 با vue3 (composition-api)
1-کامپونت های برزگ خواندن و حفظ کردنش خیلی سخت است
2- مدیریت و حفظ منطق بین اجزای یک کامپونت مشکل بزرگی است همون mixins در ویو منظورش هست
بنابراین composition api در ویو3 آمده است که مشکلات فوق را حل کند.
vue3 (composition-api)
تایپ اسکریپت را پشتیبانی می کند
در vue3 دیگه methods ندارد و همه تابع فانشن وارور فانشن ها در setup می نویسیم.
<template>
<!-- template code -->
</template>
export default {
name: "App",
props: {
/*...*/
}
components: {
/*...*/
},
data(){
return {
/*...*/
}
},
computed:{
/*...*/
},
watch:{
/*...*/
},
methods: {
/*...*/
},
created(){
/*...*/
},
mounted(){
/*...*/
}
};
Vue3
Import {defineComponet,computed,watch,onMounted} from “vue”
Export defult defineComponent{
Props:{
},
Setup(){
Computed=()=>{
},
Watch=()=>{
}
onMounted=()=>{
}
}
}
vue 2
درvue3دیگه نیازی نیست با data کار کنید
vue3
vue2
vue 3
vue 2 computed
vue3
vue2 watch
vue 3 watchEffect
vue 2 filters
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
{{ new Date() | formatUnix}}
</div>
</template>
import HelloWorld from "./components/HelloWorld.vue";
import moment from "moment";
export default {
name: "App",
components: {
HelloWorld,
},
filters: {
formatUnix(value) {
if (value) {
return moment(value).format("DD/MM/YYYY");
}
},
},
};
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
در vue3 دیگه filltersنداریم واگه قرارباشدیک دیتایی راتغییردهیم یا دیتای جدیدواردکنیدبا watch این کاررا انجام میدهیم
vue 3 emit
<template>
<form>
<div>
<label for="name">Name</label>
<input type="text" :value="name" @input="updateName($event.target.value)" />
</div>
<div>
<label for="email">Email</label>
<input type="email" :value="email" @input="updateEmail($event.target.value)" />
</div>
</form>
</template>
export default {
props: {
name: String,
email: String,
},
setup(props, { emit }) {
const updateName = (value) => {
emit("update:name", value);
};
const updateEmail = (value) => {
emit("update:email", value);
};
return { updateName, updateEmail };
},
};
vue2
vue3 reactive
Import {reactive}from “vue”
Const count=reactive({
Name:’pooria’
Family:’vakili’
})
انواع ref در vue3
یک فایل تایپ اسکریپت دارم
unRef
import {unref,ref}from vue
const count=ref(2)
function newCount(){
count.value=unRef(count)*2
}
isRef
import {unref,ref,isRef}from vue
const count=ref(2)
function newCount(){
count.value=unRef(count)*2
const new=isRef(count)?count.value:count
}
import axios from "axios"
Provide,inject
App.provide($api,axios)
Import {inject}from vue
Actions:
{
newCount(){
Const $axios=inject(“$api”)
$api.get(address api).then(r=>{
Commit(“name mutions”,r.data)
}
}
}
slot vue2
slot vue3
Teleport in vue3
یک فایلی در public در html داریم
تلپرت چه استفاده ای می شود
مثلا می خواهیم بدون uicomponent با ویو 3 یک مودال بسازیم
<script setup>
export default defineComponent({
Setup(emit){
Const CloseModal=()=>{
emit(‘closeModal’)
}
)}}
Const showModal=ref(false)
modalShow(){
showmodal.value=true
}
Dynamic component
Tab A
<template>
<span>tab a</span>
</span>
</template>
Tab b
<template>
<span>tab b</span>
</span>
</template>
Tab A
<template>
<span>tab c</span>
</span>
</template>
در صفحه بعد
<template>
<button @click=”actionButton=TabA”>tab a</button>
<button @click=”actionButton=TabB”>>tab b</button>
<button @click=”actionButton=TabC”>>tab c</button>
<keep-alive>
<component :is=”actionButton”></component>
</keep-alive>
</template>
Import {ref}from “vue
Export default defineComponent({
Components:{
TabA,
TabB,
TabC
},
Setup(){
Const actionButton=ref(‘TabA’)
}
)}
Suspense in vue3
با suspense می توانید کامپونت ها ومحتوا رندر وفالبک بگیرید در این وضعیت کامپونت های async مینویسید و دیگر synchronous استفاده نکنیم وکلا همه فانشن ها async بنویسیم.
فرق synchronous با async
در synchronous شما نمی دانید که این دیتا چه زمانی فرستاده میشود و چه مدت منتظر می مانید که این دیتا فرستاده شود ولی در async اون دیتا همزمان اجرا می شود و می دانید با دستور await چه زمانی اجرا می شود
با suspense شما میتوانید یک سری کامپونت ها را به صورت async بنویسید
اگر ما کامپونت هایی می اوریم تصویر ها ومحتواهایی که در کامپونت userProfile قرار دارد نشان دهد ودر fallback ازش یک async بگیریم که همزمان نشان دهد که سرعت نشان دادن دیتا خیلی بالا می رود
لایف سایکل ها در ویو 2 و3
قسمت سمت چپ ویو2 وسمت راست برای ویو3
vuex vue2 vue 3
مثال های vuex در ویو2 با mapها نشان میدهم.
در vue 3 دیگه mapstate mapgetters mapmutions mapactions نداریم
vue2
Mapstate
Count:state=>mapState({
State.count)}
vue3
Const count=computed(()=>store.state.count
vue2 mapGetters
MapGetters
Count:mapGetters([
‘count’]}
vue 3
Const count=computed()=>store.getters.count
vue2
mapMutions
count:mapMutions:([
“enterNewCount”])
vue2
Const count=computed()=>store.commit(“enterNewCount”)
vue2
mapActions:[‘enterNewCount/count’]
vue3
const count=
store.dispatch(‘enterNewCount/count’]
routerدرvue2,vue3
vue2
this.$router.push(‘addComponet’)
vue3
const router=useRouter()
router.push(‘addcomponent’)
