vue的那些事

2022-08-12 00:48:18 字數 3458 閱讀 3946

這是一篇包含vue2以及vue3的一些知識點,瀏覽一下吧...

computed中的屬性是存在快取中的,只有所依賴的引數改了,才會重新計算一遍,不然不會計算。如果屬性不在computed裡修改,也不會做相應的更新

data() 

},computed:

},created()

//最終的text是4,而不是777

watch的兩種寫法:

直接寫函式

乙個物件,裡面包含handler函式

watch:,

b:,deep:true,//深度監聽

immediate:true//立即監聽

}}

mixins包含的是乙個物件陣列。mixins裡也可以使用週期函式,當混入的元件也包含相同的生命週期函式時,mixins的週期函式先執行。

mixins.js

export const mixin=,

mounted() ,

}元件:

import from '../mixins/mixins'

export default ,

mounted()

}結果為:mixins created->正常的created->mixins mounted->正常的mounted

這一組是同時出現,provide是定義在父元件上,inject定義在自元件上去獲取父元件傳遞的值。

可以是物件也可以是函式,return的值是物件

//父元件

provide: ,

//子元件

inject: ['text'],

component是內建的元件,可以通過is去指定渲染的是哪個元件

元素作為元件模板之中的內容分發插槽。元素自身將被替換。

父元件傳引數給自元件時,子元件接收的引數

型別:array/object

array:直接將父元件傳的引數寫入即可

object:引數如下

1.1 type:number/object/boolean/array/date/function/symbol

表示傳入的引數型別

1.2 default 預設值 any

1.3 required 是否必須 boolean

1.4 validator 檢查 function

子元件做了操作,觸發父元件的操作,但是並不需要自元件傳值給父元件

父元件:

emits: ['large'],

子元件:此時的$emit不需要再傳第二個值了,只需傳乙個引數,即事件名稱即可。

放大

子元件確實需要傳值給父元件

子元件:此時的$emit傳兩個引數,第乙個是事件名稱,第二個是value。

setup是新的組合api。

在beforecreated之前就會被呼叫

setup有2個引數,props和context

props

setup中的props是響應式的,傳入的值變化了,也會隨之改變,也可以通過watch或者watcheffect去監聽。

note:在setup時,不要解構props,會失去響應式

props是不可更改的。

context

context裡面包含了很多this的東西,但不包含props中定義的屬性

包含context.attrs/context.slots/context.emit(傳值可用,類似vue2中的this.$emit())。

reactive接收引數為物件

const object =reactive()
ref接收引數可以是值/物件

const count=ref(0)

console.log(count.value);//0

count.value++;

console.log(count.value);//1

在setup中使用ref的值時,需要用』.value』的方式去獲取相應的值

在template中,會自動解藕,所以不用』.value』的方式

computed預設返回乙個不能修改的ref物件

const countplus=computed(()=>count.value+1)

console.log(countplus.value)

countplus.value—;//報錯

傳入函式,會立即執行/響應,類似於vue的生命週期,類似react的useeffect

在setup中被呼叫時,會在元件解除安裝的時候,被自動清除。

vue3的路由需使用vue-router 4.x以上

package.json

"dependencies": ,

使用方法如下

route.js

import from 'vue-router'

const history=createwebhashhistory()

export const routes=createrouter({})

teleport可以手動將**塊插到某個標籤上

獲取當前元件的例項,類似vue2.x中的this

import  from 'vue'

setup()=getcurrentinstance();

ctx.$router//獲取路由

}

globalproperties(全域性變數)

main.js

import './index.css'

v-for

支援object遍歷

}

用於向後台獲取資料時,非同步獲取過程中的頁面展示的情況,vue2.x是用v-if去判斷。

vue3.x可以使用suspensedefault/fallback去處理,fallback為獲取資料過程中展示的**,default為有了資料做展示的**,**如下:

}

articles loading...

vue2.x乙個元件只能使用乙個v-model,vue3.x可以使用多個v-model

//template

props:,

setup(props,context)

return

}

關於Vue原始碼的那些事(一)

時代變遷,越來越多的需求對於開發人員的要求也越來越高,作為乙個前端開發人員,框架的運用自然是必不可少,選擇學習乙個好的框架,將成為面試的資本,國內vue的呼聲亦是愈發高漲,正所謂沒有進步,既是後退,本文就是乙個關於vue原始碼等隨筆筆記 在運用vue來開發專案的時候,其原理令人好奇,例如 v for...

關於VUE路由配置跳轉的那些事

1,使用路由前先在專案中安裝路由,命令 npm i vue router 2,在模組中使用 import vue from vue import vuerouter from vue router 引入依賴中的vue和vue router vue.use vuerouter 模組中安裝路由功能 3,...

remap的那些事

月14日 今天還在看啟動 看到target.c這裡。先說說target.c的職責。target.c檔案包含和目標初始化相關的 如remap設定 系統時鐘設定和儲存器加速模組設定等,以及irq和fiq的異常處理空函式。好吧,這裡 看到了remap就好好查資料把它搞清楚咯!其實我前面看過這個了,只是人上...