vite + vue3入门

1、通过脚手架vite

npm init vite hello-vue3 -- --template vue

2、vue-router和vuex需要使用4.0以上版本，使用与旧版本出入，详情见下面例子

• vue-router

import {createWebHashHistory, createRouter} from 'vue-router'
const history = createWebHashHistory()
const router = createRouter({
  history,
  routes: [{
    path: '/',
    name: 'hello',
    component: () => import('@/components/helloWorld.vue')
  }]
})
export default router

• vuex

// store/index.ts
import { createStore } from 'vuex'

interface State {
  userName: string
  taskList: any[]

}

export default createStore({
  state: {
    userName: '郝小娟',
    taskList: []
  },
  mutations: {

  }
})

// main.ts
import router from "./route/router";
import store from "./store/index";

app.use(router).use(store)

3、定义变量 (ref,reactive,ref,computed)

• 使用一 （return 出去的值，在dom模板 {{msg}}中正常使用）

<h1>{{ msg }}的年龄为{{age}}</h1>
<div>{{double}}</div>
<button @click="add">点我+1</button>

import { ref, computed, reactive } from 'vue'
setup() {
    // 简单类型
    const msg = ref('w王大和')
    const age = ref(18)
    let noData = ref(false)
    let waitNum = ref('')
    
    // 复杂类型
    const option = reactive({})
    let reportList = reactive([])
    
    // 方法
    function add() {
      age.value += 1
    }
    const double = computed(() => {
       return age.value
    })
    
    return { msg, age, noData, waitNum, add, double} 
}

• 使用二 （return 出去的值，在dom模板中{{state.msg2}}以对象形式使用）

<h1>{{ state.msg2 }}的年龄为{{state.age2}}</h1>
<div>{{state.double2}}</div>
<button @click="add2">点我+1</button>

import { computed, reactive } from 'vue'
setup() {
   
    // 复杂类型
    const state = reactive({
      msg2: '傻子',
      age2: 22,
      double2: computed(() => {
        return state.age2 * 2
      })
    })
    // 方法
    function add2() {
      state.age2 += 1
    }
    
    return { state, add2 } 
}

• 使用三 （ 使用toRefs, 转化成简单类型使用 同一）

<h1>{{ msg3 }}的年龄为{{age3}}</h1>
<div>{{double3}}</div>
<button @click="add3">点我+1</button>

import { toRefs, computed, reactive } from 'vue'
setup() {
   
    // 复杂类型
    const perObj = reactive({
      msg3: 'lisi',
      age3: 33,
      double3: computed(() => {
        return perObj.age3 * 3
      })
    })
    // 方法
    function add3() {
      perObj.age3 += 1
    }
    
    return { ...toRefs(perObj), add3 } 
}

4、父子组件 (props, context)

// 父组件 同 vue2一样使用
<content :msg="msg" :age="age" @showName="showName"></content>

components: {
    content
},
setup() {
    function showName () {}
    reeturn { showName }
}

// 子组件
<template>
  <div>我是子组件{{data.msg}}--{{data.age}}</div>
  <button @click="talkToFather">自组件通知父组件</button>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'content',
  props: {
    msg: String,
    age: ''
  },
  setup(props, context) {
    let data = ref(props)

    function talkToFather() {
      // setup周期 在dom挂载之前，所以没有this ，使用context
      console.log('----data', data)
      context.emit('showName', '我是' + data.value.msg)
    }
    return { data, talkToFather }
  }
}

</script>

5、watch

setup() {
    // 简单类型
    const age = ref(18)

    function add() {
      age.value += 1
    }
    // 不指定变量watch
    // watch(() => {
    //   console.log(msg.value + '--1-0--' + age.value)
    // })
    
    // 指定变量watch
    // watch(age, () => {
    //   console.log(msg.value + '--1-1--' + age.value)
    // })
    
    // 复杂类型
    const state = reactive({
      msg2: '傻子',
      age2: 22,
      double2: computed(() => {
        return state.age2 * 2
      })
    })
    function add2() {
      state.age2 += 1
    }
    
    // 不指定变量watch
    // watch(() => {
    //   console.log(state.msg2 + '--2-0--' + state.age2)
    // })
    
    // 指定变量watch
    watch(() => state.age2, (newVal, oldVal, clean) => {
      console.log('旧年龄是啥？=>' + oldVal + '新年龄是啥 => ' + newVal)
      console.log(state.msg2 + '--2-1--' + state.age2)
      clean(() => { console.log('clean')})
    })
    
    return { age, add, state, add2 } 
}

6、setup

• 简单说明

使用Composition API 的入口
在beforeCreate之前调用
在setup中没有this
返回对象中的属性刻在模板中使用

• 生命周期

1 - 开始创建组件---- - setup();
2 - 组件挂载到页面之前执行---- - onBeforeMount();
3 - 组件挂载到页面之后执行---- - onMounted();
4 - 组件更新之前---- - onBeforeUpdate();
5 - 组件更新之后---- - onUpdated();

-----------------------------------------

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

import { onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
setup() {
    console.log('----setup---1')

    onBeforeMount(() => {console.log('----setup---onBeforeMount---4')})
    onMounted(() => {console.log('----setup---onMounted---6')})
    onBeforeUpdate(() => {console.log('----setup---onBeforeUpdate')})
    onUpdated(() => {console.log('----setup---onUpdated')})
    onBeforeUnmount(() => {console.log('----setup---onBeforeUnmount')})
    onUnmounted(() => {console.log('----setup---onUnmounted')})

    return { }
  },
  beforeCreate() { console.log('page---beforeCreate---2') },
  created() { console.log('page---created---3') },
  beforeMount() { console.log('page---beforeMount---5') },
  mounted() {console.log('page---mounted---7')},
  beforeUpdate() { console.log('page---beforeUpdate') },
  updated() {console.log('page---updated') },
  beforeDestroy() {console.log('page---beforeDestroy')},
  destroyed() {console.log('page---destroyed')},

打印结果1，2，3，4，5，6，7

7、如果需要用上typescript

### 一、初始化
* 1、全局安装typescript cnpm install typescript -g
* 2、根目录下执行tsc --init  生成tsconfig.json文件

### 二、修改 main.js
* 1、将main.js重命名为main.ts，index.html中main.js的应用入口对应修改为ts
* 2、route、store、util等js文件，通通重命名为对应ts
* 3、根目录下添加xx.d.ts文件，用于识别vue文件
```
    declare module '*.vue' {
    import { Component } from 'vue';
    const component: Component;
    export default component;
}
```
* 4、vue文件中 script需要添加lang="ts"
* 5、根据错误提示配置tsconfig.json，只是报红，不影响编译