setup 和computed 计算属性 ，
setup一般表示值类型的比较多
<h1>{{count}}</h1>
<h2>{{computedFncount}}</h2>
<button @click="addCount">添加number</button>
setup () {
const count = ref(0)
// 计算熟悉
const computedFncount = computed(()=>{
return count.value *2
})
const addCount = ()=> {
count.value ++
}
return {
count,
addCount,
computedFncount
}
}
vue2.0到3.0对应事件变化，和响应式升级对象之后的变化
事件2-3的变化
image.png
在vue2到3的过程中，响应式3.0可以直接修改数组和对象的值可以发生改变，vue2.0只有在data里面描述的属性才可以响应式
image.png
vue2.0-3.0 响应式的变化
image.png
reactive(描述1个响应式的对象)toRefs的运用
正常情况被解构，就会变成普通的js类型，不是响应式类型，就不会改变值
image.png
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<h1>{{count}}</h1>
<h2>{{computedFncount}}</h2>
<button @click="addCount">添加number</button>
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { computed,ref,reactive,toRefs } from 'vue';
interface DataProps {
count: number;
addCount : ()=> void ;
computedFncount : number;
}
export default {
setup () {
const data:DataProps = reactive({
count : 0 ,
addCount : ()=>(data.count ++),
computedFncount:computed(()=> data.count * 2)
})
const refData = toRefs(data)
return {
...refData
}
}
}
</script>
