Vue3教程

参考资料

vue2教程请看下面链接：

Vue2速成手册

vue官方网站

1 setup语法糖

1.1 vue2中的写法

<template>
  <h1>Hello vue3h1>
  {{ msg }}
  <button @click="changeMsg('fsa')"> 修改msg button>
template>


<script>
	export default {
	    data(){
	      return {
	        msg: "vue2写法"
	      }
	    },
	    methods: {
	      changeMsg(val){
	        this.msg = val;
	      }
	    } 
  	}
script>

1.2 setup语法糖在vue3中使用

<template>
  <h1>Hello vue3h1>
  {{ msg }}
  <button @click="changeMsg('fsa')"> 修改msg button>
template>


<script setup lang="ts"> // 默认还是js，但是vue3建议用ts
  // 这里面正常写vue逻辑就好了
script>

2 ref reactive 事件

2.1 ref

需要响应式的常量，但是使用或者赋值时需要xxx.value

<template>
  <h1>Hello vue3h1>
  {{ msg }}
  <button @click="changeMsg('fsa')"> 修改msg button>
template>


<script setup>
  import {ref} from "vue"
  // 常量
  const msg = ref("new MSG!")
  // 直接定义方法
  const changeMsg = (val) => {msg.value = val}
script>

2.2 reactive

需要响应式的对象或者数组，可直接使用或赋值,不需要使用xx.value

<template>
  <h1>Hello vue3h1>
  {{ msg }}
  <button @click="changeMsg('fsa')"> 修改msg button>
  
  <hr>
  <h2>学生信息：h2>
  {{ studentInfo.id }}
  <button @click="changeID"> 修改ID button>
  {{ studentInfo.name }}
  <button @click="changeName"> 修改姓名 button>
  {{ studentInfo.gender }}
  <button @click="changeGender"> 修改性别 button>
  {{ studentInfo.birthday }}
  <button @click="changeBirthday"> 修改生日 button>
template>


<script setup>
  import {ref, reactive} from "vue"
  const msg = ref("new MSG!")
  const studentInfo = reactive({
    id: 1,
    name: "张三", 
    gender: "男",
    birthday: "2023-01-01"
  })
  const changeMsg = (val) => {msg.value = val}
  const changeID = () => {studentInfo.id=2}
  const changeName = () => {studentInfo.name="李四"}
  const changeGender = () => {studentInfo.gender="女"}
  const changeBirthday = () => {studentInfo.birthday="1990-01-01"}
script>

2.3 事件：在setup script中，直接定义事件，不需要像vue2那样在method中定义

上面的例子中已经有了。不多写

3 computed & watch & watchEffect

3.1 computed

计算函数

<template>
  <div>
    <p>{{ firstName }}p>
  	<p>{{ lastName }}p>
  	<p>{{ fullName }}p>
  div>
	
template>

<script setup>
  import {ref, computed} from "vue"
	const firstName = ref("kobe")
  const lastName = ref("bryant")
  const fullName = computed(()=>{return firstName.value+ " " +lastName.value})
script>

3.2 watch

监听函数，可监听常量和引用变量，可传immediate和deep。可监听对象也可只监听对象的某个属性

<template>
  <div>
    <p>{{ firstName }}p>
  	<p>{{ lastName }}p>
  	<p>{{ fullName }}p>
    
    <p>
      {{ msg }}
    p>
    
    <button @click="changeName"> 修改名字 button>
  div>
	
template>

<script setup>
  import {ref,reactive, computed, watch, watchEffect} from "vue"
	
  const msg = ref()
  
  const firstName = ref("kobe")
  const lastName = ref("bryant")
  const fullName = computed(()=>{return firstName.value+ " " +lastName.value})
  
  const changeName = ()=>{firstName.value="testing"}
  
  watch(firstName,(next, pre)=>{
    msg.value = "变量：firstName" + "从" + pre + "变成了" + next; 
  })
  
  const studentInfo = reactive({
    "id": '10001',
    "name": "李四"
  })
  watchEffect(()=>{
    const n = studentInfo.name
    msg.value = "studentInfo 里面的name属性被修改了"
  })
  
script>

3.3 watchEffect

watchEffect：跟watch差不多，但是watchEffect不需要说明监听谁，用到谁就监听谁（详情见下）

4 生命周期的改变

看一下vue2的生命周期在vue3中的表现

beforeCreate -> 没了
created -> 没了
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

<script setup lang="ts">
import {
  onBeforeMount,
  onMounted,
  onUpdated,
  onBeforeUpdate,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured
} from 'vue'

onBeforeMount(() => {
  console.log('挂载前')
})
onMounted(() => {
  console.log('挂载')
})
onBeforeUpdate(() => {
  console.log('更新前')
})
onUpdated(() => {
  console.log('更新')
})
onBeforeUnmount(() => {
  console.log('销毁前')
})
onUnmounted(() => {
  console.log('销毁')
})
onActivated(() => {
  console.log('kee-alive激活本组件')
})
onDeactivated(() => {
  console.log('kee-alive隐藏本组件')
})
onErrorCaptured(() => {
  console.log('错误捕获')
})
script>

5 父子组件通讯

5.2 vue2中使用props，this.$emits

5.3 vue3中使用defineProps defineEmits

父组件

<script setup lang="ts">
import { ref } from 'vue'
import Dialog from './Dialog.vue'

const msg = ref('我是msg')
const changeMsg = (val: string) => {
  msg.value = val
}
script>

<template>
// 传进子组件
<Dialog :msg="msg" @changeMsg="changeMsg" />
template>

子组件

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

// 注册父传子的props
const { msg } = defineProps({
  msg: {
    type: String,
    required: true
  }
})

// 注册父传子的事件
const emits = defineEmits(['changeMsg'])
const handleClick = () => {
  // 修改父组件的值
  emits('changeMsg', '修改msg')
}

script>

<template>
  <div @click="handleClick">{{ msg }}div>
template>

5.3 defineExpose

这个API主要主要作用是：将子组件的东西暴露给父组件，好让父组件可以使用

子组件

<script setup>
import { ref } from 'vue'

const msg = ref('hello vue3!')
function change() {
  msg.value = 'hi vue3!'
  console.log(msg.value)
}
// 属性或方法必须暴露出去，父组件才能使用
defineExpose({ msg, change })
script>

父组件

<script setup>
import ChildView from './ChildView.vue'
import { ref, onMounted } from 'vue'

const child = ref(null)
onMounted(() => {
  console.log(child.value.msg) // hello vue3!
  child.value.change() // hi vue3!
})
script>

<template>
  <ChildView ref="child">ChildView>

6 全局API

全局API
需要注意几个点：

1、vue3已经没有filter这个全局方法了
2、vue.component -> app.component
3、vue.directive -> app.directive
4、之前Vue.xxx现在都改成app.xxx