慌慌張張,匆匆忙忙,vue2還沒(méi)用好,vue3就來(lái)了？？？？真的學(xué)不動(dòng)了.......嘴上說(shuō)著學(xué)不動(dòng),只見(jiàn)有的人在偷偷的在學(xué)習(xí)，我也利用假期看了看vue3...,倒吸一口氣，還好差別并不是很大。別問(wèn)我什么原理，底層?xùn)|西￥%￥%￥%#$#$%#$%,我不懂,直接干vue3的安裝

• 安裝vue腳手架

需要node的版本8.9或者更高的版本npm?install?-g @vue/cli

• 創(chuàng)建vue項(xiàng)目

(1)創(chuàng)建vue3-demo項(xiàng)目(第一種方式)vue?create?vue3-demo然后選擇vue3的版本即可(2)創(chuàng)建vue3-test項(xiàng)目(第二種方式)先命名好vue項(xiàng)目的名稱(chēng)比如命名為vue3-test，然后cmd進(jìn)入該文件夾,然后輸入vue?create?.這樣就可以創(chuàng)建一個(gè)名為vue3-test的vue項(xiàng)目了

vue2和vue3結(jié)構(gòu)上的區(qū)別

• vue2.0 基本結(jié)構(gòu)

export default { data() { return {} }, // computed computed: {}, //生命鉤子 mounted() {}, // methods methods: {},};script>

• vue3.0基本結(jié)構(gòu)

<script>import { reactive, toRefs, computed, ref, onMounted } from 'vue';export default { setup(){ const data = reactive({??????????????list:[],??????????????title:"hi~ vue3.0" })????????cosnt?num?=?ref(0) // 生命鉤子 onMounted(()=>{}) // computed const Count = computed(()=>{}), // methods????????const?method?=?()=>{} return {????????????...toRefs(data), Count,????????????//?方法視情況而定?組件中有使用才return????????????method? } }};script>

有看什么之所以然來(lái)嗎，首先我們可以看到了在vue2中data,computed,methods,mounted都是分割成了不同的屬性,但在vue3中用方法(function)進(jìn)行來(lái)分割,更加接近了JS的方法的調(diào)用,可以在另一個(gè)方法中直接調(diào)用,不用像vue2.0那樣使用this去調(diào)用。

關(guān)于vue3的寫(xiě)法

• 按需引入

將需要的方法我們才會(huì)引進(jìn)來(lái),不需要?jiǎng)t不引進(jìn)

import { reactive, toRefs, computed, ref, onMounted } from 'vue';

• setup()方法

在vue3中我們?nèi)碌氖褂靡粋€(gè)新的setup()方法,在組件初始化構(gòu)造函數(shù)的時(shí)候觸發(fā),需要vue3中的reactive(),這個(gè)方法聲明我們的數(shù)據(jù)為反應(yīng)性數(shù)據(jù),reactive()方法有點(diǎn)類(lèi)似vue2中的data

使用setup()方法return我們的反應(yīng)性數(shù)據(jù)，那為什么要用...toRefs(data)對(duì)它進(jìn)行解構(gòu)呢?只是為了能向vue2一樣能更加簡(jiǎn)潔的方式渲染

放片段代碼就知道了

//setup()return{data}//template{{data.title}}//?使用...toRefsreturn{...toRefs(data)}//template{{title}}

• methods寫(xiě)法

在vue3中我們直接在setup()創(chuàng)建方法，然后return，在組件中就可以觸發(fā)到該方法了

// template "submit">提交 // script??export default {??????setup(){ // methods const submit = ()=>{ // 提交方法????????}????????return?{????????????//?返回 submit } }};

• 計(jì)算屬性computed寫(xiě)法

我們需要在vue中引入computed方法，然后也是在setup()方法中聲明變量，然后返回,舉個(gè)例子返回?cái)?shù)組的length

// template?{{listLength}}</div>??// ?script?import?{?computed}?from?'vue';?export default { setup() { const data = reactive({ list: [{ id: 1, title: "hi~,vue1.0" }, { id: 2, title: "hi~,vue2.0" }, { id: 3, title: "hi~,vue2.0" } ] })????????//? methods const submit = () => {????????????//? 提交方法 }????????// ?computed const listLength = computed(() => { return data.list.length????????????}), return { listLength, submit } }};生命周期鉤子

生命周期函數(shù)寫(xiě)法也是寫(xiě)在setup方法里面

// script??import?{?onMounted}?from?'vue'; export default { setup(){??????//?頁(yè)面加載完成執(zhí)行??????onMounted(()=>{????????//?執(zhí)行submit方法????????submit()??????}) // methods const submit = ()=>{ // 提交方法 } return { // 返回 submit } }};接收props和自定義事件emit

在vue3中沒(méi)有了this,那怎么在script接收怎么獲取props的值呢？？哈哈不著急,原來(lái)在我們一直提到的setup()方法中，我們可以接收兩個(gè)參數(shù)setup(props,context)

props-不可變的組件參數(shù)

context-vue3暴露出來(lái)的屬性(emit,slots,attrs)

直接上碼

?@click=import?{?ref?}?from?'vue';export default { props: { item: { type: Object????} }, setup(props,context) {????// ?獲取props值????const?getPropItem?=?ref(props.item);????const?resource = "" const submitFrom = ()=>{????????// ??自定義事件????????context.emit("onSubmitFrom",getPropItem)???????}????return?{?????????submitFrom }; }};script>

在vue3使用vue-router

在vue3中使用vue-router，值得注意一點(diǎn)就是 我們使用npm下載下來(lái)的默認(rèn)是vue-router@3+的版本，但是在vue3中我們使用的vue-router版本是4+，所以需要這么下載

npm?install?vue-router@next?--save

這樣我們下載下來(lái)的vue-router就是版本4以上了

(1)?vue2中使用路由

在vue2中我們?cè)趓outer.js,將路由通過(guò)vue.use()全局注入vue中

// router.jsimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const routes = [????{?path:?"/",?name:?'base',?component:?ResourceHome?},]//?創(chuàng)建路由實(shí)例let router = new Router({ routes,????mode:?'history',?//去掉url#});//?導(dǎo)出export default router;

在mian.js中，在vue實(shí)例化中放入router.js,在vue項(xiàng)目中我們就可以使用this.$router去進(jìn)行路由的操作

import router from './router.js';new?Vue({ router, //實(shí)例化，表示會(huì)使用 render: (h) => h(App)}).$mount('#app');(2)在vue2中router和route

使用this.$router完成路由的跳轉(zhuǎn)? ?

this.$router.push('/index')

使用this.$route獲取路由的信息

獲取當(dāng)前路由id：this.$route.params.id

獲取當(dāng)前路由地址：this.$route.path

獲取當(dāng)前hash地址：location.hash

獲取當(dāng)前路由params參數(shù)：his.$route.params.from

獲取當(dāng)前路由query參數(shù)：this.$route.query.from

返回上個(gè)頁(yè)面：this.$router.go(-1)

(3)在vue3中使用vue-router

在vue3中使用vue-router更加簡(jiǎn)潔方便

// router.jsimport?{?createRouter,?createWebHistory?}?from?'vue-router'import?ResourceHome?from?'@/views/ResourceHome'const routes = [????{?path:?"/",?name:?'base',?component:?ResourceHome?},]const router = createRouter({ history: createWebHistory(), //去掉#號(hào) routes, linkActiveClass: 'active' //高亮})export default router // main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'const app = createApp(App)app.use(router)app.mount('#app')

在組件中使用useRouter,useRoute?完成路由跳轉(zhuǎn)和獲取路由信息的方式

import?{?useRouter,useRoute?}?from?'vue-router';// script export default {??//?路由跳轉(zhuǎn) const router = useRouter();????//?路由信息 const route = useRoute();????const?id?=?ref(route.params.id) setup(){ // 頁(yè)面加載完成執(zhí)行 onMounted(()=>{ // 執(zhí)行submit方法 submit() }) // methods const submit = ()=>{ // 提交方法??????????//?跳轉(zhuǎn)??????????router.push('/index'); } return { // 返回 submit } }};script>

基本上對(duì)vue3的了解就到此,學(xué)會(huì)了基本可以在項(xiàng)目中應(yīng)用了，但還有一些高級(jí)的玩法，vue2復(fù)用代碼用了minixs和slot,在vue3是怎么復(fù)用代碼的呢，一起去學(xué)習(xí)吧！！！！

今天就先到這了,祝大家假期愉快！！！

越來(lái)越多的人告訴你，認(rèn)真你就輸了，因?yàn)樗麄兿胱屇愫退粯?/p>

可是認(rèn)真你就真的輸了嗎，每個(gè)被世界嘲棄過(guò)的人，都假裝玩世不恭，而你要告訴你自己，不要裝逼，認(rèn)真，努力。

今兒就說(shuō)到這啦，若文章表述的觀點(diǎn)和內(nèi)容引起不適，隨意吐槽哈哈哈哈~~

覺(jué)得不錯(cuò)可關(guān)注微信公眾號(hào)哦

總結(jié)

以上是生活随笔為你收集整理的import是引进外部函数吗_vue3已正式发布,你学了吗的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。