【Vue3】快速入门Vue3 -上篇

文章目录

001.setup的配置

setup为vue3的配置项，可以再其中写vue2的数据，方法等。该函数的返回值为一个对象，返回的对象可以使用于模板解析
也可以在vue3中使用vue2中的配置项，但vue2可以访问vue3配置的数据，而vue3中不能访问vue2的数据。
且在数据名相同的情况下，模板解析以vue3的为先

<script>exportdefault{name:'App',setup(){let name ='su'let age =21;let num =1;functionadd(){alert(`${name},${age},${num}`)}return{
      name,
      age,
      num,
      add
    }}}</script>

002.ref函数与reactive函数

• ref定义一个响应式的数据，语法const name = ref('su') , 这样su就为一个响应式的数据了，而name则变成了一个refimpl（应用实现的实例对象 - 简称：引用对象） 通过name.value可以修改name的值。且为响应式的数据。
• 在模板中只需要调用{{name}}即可，vue3会自动在模板中给我们调用.value属性。
• ref函数接收的数据可以为：基本类型/对象。基本类型仍然通过object.defineProperty的get和set来实现。对象类型则通过vue3中的reactive函数来实现数据响应式。
• reactive 函数： 定义一个对象类型的响应式数据。 语法const 代理对象 = reactive(源对象)/数组 返回的是一个代理对象（proxy） reactive定义的响应式数据是深层次的。内部基于es6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

003.vue3响应式原理

回顾vue2响应式实现原理：

<script>let person ={name:'su',age:21}let p ={};// 模拟vue2中的响应式 - 只有数据被读取或修改时为响应式，添加和删除时不为响应式。
Object.defineProperty(p,'name',{get(){
        console.log('数据被读取！！');return person.name;},set(value){
        console.log('数据被修改！！');
        person.name = value;}})</script>

vue3实现响应式原理：

<script>let person ={name:'su',age:21}//模拟vue3中的响应式let p =newProxy(person,{// 读取p的属性时调用// target - 代理的源对象， propName - 读取/修改的属性get(target,propName){
         console.log('数据被读取！');return Reflect.get(target,propName)},// 添加 / 修改 p的属性时 调用set(target,propName,value){
         console.log('数据被修改');
         Reflect.set(target,propName,value)},// 删除p的属性时调用deleteProperty(target,propName){
         console.log('数据被删除！');return Reflect.deleteProperty(target,propName);},})</script>

• 通过proxy（代理）拦截对象中任意属性的变化 - 属性的增删改查等
• 通过Reflect（反射）对被代理对象的属性进行操作

reactive对比ref

• 从定义角度：ref用来定义基本数据类型。reactive用于定义对象/数组类型数据
• 实现响应式原理：ref通过object.defineProperty的get和set来实现响应式（数据劫持）。reactive通过使用Proxy来实现，并通过Reflect操作源对象内部的数据。
• 从使用角度来说: ref操作数据需要用.value。读取时则直接使用。reactive在操作或读取数据时都不需要.value

004.setup的两个注意点

• setup的执行时期：在beforcreate之前执行，this为undefined
• setup的参数：

1. 第一个参数 - props：值为对象，包含组件外部传递进来且组件内部声明接收的数据。
2. 第二个参数 - context：上下文对象。attrs：值为对象，包含组件外部传递且在组件内部没有声明接收的数据，相当于vc身上的this.$attrs。slots：收到的插槽内容。相当于this.$slots。emit：分发自定义事件的函数，用于触发自定义事件并传递数据，相当于this.$emit

005.vue3中的计算属性

与reactive函数一样，vue3中的计算属性函数也需要引入。

 import {reactive,computed} from 'vue'

<script>setup(){let data =reactive({firstName:'三',lastName:'张'})// vue3 的计算属性 - 接收一个回调函数 返回值 - 简写// let fullName = computed(()=>{//   return `${data.lastName} - ${data.firstName}`// })//  vue3 的计算属性 - 接收一个回调函数 返回值 - 完整写法let fullName =computed({get(){return`${data.lastName}-${data.firstName}`},set(value){let arrName = value.split('-');
          data.lastName = arrName[0];
          data.firstName = arrName[1]}})return{
        data,
        fullName
      }}</script>

1. 简写形式：在computed中传递一个回调函数，返回一个值作为声明变量的值。此时的计算属性只能读，不能改
2. 完整形式：与vue2中的计算属性写法一致。有get和set。此时的计算属性可读可改

006.监视ref定义的数据

1. 与reactive函数一样，watch同样在vue3中也是一个暴露出来的函数。在setup中直接调用即可； watch可以接收三个参数：

• 第一个参数：要监听的数据
• 第二个参数：回调函数，接收两个参数，一个为监听的数据的新值，一个为旧值。
• 第三个函数：配置是否进行立即监听/深度监听。

<script>setup(){let sum =ref(0);let msg =ref('你好')functionadd(){
        sum.value = sum.value +1;}// vue3中的监视 - 第一个参数：监视的数据 第二个参数：回调函数 第三个参数：其余配置项-如immediate，deep等配置//  监视一个数据时// watch(sum,(newValue,oldValue)=>{//   console.log(`新值：${newValue}，旧值：${oldValue}`);// },{immediate:true})// 监视两个数据时watch([sum,msg],(newValue,oldValue)=>{
        console.log(`新值：${newValue}，旧值：${oldValue}`);},{immediate:true})return{
        sum,
        msg,
        add
      }}</script>

007.监视reactive定义的数据

• 监听reactive定义的数据时

1. 在vue3中监听reactive定义的数据时，当其中的数据发生改变，vue3不监听到旧的数据（oldValue无法正确读取）
2. 强制开启了深度监视（配置deep:false无效）

• 监听reactive中的其中某个值时 需要将值写为一个回调函数，返回值为监听的属性值。监视多个值同理写在一个数组里
• 特殊情况 监听reactive中的属性值仍为一个对象时，需要开启深度监视，且oldValue仍无法正确读取。

<script>setup(){let sum =ref(0);let msg =ref('你好')let person =reactive({name:'zhangsan',age:21,job:{j1:{salary:12}}})// vue3监听reactive定义的数据 -vue3中当数据改变时无法监听到旧的数据。 -强制深度监视watch(person,(newValue,oldValue)=>{
        console.log('新值：',newValue,'旧值：',oldValue);})// 监视reactive中的某个属性值 - 第一个参数写成一个回调函数，返回值为需要监视的数据，多个值写在一个数组里watch(()=>person.age,(newValue,oldValue)=>{
        console.log('新值：',newValue,'旧值：',oldValue);})// 监视reactive中的一个属性，且改属性仍为一个对象 - 需要开启深度监视 ，但oldValue仍无法正确读取watch(()=>person.job,(newValue,oldValue)=>{
        console.log('新值：',newValue,'旧值：',oldValue);},{deep:true})return{
        sum,
        msg,
        person
      }}</script>

008.watchEffect函数

与watch不同的是，watchEffect函数不用指明监视哪个属性，监视中的回调用到了哪个属性就监视哪个属性。且默认开启立即监视。

• watchEffect与computed有点类似。 所依赖的数据发生改变时，就会重新调用函数。 不同的是：computed更注重计算出来的值（函数的返回值），因此必须写返回值。而watchEffect更注重过程（函数的回调），因从不需要写返回值。

<script>setup(){let sum =ref(0);let msg =ref('你好')let person =reactive({name:'zhangsan',age:21,job:{j1:{salary:12}}})// 不用声明监视哪个数据，用到哪个数据就监视哪个。当数据发生改变时，重新执行该函数。默认开启立即监视watchEffect(()=>{let a = sum.value;let b = person.job.j1.salary;
        console.log('数据发生了改变！');})return{
        sum,
        msg,
        person
      }}</script>

009.vue3中的生命周期

vue3的生命周期对比vue3的生命周期基本相同。最大的不同就是vue2中的销毁在vue3中变为了卸载。
其次是vue2中是创建实例之后即为生命周期的开始。在创建完毕之后才挂载元素。在vue3中是一切准备就绪后才进入生命周期。
vue2生命周期官方图示：

vue3生命周期官方图示：

在vue3中使用生命周期钩子有两种方式：

1. 使用配置项，用法与vue2相同。

<script>import{ref}from'vue'exportdefault{name:'App',setup(){let sum =ref(0);return{
        sum
      }},// 使用配置项 写生命周期钩子beforeCreate(){
      console.log('beforeCreate');},created(){
      console.log('created');},beforeMount(){
      console.log('beforeMount');},mounted(){
      console.log('mounted');},beforeUpdate(){
      console.log('beforeUpdate');},updated(){
      console.log('updated');},beforeUnmount(){
      console.log('beforeUnmount');},unmounted(){
      console.log('unmounted');}}</script>

1. 使用组合式api，使用就引用，接收一个回调函数。在回调函数内写业务逻辑。

<script>import{ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted}from'vue'exportdefault{name:'App',setup(){let sum =ref(0);//使用组合式 APIonBeforeMount(()=>{
        console.log('onBeforeMount');}),onMounted(()=>{
        console.log('onMounted');}),onBeforeUpdate(()=>{
        console.log('onBeforeUpdate');}),onUpdated(()=>{
        console.log('onUpdated');}),onBeforeUnmount(()=>{
        console.log('onBeforeMount');}),onUnmounted(()=>{
        console.log('onUnmounted');})return{
        sum
      }},}</script>

010.自定义hook函数

在src目录下创建一个hooks文件夹，在该文件下写hook函数，当其他组件想使用时引入即可。即做到代码复用的效果。

• 本质为一个函数，把setup中的使用的组合式API进行封装。如：

import{reactive,onMounted,onBeforeUnmount}from'vue'exportdefaultfunction(){// 获取坐标点相关的数据let point =reactive({x:0,y:0})//  获取坐标点相关的方法functionsavePoint(event){
        point.x = event.clientX;
        point.y = event.clientY
    }// 获取坐标点相关的生命周期钩子onMounted(()=>{
        window.addEventListener('click',savePoint)})onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)})return point
}

封装好之后在任意一个组件中都可以使用。如:

<template><span>{{sum}}</span><br><button@click="sum++">+1</button><hr><h2>当前鼠标坐标：X:{{point.x}},Y:{{point.y}}</h2></template><script>import{ref}from'vue'import usePoint from'../hooks/usePoint'exportdefault{name:'App',setup(){let sum =ref(0);let point =usePoint()return{
        sum,
        point
      }},}</script><style></style>

• 类似于vue2中的mixin
• 自定义hook的优势：复用代码，让setup中的逻辑更清晰。

011.toRef和toRefs

作用：创建一个ref对象，其value的值指向另一个对象中的某个属性。
用法：
toRef

<script>import{reactive,toRef,toRefs}from'vue'exportdefault{name:'App',setup(){let person =reactive({name:'zhangsan',age:21,job:{j1:{salary:12}}})return{name:toRef(person,'name'),age:toRef(person,'age'),salary:toRef(person.job.j1,'salary')}}}</script>

toRefs

<script>import{reactive,toRef,toRefs}from'vue'exportdefault{name:'App',setup(){let person =reactive({name:'zhangsan',age:21,job:{j1:{salary:12}}})return{...toRefs(person)}}}</script>

应用：要将某个响应式对象中的某个属性单独提供给外部使用时。
扩展：toRefs与toRef的功能一致，但可以批量创建多个ref对象。