关于Vue3 ，看这一篇文档你就会用了

随着Vue3的到来，公司的新项目全部进行了升级，相比于Vue2，语法上个人觉得更简洁，更容易通俗易懂。首先安装vue3项目，这里我使用vite进行安装（强烈推荐，启动速度贼快）

npm create vite@latest

然后执行

cd vite-project
npm install
npm run dev

1.定义基本类型、引用类型数据，使用ref跟reactive

<template>
  <h1>{{ msg }}</h1>
  <h2>{{ data.msg }}</h2>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const msg = ref('hello world')
const data = reactive({
  msg: 'hello vue3'
})
</script>
<style scoped></style>

1）修改ref跟reactive的值

<template>
  <h1>{{ msg }}</h1>
  <h2>{{ data.msg }}</h2>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const msg = ref('hello world')
const data = reactive({
  msg: 'hello vue3'
})
// 修复ref 定义的变量，需要用.value的形式
msg.value = 'hello world1'
// 修改data的数据，则直接使用data.的语法即可
data.msg = 'hello vue3 and vite'
</script>
<style scoped></style>

备注：对于常量来说 ，我们也可以直接使用const/let 来定义，但是用const/let定义的无响应式功能

2.组件的引用

<template>
  <h1>{{ msg }}</h1>
  <h2>{{ data.msg }}</h2>
  <h3>{{ test }}</h3>
  <HelloWorld />
</template>
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue';
import { ref, reactive } from 'vue'
const msg = ref('hello world')
const data = reactive({
  msg: 'hello vue3'
})
// 修复ref 定义的变量，需要用.value的形式
msg.value = 'hello world1'
// 修改data的数据，则直接使用data.的语法即可
data.msg = 'hello vue3 and vite'
let test = 'test'
</script>
<style scoped></style>

在<script setup lang="ts">下，直接使用，不需要放到components进行注册，非常简洁

3.父子组件传参

1.使用v-bind模式
父组件，father.vue

<template>
  <Child :msg="msg" />
</template>
<script setup lang="ts">
import Child from './components/child.vue'
import { ref } from 'vue'
const msg = ref('hello world')
</script>

子组件: child.vue

<template>
    <h1>{{ props.msg }}</h1>
</template>
<script setup lang="ts">
import { defineProps } from "vue";
const props = defineProps({
    msg: {
        type: String,
        default: ''
    }
})
</script>

2.使用v-model的形式

<template>
    <h1>{{ value }}</h1>
</template>
<script setup lang="ts">
import { defineProps, computed, defineEmits } from "vue";
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
const value  = computed({
    get: ()=> {
        return props.modelValue
    },
    set: (v:any)=> {
       emits('update:modelValue', v)
    }
})
</script>

对于子组件不改变父组件传过来的值，使用v-bind的形式更简洁

4.事件

<template>
  <h2 @click="handelClick">{{ msg }}</h2>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const msg = ref('点击事件')
const handelClick = ()=> {
  msg.value="我点击了"
}
</script>

5.生命周期

<template>
  <h2 @click="handelClick">{{ msg }}</h2>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onUpdated, onUnmounted } from 'vue'
const msg = ref('点击事件')
const handelClick = ()=> {
  msg.value="我点击了"
}
// 挂载前
onBeforeMount(()=> {
  console.log('onBeforeMount')
})
// 挂载
onMounted(()=> {
  console.log('onMounted')
})
// 更新
onUpdated(()=> {
  console.log('onUpdated')
})
// 卸载
onUnmounted(()=> {
  console.log('onUnmounted')
})
</script>

5.computed语法

computed在vue3有2种写法
1）

<template>
  <h2>{{ value1 }}</h2>
</template>
<script setup lang="ts">
import { computed } from 'vue'
const value1 = computed(() => {
  return 'hello world'
})
})
</script>

这种情况下，跟vue2是一样的写法

2）

<template>
  <input v-model="value" />
</template>
<script setup lang="ts">
import { computed } from 'vue'
const value = computed({
  get: () => {
    return '123'
  },
  set: (v: any) => {
    return v
  }
})
</script>

这种写法，是建立在需要修改computed的定义的值，通常搭配input标签一起使用。

6.watch语法

vue3的watch 有3个参数，watch(WatcherSource, Callback, [WatchOptions])
参数：
WatcherSource：想要监听的响应式数据。
Callback：执行的回调函数，入参（newValue,oldValue）。
[WatchOptions]：deep、immediate、flush可选。
也有2种写法，如下：

<template>
  <h2 @click="handelClick">{{ count }}</h2>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
const count = ref(1)
const handelClick = () => {
  count.value = 2
}
watch(count, (newValue: any, oldValue: any) => {
  console.log('count:', newValue, oldValue)
}, { deep: true })

watch(()=>count, (newValue: any, oldValue: any) => {
  console.log('count:', newValue.value, oldValue.value)
}, { deep: true })

</script>

7.父组件调用子组件方法

child.vue

<template>
    <h1>{{ count }}</h1>
</template>
<script setup lang="ts">
import { ref, defineExpose } from "vue";
const count = ref(1)
const childClick = () => {
    count.value = 2
}
defineExpose({ childClick })
</script>

父组件

<template>
  <h1 @click="callChildMethods">调用子组件方法</h1>
  <child ref="childRef" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import child from './components/child.vue'
const childRef = ref()
const callChildMethods = () => {
  childRef.value.childClick()
}
</script>

8.css使用js变量

<template>
  <h1 class="h1">调用子组件方法</h1>
  <child ref="childRef" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const color = ref('#eee')
</script>
<style>
.h1 {
  color: v-bind(color);
}
</style>