vue3 0 正式版體驗

vue3 正式版本已經更新，再次入坑。

# 全域性安裝

#cd vue3-res
cnpm i
# 用 vscode 開啟

import vue from "vue"

})

vue2

vue3

beforecreate

setup()

setup() :開始建立元件之前，在beforecreate和created之前執行。建立的是data和method

created

setup()

beforemount

onbeforemount

元件掛載到節點上之前執行的函式。

mounted

onmounted

元件掛載完成後執行的函式。

beforeupdate

onbeforeupdate

元件更新之前執行的函式。

updated

onupdated

元件更新完成之後執行的函式。

beforedestroy

onbeforeunmount元件解除安裝之前執行的函式。

destroyed

onunmounted元件解除安裝完成後執行的函式

activated

onactivated

被包含在中的元件，會多出兩個生命週期鉤子函式。被啟用時執行。

deactivated

ondeactivated

比如從 a 元件，切換到 b 元件，a 元件消失時執行。

errorcaptured

onerrorcaptured

當捕獲乙個來自子孫元件的異常時啟用鉤子函式。

vue.component('searchinput', searchinputcomponent)

vue.directive('focus', focusdirective)
vue.use(localeplugin)

.component('searchinput', searchinputcomponent)

.directive('focus', focusdirective)

.use(localeplugin)

由於vue3.0的其他語法跟vue2.x的語法幾乎是完全相容的，所以接下來主要介紹使用composition-api

composition api 主要介紹一下幾個函式：

將傳入的物件生成新的深度響應式物件,其不等於原始物件

const obj = reactive()

將傳入的簡單資料值生成新的響應式物件

const count = ref(0)

console.log(count.value) // 0
count.value++
console.log(count.value) // 1

使用 getter 函式，並為從 getter 返回的值返回乙個不變的響應式 ref 物件。

const count = ref(1)

const plusone = computed(() => count.value + 1)
console.log(plusone.value) // 2
plusone.value++ // error

在響應式地跟蹤其依賴項時立即執行乙個函式，並在更改依賴項時重新執行它。

const count = ref(0)

watcheffect(() => console.log(count.value))
// -> logs 0
settimeout(() => , 100)

// 偵聽乙個getter

const state = reactive()
watch(
() => state.count,
(count, prevcount) => 
)// 直接偵聽乙個ref
const count = ref(0)
watch(count, (count, prevcount) => )

在setup函式使用 composition api：

import  from 'vue'

export default }},
setup(props, context) )
function add() 
//宣告週期函式
onmounted(() => )
onupdated(() => )
onunmounted(() => )
const refdata = torefs(data); // 保證後面結構後依然保持響應式
return 
},mounted() ,
methods:
}}

VUE 3 0 初體驗之路

目錄環境搭建 核心知識 在2020年9月中旬，vue.js發布了3.0正式版，在不久的將來，vue3.0 也終將成為大前端的必然趨勢，node版本要求 node.js8.9或更高版本 輸入node v檢視node版本 vue cli版本 達到vue cli4.5.0以上，可建立vue3.0的專案，支...

ThinkJS 3 0 正式版發布！

npm install g think cli正如之前所說，為了解決之前遺留的不足問題我們開發了新版本，下圖為我們新版的架構圖。除了引進了新的架構，對框架進行高度解構外，我們還增加了很多新的功能，優化了老版為人詬病的用法，下面就讓我們來具體看看有哪些更新吧。相較於之前使用自身整合架構，3.0 最大的...

React Suite v3 0 正式版發布

相信很多人會好奇，react suite 是什麼？react suite 是 hypers 前端團隊和 ux 團隊開源的一套基於 react 的 ui 元件庫，能夠幫助您快速構建乙個企業級應用。我們在服務於很多企業的過程中發現，不管是大企業，還是中小企業都有一套 或者希望有一套 自己的 vi 其中產...