vue3語法筆記,vue3+vite2 配置 axios router vuex element++

vite

不支持ie11

建立項目

npm init @vitejs/app
複製代碼

命名：

選擇要建立的框架，這裏選擇vue

選擇語言 這裏用TypeScript或者javaScript均可以

這樣一個vite2+vue3項目就建立完成了

cd 項目目錄
npm install npm run dev

成功啓動，幾乎是秒開

##配置路由

要4版本

npm install vue-router@4 -s
複製代碼

src/router/index.ts

import {createRouter,createWebHashHistory} from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
            path: "/",
            name: "index",
            component: () => import( "@/views/index/index"),
        },
    ]
})

export default router;
複製代碼

main.js

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App).use(router)
app.mount('#app')
複製代碼

配置vuex

src/store/index.js

npm install vuex@next --save
複製代碼

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state : {
      count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
     actions: {},
    modules: {}
})
export default store
複製代碼

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(router).use(store)
app.mount('#app')
複製代碼

vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  alias: {
    // 配置路徑別名
    '@': path.resolve(__dirname, 'src'),
    'view': path.resolve(__dirname, 'src/view'),
    'com': path.resolve(__dirname, 'src/components'),
    'api': path.resolve(__dirname, 'src/api'),
    'utils': path.resolve(__dirname, 'src/utils'),
  },
  // 引入第三方的配置
  // optimizeDeps: {
  // include: ["echarts", "axios", ]
  // },
  plugins: [vue()],
  // hostname: '0.0.0.0',
  // port: 8090,
  // 是否自動在瀏覽器打開
  // open: true,
  // 是否開啓 https
  https: false,
  // 服務端渲染
  ssr: false,
  /** * 在生產中服務時的基本公共路徑。 * @default '/' */
   base: './',
   /** * 與「根」相關的目錄，構建輸出將放在其中。若是目錄存在，它將在構建以前被刪除。 * @default 'dist' */
  outDir: 'dist',
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      },
    },
  }
})


複製代碼

axios

npm install axios -S
複製代碼

vue3寫法

變量聲明改變，不用在建立data函數，使用reactive聲明，好比：

<template>
    <div>{{state.name}}//這裏直接使用
</template>

<script> const state=reactive({name:'malunan'})//直接聲明 </script>

複製代碼

emit接收方式同樣，觸發不同例如

<script>
import {defineEmit} from 'vue'//獲取emit方法
const emit=defineEmit(["myemit"])//定義事件
emit('myemit')//觸發emit
</script>

複製代碼

或者

<script>
import {useContext} from 'vue'
export default{
 setup(){
    const cxt=useContext()
    cxt.emit('myemit')
    // console.log(cxt===cxt2)//true
 }
}
</script>
複製代碼

或者

<script>
export default{
 setup(props,cxt){//也能夠(props,{emit})
    cxt.emit('myemit')
 }
}
</script>
複製代碼

getCurrentInstance 支持訪問內部組件實例，用於高階用法或庫的開發。

import { getCurrentInstance } from 'vue'
setup() {
    const internalInstance = getCurrentInstance()
    internalInstance.appContext.config.globalProperties // 訪問 globalProperties
  }
複製代碼

經過useContext()獲取上下文

import {useContext} from 'vue'
const ctx=useContext()//這裏ctx獲取上下文
複製代碼

定義輸出 父組件經過ref訪問

上下文中，有個方法叫expose({})接收一個對象

//子組件
<script>
import {useContext} from 'vue'
const ctx=useContext()//這裏ctx就至關於vue2 的this
ctx.expose({
  setMetod(){//定義事件
  console.log(myMetod
  )}
})
</script>
複製代碼

//父組件
<template>
    <div> <el-button @click="cont">dj</el-button> <Com ref="hw"></Com>//註冊ref </div>
</template>
<script setup> import Com from 'com/com.vue' import {ref} from 'vue' const hw=ref(null)//要和上面對應 const cont=()=>{ hw.value.setMetod()//調用方法 } </script>
複製代碼

ref定義變量

ref(10)==>本質 reactive(value:10)

用ref函數建立的數組不能用watch去監聽 主要用來聲明普通變量

import {ref} from 'vue'
setup(){
    let cou=ref(0)//定義了一個初始值爲0 的變量cou 
}
return {cou}  //在組合api中 想要使用變量 必需要把變量/方法暴漏出去
//經過 cou.value 改變值 緣由:本質是reactive({value:0})
複製代碼

reactive定義對象數組

import {reactive} from 'vue'
setup(){
    let cou=reactive({name:'malunan'})//定義了一個初始值爲0 的變量cou 
}
return {cou}  //在組合api中 想要使用變量 必需要把變量/方法暴漏出去
複製代碼

判斷是不是ref或者是reactive類型

ref和 reactive 底層是經過 _v_ref來判斷的

isRef和isReactive

經過 import {isRef,isReactive} vue 引入

isRef(變量)
isRef(isReactive)
複製代碼

非遞歸監聽變量建立 shallowRef 和 shallowReactive 建立 （場景：數據量比較大的時候使用）

若是是shallowRef建立的數據。那麼vue 監聽的是.value的變化，並非第一層的變化

triggerRef(變量)

shallowRef數值變化 主動更新頁面
vue沒有提供trigerReactive方法

toRaw 獲取到原始數據

import {reactive,toRaw} from 'vue'
setup(){
    let obj={name:'lnj',age:'18'}
    let state=reactive(obj)//其實這裏是被包裝後的，雖然指向同一個地址，但vue監聽的不同
    let obj2=toRaw(state)
    obj===obj2//true
    obj===state//false
    //直接改變obj內的變量 不會觸發視圖更新

    //ref建立獲取原始數據
    let state=ref(obj)
    let obj2 =toRaw(state.value)
}
複製代碼

若是利用ref將某一個對象中的屬性變化成響應式數據。 咱們修改的響應式數據，是不會影響到原始數據的

let obj={name:'js'}
let state=ref(obj.name)
state.value='zs'  //改後 obj的數據不會發生變化
複製代碼

可使用toRef變成響應式

toRef

let obj={name:'js'}
let state=toRef(obj,'name') //這樣聲明，obj的數據是會發生變化，但視圖不會變化
state.value='zs'
複製代碼

ref->複製 toRef->引用

toRefs

多個聲明 至關於toRef簡寫

let obj={name:'js'}
let state=toRefs(obj) //這樣聲明，obj的數據是會發生變化，但視圖不會變化
state.value='zs'
複製代碼

makRow 禁止追蹤

使用makRow()的數據，修改後的數據不會被追蹤,修改視圖後不會更新

customRef 建立自定義ref

接收兩個參數 track用來追蹤 trigger用來觸發響應，更新界面

customRef((track,trigger)=>{
    return {
        get(){
            track();//用來追蹤
            
        },
        set(newValue){
            //
            trigger();//trigger用來觸發響應，更新界面
        }
    }
})
複製代碼

readonly建立只讀數據 shallowReadonly建立一層只讀數據

let state=readonly({name:'ma'})  //建立一個只讀數據

複製代碼

let state=readonly({name:'ma'，age:{num:18}})  //建立一個只讀數據,name是隻讀，num不受影響

複製代碼

isReadonly 判斷是不是隻讀數據

isReadonly(state)//返回true或false
複製代碼

Vue.prototype 替換爲 config.globalProperties

在 Vue 2 中， Vue.prototype 一般用於添加全部組件都能訪問的 property。

在 Vue 3 等同於config.globalProperties。這些 property 將被複制到應用中做爲實例化組件的一部分。

// 以前 - Vue 2
Vue.prototype.$http = () => {}
// 以後 - Vue 3
const app = createApp({})
app.config.globalProperties.$http = () => {}

複製代碼

nextTick 在vue3中使用

import { nextTick } from 'vue'

nextTick(() => {
  // 一些和DOM有關的東西
})
複製代碼

註冊組件

// 3.x
import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('button-counter')
    return () => h(ButtonCounter)
  }
}
複製代碼

支持綁定多個v-model

例如：

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

複製代碼

這也能夠做爲 .sync 修飾符的替代
.sync做用 子組件更新父組件值 this.$emit('update:title', pageTitle) 不用在父組件聲明事件

vuex使用

import {useStore} from 'vuex'
const store=useStore()

//在使用的地方直接使用 至關於 vue2的this.store
store.state.collapse;
store.commit("hadndleCollapse", !collapse);
複製代碼

computed 計算屬性使用

import {computed} from 'vue'
setup(){
    let username=computed(()=>{
    let myname = localStorage.getItem("ms_username");
        return myname ? myname : name.value;
    })
}
複製代碼

至關於vue2

computed:{
    username(){
        let myname = localStorage.getItem("ms_username");
        return myname ? myname : name.value;
    }
}
複製代碼

router 使用

import {useRouter} from 'vue-router'
let router=useRouter()
//router 就至關於this.router
複製代碼

watch監聽

import {watch} from 'vue'
watch(
    ()=>state.count,//要監聽的值
    (new,old)=>{
        console.log(new)
        console.log(old)
    }
)
複製代碼

多個監聽

watch(
    ()=>[state.count,state.title],//要監聽的值
    ([newcount,oldcount],[newtitle,oldtitle])=>{
    }
)
複製代碼

onBeforeRouteUpdate 監聽路由 watch監聽路由已被廢棄

onBeforeRouteUpdate((to,from)=>{
            console.log(to,from)
        })
複製代碼

Teleport 將子節點渲染到存在於父組件之外的 DOM 節點\

<button @click="showToast" class="btn">打開 toast</button>
  <!-- to 屬性就是目標位置 -->
  <teleport to="#teleport-target"> <div v-if="visible" class="toast-wrap"> <div class="toast-msg">我是一個 Toast 文案</div> </div> </teleport>

複製代碼

個人博客

github vue3+vite2後臺管理模板+配置 axios router vuex element++，登陸，+麪包屑，側邊欄