這是一篇包含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可以使用suspense
和default/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就好好查資料把它搞清楚咯!其實我前面看過這個了,只是人上...