Vue3正確的開啟方式（下）

import  from 'vue'
const count = ref(10)
// 寫法一：預設返回getter函式 返回值為乙個唯讀的ref物件
const doublecount = computed(() => count.value * 2)
// 因為返回值為ref物件 取值需要拿它的value
console.log(doublecount.value) // 20
// 注意：這裡控制台會報警告，因為我們只設定了getter函式
doublecount.value = 20 // warn：readonly（唯讀）屬性 不可修改
// 寫法二：帶有getter和setter函式
const doublecount = computed()
console.log(doublecount.value) // 20
//  不會報警告，因為我們手動設定了setter函式
doublecount.value = 10  // 修改doublecount的值 觸發set函式
// 所以count的值為 10 - 2 = 8
console.log(count.value) // 8

import  from 'vue'
setup() )
// 第乙個引數寫成函式
watch(() => data.count, (newval, oldval) => )
// 寫法二：監聽ref物件
const count = ref(100)
// 第乙個引數寫成函式
watch(() => count, (newval, oldval) => )
// 寫法三：同時監聽多個值
const num = ref(200)
// 第乙個引數寫成陣列形式，代表要監聽的值
watch([count, num], (newvals, oldvals) => )
count.value = 300 // newvals: [300, 200]   oldvals: [100, 200]
num.value = 400   // newvals: [300, 400]   oldvals: [300, 200]
}

import  from 'vue'
setup() )
list.push(6) // newval: [1, 2, 3, 4, 5, 6]  oldval: [1, 2, 3, 4, 5]
}

不出意外，vue3 的 watch 同樣支援 deep、immediate 屬性，只是用法有所改變

const userinfo = reactive(
})// 傳入乙個物件作為第三個引數 可開啟deep/immediate
watch(() => userinfo, (newval, oldval) => , )
// 修改狀態深層屬性的值
userinfo.like.isbasketball = false // 列印日誌: false, false

看到日誌輸出兩個 false 是不是覺得**不對勁？

// 正確寫法（對引用資料型別進行深拷貝）
(這裡使用vue官方推薦的lodash深拷貝方法，當然你也可以手寫（手動狗頭）
import _ from 'lodash'
watch(() => _.clonedeep(userinfo), (newval, oldval) => )
// 修改狀態深層屬性的值 這裡就可以拿到上乙個狀態的值啦
userinfo.like.isbasketball = false // 列印日誌: false, true

假設我們要開發乙個 todolist，那麼在 vue2 的選項式（options）api 中，**大致長這樣：

export default ,}},
data() 
},computed: 
},methods: 
},mounted() 
}

很明顯可以看到，我們寫的**被瓜分到（data,computed, methods, mounted…）裡面，當元件小的時候還好，但當我們開發乙個大型元件的時候，就會發現我們的元件變得難以維護。

不知道大家有沒有這種體驗：當我們的元件**行數太多時，我們時常需要不斷地上下『跳轉』編譯器，找到相關的**塊去閱讀或編寫，這顯然開發體驗不是很好。

要是有一種東西可以解決這種開發中由於**太過於碎片化，而且邏輯不好復用的問題，是不是可以提高我們的開發效率？而這正是 vue3 推出組合式 api出現的原因。

在vue3 正確的開啟方式（上）裡，我們已經用到組合式 api 了，定義響應式物件（ref, reactive）…

補充一些關於生命週期和props的知識…

生命週期（vue3將不再需要：beforecreate、created，原因看下文）

// vue3中為了效能，很多api（方法）都支援tree shaking 
// 所以需要從vue中顯式匯入，生命週期也不例外
import  from 'vue'
// 第乙個引數props，第二個引數為上下文（包括slots，attrs，emit）
setup(props, context) ),
// 其他的鉤子類似，這裡就不一一枚舉了
...}

tips： vue3的setup是圍繞beforecreate和created生命鉤子執行的，所以你不需要顯式地定義這兩個鉤子函式，通俗易懂就是說之前在這兩個鉤子裡編寫的**現在你都應該編寫在setup函式中。

props（響應式引用，但解構會丟失響應式）

import  from 'vue'
// 接收跟vue2一樣 可進行型別校驗和預設值設定
props: ,
email: 
}// 第乙個引數props，第二個引數為上下文（包括slots, attrs, emit）
// 所以你可以使用解構的寫法，需要注意的是：attrs和slots是有狀態的物件
// 所以你應該以attrs.x 或 slots.xx 來使用，且它們是非響應式的。
setup(props, )  = props
console.log(username, email)
// 需要呼叫torefs()解決響應式丟失問題
const  = torefs(props)
}

provide(name, value) name(string型別)

inject(name, 預設值(可選)) inject的name和provide的name要相對應

parent.vue 父元件

// 子孫元件

child.vue 元件

inject的count:} inject的使用者名稱：} // 呼叫inject的changecount方法修改count count++ // 呼叫inject的changeusername方法修改使用者名稱修改使用者名稱

Vue3正確的開啟方式（下）

Vue3 的初次學習

vue3安裝你期待已久的Vue 3 正式發布啦

Phantomjs的正確開啟方式

Vue3正確的開啟方式（下）

Vue3 的初次學習

vue3安裝 你期待已久的Vue 3 正式發布啦

Phantomjs的正確開啟方式

相關推薦

vue3安裝你期待已久的Vue 3 正式發布啦