重学vue3.0 基础和对比

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>