vue3入门教程

最新推荐文章于 2024-09-13 10:05:56 发布

宇智鸣佐

最新推荐文章于 2024-09-13 10:05:56 发布

阅读量969

点赞数 8

文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/weixin_42701636/article/details/139604141

版权

一篇文章入门VUE3

关于vue3

关于vue3

Vue3顾名思义是vue2的升级版本，Vue 2 已于 2023 年 12 月 31 日停止维护! 个人建议还在使用Vue2的小伙伴，赶紧学习Vue3~
以下教程是均本人学习vue3之后自己写的笔记教程，可供大家一起学习进步~
详细教程可进vue3官网

vue3安装

大家作为程序员，这里不做详细说明了，具体进vue3快速上手

setup函数

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
  	//与vue2不同的是声明数据类型，computed,watch等方法，生命函数，所有js逻辑；
  	//都写在这个里面；然后需要渲染的数据或者方法都需要 return；
  	const name = "赵云"
    // 将 ref 暴露给模板
    return { name  }
  }
}

ref 函数

特点：

操作基本数据类型。也可以操作复杂数据类型，例如：对象（object），数组（array）；
-ref本质是拷贝粘贴原数据，修改数据不影响原数据，当ref里的值发生改变，视图层会自动更新；
一般建议使用ref操作基本数据类型，例如：数字（number），字符串（string）；

<template>
  <div>{{num}}</div>
</template>


import { ref } from 'vue' //模块引入，必要

export default {
  setup() {
    const num = ref(0) //基本数据声明
    
    // 返回视图层渲染,当num变化时，视图层会伴随更新；
    return { num }
  }
}

reactive函数

定义操作复杂数据类型，例如数组，对象；
不能定义普通基本数据类型；
可响应深层次的数据，例如多维数组；
返回一个响应式的proxy对象；

<template>
  <div>年龄：{{obj.name}}</div>
  <div>信息：{{obj.info.age}}</div>
  <button @click="changeName">更新数据</button>
  <button @click="changeAge">更新深层数据</button>
</template>

import { reactive } from 'vue' //模块引入，必要

export default {
  setup() {
    //数据声明;
    const obj = reactive({
      name: "李白"，
      info:{
      	age: 50,
      	high: 175
      }
    }) 
	
	//函数声明
    function changeName(){
      obj.name = "赵云" //修改数据，渲染层同步响应；
    }
    function changeAge(){
      obj.info.age= 60 //修改深层数据，渲染层同步响应；
    }
    
    // 返回视图层渲染；
    return { obj , changeName ，changeAge}
  }
}

toRef 函数

可以创建一个响应式数据；
引用原数据，修改数据会影响原数据，不会更新视图层；

<template>
  <div>年龄：{{obj.name}}</div>
  <div>信息：{{obj.age}}</div>
  <button @click="changeAge">更新数据</button>
</template>

import { toRef } from 'vue' //模块引入，必要

export default {
  setup() {
    //数据声明;
    const obj = toRef({
      name: "李白"，
      age: 50
    }) 
	
	//函数声明
    function changeAge(){
      obj.age= 60 //修改原数据，但不更新渲染层；
    }
    
    // 返回视图层渲染；
    return { obj ，changeAge}
  }
}

toRefs 函数

用于批量设置多个数据为响应式数据；
修改原数据会影响原数据，但是不会更新视图层；
toRefs可与响应式数据交互，更加方便处理视图层数据；

<template>
  <div>年龄：{{res.name.value}}</div>
  <div>信息：{{res.age.value}}</div>
</template>

import { toRefs } from 'vue' //模块引入，必要

export default {
  setup() {
    //与响应式数据配合使用;
    const obj = reactive({
      name: "李白"，
      age: 50
    }) 
	const res = toRefs(obj)
    
    // 返回视图层渲染；
    return { res }
  }
}

但是一般不建议这样使用，可以使用扩散运算符；

<template>
  <div>年龄：{{name}}</div>
  <div>信息：{{age}}</div>
</template>

import { toRefs } from 'vue' //模块引入，必要

export default {
  setup() {
    //与响应式数据配合使用;
    const obj = reactive({
      name: "李白"，
      age: 50
    }) 
    // 使用扩散运算符返回视图层渲染；
    return { ...toRefs(obj) }
  }
}

computed 计算属性

与vue2一致，用来监听数据变化;

import { computed } from 'vue' //模块引入，必要

export default {
  setup() {
    const num1 = 1
    const num2 = 2
    const name1 = "李白"
    const name2 = "赵云"
    const obj = reactive({num1,num2}) 
    const obj2 = reactive({name1,name2})
    // 使用computed监听数据变化
    //可以写多个computed监听不同数据变化
    const sum = computed(()=>{
	  return obj.num1 + obj.num2
	})
	
	const strSum = computed(()=>{
	  return obj.name1 + obj.name2
	})
    return { sum , strSum }
  }
}

watch 侦听器

与vue2一致，用来侦听数据变化;

<template>
  <div>{{num1}}</div>
  <div>{{num2}}</div>
  <div>{{age.num}}</div>
  <button @click="num1++">更新num1数据</button>
  <button @click="num2++">更新num2数据</button>
</template>

import { ref , watch } from 'vue' //模块引入，必要

export default {
  setup() {
    const num1 = ref(0)
    const num2 = ref(1)
    const obj = reactive({
      name: "李白"，
      age: {
	    num: 20
	  }
    }) 
    
    //侦听一个ref数据变化
    watch(num1,(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    })
    
    //侦听多个ref数据变化
    watch([num1,num2],(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    })
    
    //侦听整体reactive数据只能侦听到最新结果，上一次数据无法监听；
    //但是侦听某一个reactive数据，可返回最新结果和上一次结果；
    watch(()=>obj.age.num,(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    },{immediate: true}) //{immediate: true} 进入页面立即监听
    return { num1 , num2 , ...toRefs(obj)}
  }
}

watchEffect 侦听器

watchEffect在组件初始化就会执行一次监听，watch需要指定 immediate: true 开启；
watch可以获取到新值和旧值，但是watchEffect不可以；
watchEffect不需要指定需要监听的属性，他会自定监听所有能访问到的响应式属性；

<template>
  <div>{{num1}}</div>
  <div>{{num2}}</div>
  <div>{{age.num}}</div>
  <button @click="num1++">更新num1数据</button>
  <button @click="num2++">更新num2数据</button>
</template>

import { ref , reactive , watchEffect } from 'vue' //模块引入，必要

export default {
  setup() {
    const num1 = ref(0)
    const num2 = ref(1)
    const obj = reactive({
      name: "李白"，
      age: {
	    num: 20
	  }
    }) 
   
    const res = watchEffect(()=>{
      //第一次进入和每一次页面所有响应式属性的变化都会自动监听；
      console.log(num1,num2 ,obj.age.num ) 
    })
    return { num1 , num2 , ...toRefs(obj)}
  }
}

shallowRef 和 shallowReact

shallowRef 只能处理基本类型数据。ref可以处理所有数据类型，但是只建议处理基本数据类型；
shallowReact 只处理第一层数据；

<template>
  <div>{{age1.num}}</div>
  <div>{{age2.num}}</div>
  <button @click="numBtn">更新shallowRef数据</button>
  <button @click="objBtn">更新shallowReact数据</button>
</template>

import { ref , reactive , watchEffect } from 'vue' //模块引入，必要

export default {
  setup() {
    const obj1 = shallowRef({
      name1: "赵云",
      age1: {
        num: 30
      }
    })
    const obj2 = shallowReact({
      name2: "李白"，//第一层
      age1: {
	    num: 20 //第二层
	  }
    }) 
  
   function numBtn(()=>{
     obj1.age1.num++ //无法修改，只能修改基本数据类型，不能修改复杂数据类型，例如对象，数组
   })
   function objBtn(()=>{
     obj2.age2.num++ //无法修改，只能修改第一层数据；
   })
    return {...toRefs(obj1) , ...toRefs(obj2)}
  }
}

组件传值

这里只介绍其中一种

import { ref , reactive , provide,inject，ref} from 'vue' //模块引入，必要
/// 进入页面传值
//父组件
const info = reactive({name: "赵云"，age: 30)
provide('fatherInfo' , info) //传值

//子组件
const res = inject('fatherInfo')//接值

/// 点击传值 调用子组件的方法
<compon ref="val"> //子组件引入，使用ref调用
const val = ref()
const info2 = reactive({name: "李白", age: 60})
function btn(){
  val.value.recive(info2) //recive是子组件方法
}

生命周期函数

//1、setup() : 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

//2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

//3、onMounted() : 组件挂载完成后执行的函数；

//4、onBeforeUpdate(): 组件更新之前执行的函数；

//5、onUpdated(): 组件更新完成之后执行的函数；

//6、onBeforeUnmount(): 组件卸载之前执行的函数；

//7、onUnmounted(): 组件卸载完成后执行的函数；

//8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

//9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

//10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。


                    
export default {
  setup() {
    onBeforeMount(()=>{
    	console.log("组件挂载到节点上之前执行的函数")
    })
    onMounted(()=>{
    	console.log("组件挂载完成后执行的函数")
    })
    onBeforeUpdate(()=>{
    	console.log("组件更新之前执行的函数")
    })
    onUpdated(()=>{
    	console.log("组件更新完成之后执行的函数")
    })
    onBeforeUnmount(()=>{
    	console.log("组件卸载之前执行的函数")
    })
    onUnmounted(()=>{
    	console.log("组件卸载完成后执行的函数")
    })
    onActivated(()=>{
    	console.log("被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行")
    })
    onDeactivated(()=>{
    	console.log("比如从 A 组件，切换到 B 组件，A 组件消失时执行")
    })
    onErrorCaptured(()=>{
    	console.log("当捕获一个来自子孙组件的异常时激活钩子函数")
    })
  }
}