<script>
export default {setup(){console.log("steup")},beforeCreate(){console.log("beforeCreate")},created(){console.log("created")}
}
</script>

<template><div class="hello"><p>{{num}}</p><p>{{str}}</p><button @click="onChange">修改num</button></div>
</template>
<script>import {ref} from 'vue'
export default {setup(){let num = ref(333)let str = ref('fffff');let onChange = ()=>{num.value = 9999;}return{num,str,onChange}}
}
</script>

<template><div class="hello"><p>{{Orville's Ideas and Interests}}</p><button @click="onChange">修改name</button></div>
</template>
<script>import {reactive} from 'vue'export default {setup(){let obj = reactive({name:'tom',age:20});let onChange = ()=>{Orville's Ideas and Interests = "Json";}return{obj,onChange}}}
</script>

<template><div class="hello"><p>{{proNum}}</p><button @click="onChange">修改proNum</button></div>
</template>
<script>import {ref,computed} from 'vue'export default {setup(){const num = ref(5)const proNum = computed(() => num.value + 1)let onChange = ()=>{proNum.value += 10;}return{proNum,onChange}}}
</script>

<template><div class="hello"><p>{{num}}</p><button @click="onChange">修改proNum</button></div>
</template>
<script>import {ref,computed} from 'vue'export default {setup(){const num = ref(1)const proNum = computed({set:(val)=>{num.value = val+10;},get:()=>num.value})let onChange = ()=>{proNum.value = 10;console.log(num)}return{num,onChange}}}
</script>

<template><div class="hello"><p>{{readNum}}</p><button @click="onChange">修改readNum</button></div>
</template>
<script>import {ref,readonly} from 'vue'export default {setup(){const num = ref(1)let readNum = readonly(num)let onChange = ()=>{readNum.value = 10;}return{readNum,onChange}}}
</script>

<template><div class="hello"><p>{{num}}</p><p>{{state.name}}</p><button @click="onChange">修改num-name</button></div>
</template>
<script>import {ref,reactive,watch} from 'vue'export default {setup(){// 侦听一个 reactive  一个数据源const state = reactive({ name: 'tom' });watch(() => state.name,(name, prevName) => {console.log(prevName,name)});// 直接侦听一个 ref   一个数据源const num = ref(1);watch(num, (num, prevNum) => {console.log(prevNum,num)});// 侦听多个数据源watch([num,state], ([num,name], [prevNum,prevName]) => {console.log(prevNum,num+"-----"+prevName.name,name.name)});let onChange = ()=>{state.name = 'Json';num.value =  10;};return{state,num,onChange}}}
</script>

<template><div class="hello"><p>{{num}}</p></div>
</template>
<script>import {ref,watchEffect} from 'vue'export default {setup(){const num = ref(1);const stop = watchEffect(()=>{console.log(num.value)})setTimeout(()=>{num.value = 10},2000)// 停止侦听  调用stop 浏览器上不会打印 10stop();return{num}}}
</script>

与 2.x 版本生命周期相对应的组合式 API
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

<template><div class="hello"><p>{{num}}</p><button @click="onChange">修改num</button></div>
</template>
<script>import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'export default {setup(){onBeforeMount(() => {console.log('onBeforeMount!')});onMounted(() => {console.log('mounted!')});onBeforeUpdate(() => {console.log('onBeforeUpdate!')});onUpdated(() => {console.log('updated!')});onBeforeUnmount(() => {console.log('onBeforeUnmount!')});onUnmounted(() => {console.log('unmounted!')});const num = ref(1);let onChange = ()=>{num.value = 10;};return{num,onChange}}}
</script>