vue3.0第一篇

一、vue3.0解決問題

1，解決大型項目複雜組件，代碼重用問題。
2，代碼分散多處，閱讀性差
3，Mixin 混入； 缺點， 1,命名衝突，2，不清楚暴露出來的變量的作用，3，重用到其他component 經常會遇到問題

vue3.0安裝

1，npm install -g @vue/cli
vue --version 查看版本 @vue/cli 4.0.0 以上版本纔有vue3.0
vue create vue-demo 創建項目結構
上下鍵切換選項，空格選中

2，好用插件 eslint vetur

二、vue ref, reactive 使用

reactive 響應式數據
toRefs 轉成響應式

interface DataProps {
  count: number;
  double: number;
  increase: () => void，
  name: number
}
@click = increase
import { ref, computed, reactive, toRef, onMounted, onUpdated, watch } from 'vue'
setup() {
onMounted(() => {console.log('mounted')})
onUpdated(() => { })
  const count = ref(0)
  const double = computed(() => { return count.value *2 })
  const data: DataProps = reactive({
    count: 0,
    increase: () => {data.count++},
    double: computed(() => data.count*2),
    name: 1
   })
  data.name = 2
  const increase = () => {
    count.value++
  }
  return {
      count,
      increase,
      double
  }
const refData = toRefs(data)
   return {
      ...refData
    }
}

三、生命週期

beforeDestory -> beforeUnmount
destory ->onUnmounted

onRenderTracked onRenderTriggered調試//

watch