本篇是基於vue2.0平臺,安裝 npm install vue-function-api --save
最近新出的是@vue/composition-api ，安裝npm install @vue/composition-api --save
學習參考文獻 ：
https://github.com/vuejs/composition-api/blob/HEAD/README.zh-CN.md
https://composition-api.vuejs.org/zh/#api-%E4%BB%8B%E7%BB%8D
<template>
<div id="app">
<img src="./assets/logo.png" />
<div>
<h1>{{hText}}</h1>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ double }},counut2 is :{{count2}}
</button>
<div>
<dl>
<dt>姓名：{{state.name}}</dt>
<dd>性別：{{ state.sex }}</dd>
<dd>年齡：{{ state.age }}</dd>
<dd>數量：{{ state.count }}</dd>
</dl>
</div>
<button @click="changeState">
更新State
</button>
<div>
這裏是一個計數器 >>> <span class="red">{{count2}}</span> <br>
十倍 >>> <span class="red">{{tenCount}}</span> <br>
一百倍 >>> <span class="red">{{computeCount['one']}}</span> <br>
一千倍 >>> <span class="red">{{computeCount['two']}}</span> <br>
<button @click="Add">
更新count2
</button>
</div>
</div>
<router-view />
</div>
</template>
<script>
import { reactive , ref , computed , toRefs} from 'vue-function-api'
export default {
name: 'App',
//注意，引入的vue-function-api 都 寫在setup(){} 函數裏
//結構 export default { setup(){ }, }
setup(props,context) {// 參數 非必傳
const resobj=toRefs({name:'Owen',age:20,childrens:[{name:'bigboy',age:6},{name:'smallboy',age:3}]}) // toRefs(obj)
console.log(resobj.name.value); // Owen
console.log(resobj.childrens.value[0].name);//bigboy
console.log(this)//獲取不到 是個 空對象 {}
const root = context.root; // 獲得Vue的實例
console.log(props);//
console.log(context);// 這個vue3獲取 不到 this，用context.root 代替this 取到Vue
//1.定義一個不需要改變的數據
const hText = 'vue3新特性'
//2.定義一個count的響應數據，並賦值爲0 ,使用ref()---創建響應值類型, 3.0使用proxy攔截劫持數據的
const count2 = ref(2) //取值的時候 count2.value
console.log(count2);//RefImpl {value:2}
console.log(count2.value) // 2 取值
//3.reactive(),用於創建響應式的對象或數組
const state = reactive({
name:'Owen',
sex:'men',
age:30,
count: 0,
// double: computed(() => state.count * 2) // 放在這裏不響應計算屬性
})
console.log(state)
const double = computed(() => state.count * 2) // 計算屬性
function increment() {
state.count++;
count2.value++
}
function changeState(){
state.count++;
state.age++;
}
//計算屬性computed()
const Add= () =>{
count2.value++
}
// 計算屬性，使用計算函數並命名，然後在 return 中導出即可
const tenCount = computed(() => {
return count2.value * 10
})
// 計算 多個 屬性，可以通過返回一個對象的方式來實現
const computeCount = computed(() => {
return {
'one': count2.value * 100,
'two': count2.value * 1000,
}
})
// 只有被return 的成員 才能被ui結構訪問（需要使用的 計算屬性，數據，方法）
return {
state,
increment,
double,
count2,
hText,
changeState,
tenCount,
computeCount,
Add
}
}
}
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2.生命週期：testLIfe.vue
<template>
<div class="home">
測試生命週期 >>> <span class="red">{{count}}</span> <br>
<button @click="countAdd">點擊加數字</button>
</div>
</template>
<script>
// 你需要使用到什麼生命週期，就引出來什麼生命週期
import {
onCreated,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeDestroy,
onDestroyed,
ref
} from 'vue-function-api'
export default {
// setup 函數，就相當於 vue 2.0 中的 created
// 4 生命週期： created--onCreated beforeDestroy--onBeforeDestroy destroyed--onDestroyed
//4.生命週期：vue2上+on beforeMount-onBeforeMount mounted-onMounted beforeUpdate-onBeforeUpdate updated--onUpdated
setup () {
const count = ref(0)
console.log(count.value)
onCreated(() => {
count.value++
console.log('onCreated', count.value)
})
// const count = ref(0)
// 其他的生命週期都寫在這裏
onBeforeMount (() => {
count.value++
console.log('onBeforeMount', count.value)
})
onMounted (() => {
count.value++
console.log('onMounted', count.value)
})
// 注意，onBeforeUpdate 和 onUpdated 裏面不要修改值，會死循環的哦！
onBeforeUpdate (() => {
console.log('onBeforeUpdate', count.value)
})
onUpdated (() => {
console.log('onUpdated', count.value)
})
onBeforeDestroy (() => {
count.value++
console.log('onBeforeDestroy', count.value)
})
onDestroyed (() => {
count.value++
console.log('onDestroyed', count.value)
})
// 定義一個函數，修改 count 的值。
const countAdd = () => {
count.value++
}
return {
count,
countAdd
}
},
mounted(){// 舊版的生命週期會先執行， 新舊版本不要混合用， 這個只是舉例
console.log('我是舊的mounted')
}
}
</script>