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

image.png

onRenderTracked onRenderTriggered调试//

watch