下載 vue-next
- github 中下載
- 安裝依賴(lài)：yarn or npm install
- yarn dev 生成
packages\vue\dist\vue.global.js文件
復(fù)制出這個(gè)文件，就可以開(kāi)始體驗(yàn)了
setup
setup Composition API的入口點(diǎn)
在beforeCreate掛接之前被調(diào)用
返回一個(gè)對(duì)象，則該對(duì)象上的屬性將合并到組件模板的渲染上下文中（類(lèi)似2.0中proxy(vm,_data, key)）
還可以返回一個(gè)render函數(shù)
參數(shù)
后續(xù)更新
返回值
setup() {
const count = ref(0)
const object = reactive({ foo: 'bar' })
return {
count,
object
}
or
return () => h('div', [object .foo, count .value])
}
reactive
響應(yīng)式數(shù)據(jù)
類(lèi)似之前的 data
<div id="app">
<span>{{ state.count }}</span>
</div>
const { reactive, createApp } = Vue
// 創(chuàng)建锻离、掛載
createApp({
const state = reactive({
count: 0
})
setup: () => {
return {
state
}
}
}).mount('#app')
運(yùn)行結(jié)果
watchEffect
類(lèi)似于 watch
當(dāng)依賴(lài)的數(shù)據(jù)發(fā)生變化時(shí)浪南，執(zhí)行該方法
會(huì)自動(dòng)運(yùn)行一次
<div id="app">
<span>{{ state.count }}</span>
<br />
<p id="print"></p>
<button @click='handleAdd'>Add</button>
</div>
const { reactive, createApp, watchEffect, computed } = Vue
// 創(chuàng)建墅垮、掛載
createApp({
// 響應(yīng)式數(shù)據(jù)
// 類(lèi)似之前的 data
const state = reactive({
count: 0
})
// 類(lèi)似于 watch
// 當(dāng)依賴(lài)的數(shù)據(jù)發(fā)生變化時(shí)氨肌，執(zhí)行該方法
// 會(huì)自動(dòng)運(yùn)行一次
watchEffect(() => {
console.log('watchEffct')
document.querySelector('#print').innerHTML = `count is ${state.count}`
})
// // 監(jiān)聽(tīng)多個(gè)
const stop = watchEffect(() => {
console.log(`count is ${state.count}`)
})
setup: () => {
return {
state,
// method
handleAdd: () => {
state.count++
if (state.count === 3) stop()
}
}
}
}).mount('#app')
運(yùn)行結(jié)果
computed
<div id="app">
<span>{{ state.count }}</span>
<br />
<p id="print"></p>
<span>{{ `double ${double}` }}</span>
<br />
<button @click='handleAdd'>Add</button>
</div>
const { reactive, createApp, computed } = Vue
// 創(chuàng)建开泽、掛載
createApp({
setup: () => {
// 響應(yīng)式數(shù)據(jù)
// 類(lèi)似之前的 data
const state = reactive({
count: 0
})
return {
state,
// computed
// 函數(shù)形式
double: computed(() => state.count * 2),
// or
// get set 形式
//double: computed({
// get() { return state.count * 2 },
// set(value) { state.count = value }
// })
// method
handleAdd: () => {
state.count++
// double.value++
}
}
}
}).mount('#app')
運(yùn)行結(jié)果
ref 引用
不同于之前的 ref
老版本是組件實(shí)例的引用 or dom 節(jié)點(diǎn)
新版?zhèn)魅胍粋€(gè)值返回一個(gè)響應(yīng)式的對(duì)象
<div id="app">
<!-- 使用時(shí) 自動(dòng)讀取 value 屬性 -->
<span>{{ num }}</span>
<br />
<button @click='handleAdd'>Add</button>
</div>
const { reactive, createApp, ref } = Vue
// 創(chuàng)建捂寿、掛載
createApp({
setup: () => {
// 返回一個(gè) { value: 100 }
const num = ref(100)
return {
num,
// method
handleAdd: () => {
// 設(shè)置值時(shí) 必須改變 value 屬性
num.value++
}
}
}
}).mount('#app')
運(yùn)行結(jié)果
readonly
<div id="app">
<span>{{ state.count }}</span>
<br />
<button @click='handleAdd'>Add</button>
</div>
createApp({
setup() {
const state = readonly(reactive({
count: 1
}))
const handleAdd = () => {
state.count++
}
return {
state,
handleAdd
}
}
}).mount('#app')
運(yùn)行結(jié)果
watch
與 Vue.$watch 等效
<div id="app">
<span>{{ state.count }}</span>
<br />
<button @click='handleAdd'>Add</button>
</div>
createApp({
setup() {
const state = reactive({
count: 1
})
const num = ref(0)
const handleAdd = () => {
state.count++
num.value++
}
// 第一參數(shù)需要監(jiān)聽(tīng)的對(duì)象
// 第二個(gè)參數(shù)回調(diào)函數(shù)
// 觀察一個(gè)值
watch(() => state.count, (count, preCount) => {
console.log('count:')
console.log(count)
console.log('preCount')
console.log(preCount)
})
// 還可以觀察 ref
watch(num, (count, preCount) => {
console.log('count:')
console.log(count)
console.log('preCount')
console.log(preCount)
})
// 觀察多個(gè)值
watch([() => state.count, num], (count, preCount) => {
console.log('count:')
console.log(count)
console.log('preCount')
console.log(preCount)
})
return {
state,
handleAdd
}
}
}).mount('#app')
運(yùn)行結(jié)果
【筆記不易口四，如對(duì)您有幫助，請(qǐng)點(diǎn)贊秦陋，謝謝】
