慌慌張張,匆匆忙忙,vue2還沒用好,vue3就來了？？？？真的學不動了.......嘴上說著學不動,只見有的人在偷偷的在學習，我也利用假期看了看vue3...,倒吸一口氣，還好差別并不是很大。別問我什么原理，底層東西￥%￥%￥%#$#$%#$%,我不懂,直接干vue3的安裝

• 安裝vue腳手架

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

• 創建vue項目

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

vue2和vue3結構上的區別

• vue2.0 基本結構

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

• vue3.0基本結構

<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>

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

關于vue3的寫法

• 按需引入

將需要的方法我們才會引進來,不需要則不引進

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

• setup()方法

在vue3中我們全新的使用一個新的setup()方法,在組件初始化構造函數的時候觸發,需要vue3中的reactive(),這個方法聲明我們的數據為反應性數據,reactive()方法有點類似vue2中的data

使用setup()方法return我們的反應性數據，那為什么要用...toRefs(data)對它進行解構呢?只是為了能向vue2一樣能更加簡潔的方式渲染

放片段代碼就知道了

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

• methods寫法

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

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

• 計算屬性computed寫法

我們需要在vue中引入computed方法，然后也是在setup()方法中聲明變量，然后返回,舉個例子返回數組的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 } }};生命周期鉤子

生命周期函數寫法也是寫在setup方法里面

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

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

props-不可變的組件參數

context-vue3暴露出來的屬性(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，值得注意一點就是 我們使用npm下載下來的默認是vue-router@3+的版本，但是在vue3中我們使用的vue-router版本是4+，所以需要這么下載

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

這樣我們下載下來的vue-router就是版本4以上了

(1)?vue2中使用路由

在vue2中我們在router.js,將路由通過vue.use()全局注入vue中

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

在mian.js中，在vue實例化中放入router.js,在vue項目中我們就可以使用this.$router去進行路由的操作

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

使用this.$router完成路由的跳轉? ?

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

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

獲取當前路由id：this.$route.params.id

獲取當前路由地址：this.$route.path

獲取當前hash地址：location.hash

獲取當前路由params參數：his.$route.params.from

獲取當前路由query參數：this.$route.query.from

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

(3)在vue3中使用vue-router

在vue3中使用vue-router更加簡潔方便

// router.jsimport?{?createRouter,?createWebHistory?}?from?'vue-router'import?ResourceHome?from?'@/views/ResourceHome'const routes = [????{?path:?"/",?name:?'base',?component:?ResourceHome?},]const router = createRouter({ history: createWebHistory(), //去掉#號 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?完成路由跳轉和獲取路由信息的方式

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

基本上對vue3的了解就到此,學會了基本可以在項目中應用了，但還有一些高級的玩法，vue2復用代碼用了minixs和slot,在vue3是怎么復用代碼的呢，一起去學習吧！！！！

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

越來越多的人告訴你，認真你就輸了，因為他們想讓你和他一樣

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

今兒就說到這啦，若文章表述的觀點和內容引起不適，隨意吐槽哈哈哈哈~~

覺得不錯可關注微信公眾號哦

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。