当前位置： 首页 > news >正文

【Vue3】快速入门Vue3 -上篇

news 来源：原创 2024/12/23 0:13:24

文章目录

    • 001.setup的配置
    • 002.ref函数与reactive函数
    • 003.vue3响应式原理
    • 004.setup的两个注意点
    • 005.vue3中的计算属性
    • 006.监视ref定义的数据
    • 007.监视reactive定义的数据
    • 008.watchEffect函数
    • 009.vue3中的生命周期
    • 010.自定义hook函数
    • 011.toRef和toRefs

001.setup的配置

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

<script>
export default {
  name: 'App',
  setup(){
    let name = 'su'
    let age = 21;
    let num = 1;
    function add(){
      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 = new Proxy(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('你好')
      function add(){
        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'
  export default {
    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'
  export default {
    name: 'App',
    setup(){
      let sum = ref(0);
      //使用组合式 API
      onBeforeMount(()=>{
        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'
export default function(){
    // 获取坐标点相关的数据
    let point = reactive({
        x:0,
        y:0
    })
    //  获取坐标点相关的方法
    function savePoint(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'
  export default {
    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'
export default {
  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'
export default {
  name: 'App',
  setup(){
   
    let person = reactive({
      name:'zhangsan',
      age:21,
      job:{
        j1:{
          salary:12
        }
      }
    })
    
    return {
      ...toRefs(person)
    }
  }
}
</script>

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

相关文章：

  • 做分类信息网站/中国最新疫情最新消息
  • 建设部网站158号文件/b2b平台推广网站
  • 河北中太建设集团有限公司网站/网络营销和传统营销有什么区别
  • 未来的门户网站/品牌推广方案怎么写
  • 做网站的目标客户/网红推广
  • 天河做网站设计/中国网站访问量排行
  • 玩转华为ENSP模拟器系列 | IPSec网关负载分担双机热备，隧道之间不备份
  • Go : 测试并发原语幂级数(附完整源码)
  • JUC - 多线程之Synchronized和Lock锁；生产者消费者模式（一）
  • day2:算法之美|打开算法之门与算法复杂性
  • 无胁科技-TVD每日漏洞情报-2022-10-18
  • 艾美捷抗人IL-2单抗MT8G10相关参数说明
  • 网络地址转换（NAT）(三)
  • LeetCode315 周赛
  • MySQL常用函数大全（实例演示）
  • Linux学习笔记(更新中)
  • 论文理解【Offline RL】—— A dataset perspective on offline reinforcement learning
  • 三分钟了解MySQL慢查询