vue3 学习笔记

一个小潘桃鸭
70 阅读6分钟

一 、常用Composition API

  1. setup

  • setup函数的两种返回值：

    a) 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点）

    b) 若返回一个渲染函数：则可以自定义渲染内容（了解）

  • 注意点：

    a) setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性【若使用了suspense和异步引入组件是可以返回promise】

    b) 尽量不与vue2.x配置混用

        -  vue2.x中可以访问setup中的属性、方法
    -  但在setup中不能访问vue2.x配置
    -  如果有重名，setup优先

  1. ref函数

    a) 作用：定义一个响应式的数据

    b) 注意点:

     -     接收的数据可以是：基本类型、对象类型
 -     基本类型的数据： 响应式是靠Object.defineProperty()的get与set完成的
 -     对象类型的数据：内部“求助”了vue3中的新函数---reactive函数

  2. reactive函数

    a) 作用：定义一个对象类型的响应式数据（基本类型不要用，用ref函数）

    b) 语法：const代码对象、reactive（源对象）接收一个对象或数组，返回一个代理对象（Proxy的实例对象，简称proxy对象）

    c) reactive定义的响应式数据是“深层次”的

    d) 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

  3. vue3.0中的响应式原理

  • vue2.x的响应式

    a) 实现原理：

    对象类型：通过object.defineProperty()对属性的获取、修改进行拦截（数据劫持）
数组类型：通过重写更新数组的一系列方法来实现拦截（对数组的变更方法进行了包裹）
Object.defineProperty(data, 'count', {
    get(){},
    set(){}
})

    b) 存在问题：

    • 新增属性、删除属性，界面不会更新

    • 直接通过下标修改数组，界面不会自动更新

  • vue3.x的响应式

    a) 实现原理：

通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、添加、删除
通过Reflect(反射)：对被代理对象的属性进行操作
new Proxy(data,{
    // 拦截读取属性值 
    get(target,prop){
        return Reflect.get(target,prop)
    },
    // 拦截设置属性值或添加新属性
    set(target,prop,value){
        return Reflect.set(target,prop,value)
    },
    // 拦截删除属性
    deleteProperty(target,prop){
        return Reflect.deleteProperty(target,prop)
    }
})

proxy.name = 'tom'

  1. setup两个注意点

    a) setup执行时机

    • 在beforeCreate之前执行一次，this是undefined

    b) setup参数

    • props: 值为对象，包含组件外部传递过来，且组件内部声明接收了的属性

    • context上下文对象： attrs值为对象，包含组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs; slots收到的插槽内容，相当于this.$slots; emit分发自定义事件的函数，相当于this.$emits

  2. 计算属性与监听

    a) computed函数

    b) watch函数

    • 监听reactive定义的响应式数据时：oldValue无法正确获取，强制开启了尝试监听(deep配置失效)
    • 监听reactive定义的响应式数据中某个属性时，deep配置有效
 案例一：监听ref定义的响应式数据
  watch(sum, (newValue,oldValue)=>{
      console.log('newValue',newValue);
    },{
      immediate: true
  })
 
 案例二：监听多个ref定义的响应式数据
   watch([sum,msg], (newValue,oldValue)=>{
      console.log('newValue',newValue);
   })
   
 案例三：监听reactive定义的响应式数据
   watch(person, (newValue,oldValue)=>{
      console.log('newValue',newValue);
    },{immediate: true,deep:false}) // 此处的deep配置失效
    
 案例四：监听reactive定义的响应工数据中的某个属性
   watch(()=>person.job, (newValue,oldValue)=>{
      console.log('newValue',newValue);
    },{immediate: true,deep:false}) 
    
 案例五：监听reactive定义的响应工数据中的某些属性
  watch([()=>person.job,()=>person.age], (newValue,oldValue)=>{
      console.log('newValue',newValue);
  }) 
    
 特殊情况：此处由于监听的是reactive所定义的对象中的某个属性，所以deep配置有效
    watch(()=>person.job (newValue,oldValue)=>{
      console.log('newValue',newValue);
    },{deep:true})

c) watchEffect函数

  • watch的套路：既要指明监听的属性，也要指明监听的回调

  • watchEffect的套路：不用指明监听哪个属性，监听的回调中用到哪个属性就监听哪个属性

  • watchEffect有点像computed:

      - 但computed注重的计算出来的值（回调函数的返回值），必须要写返回值
  - 而watchEffect更注重的是过程（回调函数的函数体），不用写返回值

watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})
  1. 生命周期
  2. 自定义hook函数
  • 本质是一个函数，把setup函数中使用的Composition API进行封闭
  • 类似于vue2.x中的mixin
  • 自定义hook的优势：复用代码

  1. toRef,toRefs

二 、其它Composition API

  1. shallowReactive与shallowRef

  • shallowReactive: 只处理对象最外层属性的响应式（浅响应式）

  • shallowRef: 只处理基本数据类型的响应式，不进行对象的响应式处理

  • 用法？

    a) 如果有一个对象数据，结构比较深，但变化时只是外层属性变化 --- shallowReactive

    b) 如果有一个对象数据，后续功能不会修改该对象中的属性，而是用新的对象来替换 --- shallowRef

  1. readonly与shallowReadonly
  • readonly: 让一个响应式数据变为只读的（深只读）
  • shallowReadonly: 让一个响应式数据变为只读的（浅只读）
  1. toRaw与markRaw

  • toRaw

    a) 作用：将一个由reactive生成的响应式对象转为普通对象

    b) 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作不会引起页面的更新

  • markRaw

    a) 作用：标记一个对象，使其永远不会再成为响应式对象

    b) 使用场景：当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

  1. customRef

  • 作用：创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显式控制

  • 实现防抖效果：

<template>
  <input type="text" v-model="keyword" />
  <h3>{{ keyword }}</h3>
</template>

<script>
import { ref, customRef } from "vue";
export default {
  name: "",
  props: {},
  setup(props, context) {
    // let keyword = ref('hello')  使用vue准备好的内置ref
    // 自定义ref
    function myRef(value, delay) {
      let timer;
      return customRef((track, trigger) => {
        return {
          get() {
            track(); // 告诉vue这个value值是需要被 追踪 的
            return value;
          },
          set(newValue) {
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newValue;
              trigger();
            }, delay);
          },
        };
      });
    }


    let keyword = myRef('hell0', 500) // 使用自定义的ref

    return{
      keyword
    }
  },
};
</script>

<style scoped>

</style>
  1. provide与Inject
  2. 响应式数据的判断
  • isRef: 检查一个值是否为一个ref对象
  • isReactive: 检查一个对象是否由reactive创建的响应式代理
  • isReadonly: 检查一个对象是否由readonly创建的只读代理
  • isProxy: 检查一个对象是否由reactive或readonly方法创建的代理

三 、新的组件

  1. Fragment
  • 好处： 减少标签层级，减小内存占用
  • vue2中必须要有根标签，vue3可以没有
  1. Teleport
  2. Suspense
  • 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
  • 使用步骤：
异步引入组件：
import { defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用Suspense包裹组件，并配置好default与fallback
<template>
    <div>
        <h3>组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child />
            </template>
            <template v-slot:fallback>
                <div>正在加载中....</div>
            </template>
        </Suspense>
    </div>
</template>
avatar
文章
阅读
粉丝