vue3 组合式学习笔记

法律分基
110 阅读3分钟

  1. 插值表达式{{ hello }}；可以使用运算符、三目运算符

  2. 响应式数据

    • ref() 将变量的值做成动态更新。
      • 必须先导入 import { ref } form "vue"
      • 然后const 变量名 = ref()
      • 获取值必须使用.value 在插值表达式获取值可以不用增加.value；{{ hello }}等于{{ hello.value }}
    • reactive() 与ref()有区别，不用添加.value就能获取值，但是不能操作字符串，获取数据后，解构有不方便

  3. 数据解构

    1. toRef()，获取值必须使用.value

      const { username, age } = user

    2. toRefs()注意这里→ import { reactive, toRefs } from "vue"

  4. readonly()非常严格；禁止修改对象重新赋值，包括对象属性

  5. isRef()判断参数变量是否为ref()和isReactive()判断参数变量是否为reactive()

  6. unRef()将ref()转成一个普通的变量

  7. shallowRef()只对.value操作，里面的属性无法操作

计算属性

computed() 一般用于完成业务数据的计算，大佬建议要多用！如果代码中用少了，说明理解不够

const a = ref(3);
const b = ref(5);

const c = computed(() => a.value + b.value)
  • 缓存计算结果
  • 带有响应式数据追踪

数据监听（响应式监听）

  1. watch() 必须监听变量名
  • 监听当前组件一个或多个响应式数据源，并在数据源变化时调用所给的回调函数
  • 执行次数 0 - N 次
  • 也可以在子组件中监听父组件传递过来的响应式
  • 当age发生变化，watch才会工作，如下图不会执行，因为ref(18)
const age = ref(18);
watch(age, () => {
//做一些操作
console.log(age);
})
  1. watchEffect() 一般用于请求（网络请求、数据请求），不是必须监听变量名

指令

用于控制<template>（HTML）的功能，书写在<template></template>内的

  1. v-html 解析HTML标签的
  2. v-text
  3. v-show 控制HTML标签是否显示，通过css的方式display:none控制显示还是不显示（用于频繁显示或隐藏）
  4. v-if 与v-show类似，是控制DOM元素，直接不显示HTML标签，可与v-else配合使用（用于只显示一次的标签）
  5. v-for 循环用的，有个属性:key用于绑定，确保唯一值
  6. v-bind 绑定HTML（元素）标签的属性，自定义属性也可以
  7. v-on 绑定JS事件
  8. v-modle

组件传值

  1. 父传子 definProps() 单向传输，同时子组件需要定义接收数据

    • 还可以传递css样式class类，但只能作用在根标签上
    • 直接用不需要导入，需要定义一个变量来（如下码）
    • 如果是对象，需要父组件绑定属性，也就是加v-bind
    const props = defineProps({
   roomid: String
})

  2. 子传父 有点复杂

  3. 依赖注入 跨组件传值

    • 只能从顶层《爷爷》 → 中间层《爸爸》 → 底层《孙子》 传
    • 不能反向传值《孙子》→《爸爸》→《爷爷》

  4. 状态管理

动态组件

也是用于控制组件，比如是否显示HTML标签（组件）；可以添加三目运算来控制

<component :is="组件名称"></component>

过渡动画 <transition>

<transition>是内置组件，提供过渡时的动画效果，但只能作用于子元素（标签）包含v-if指令或者v-show指令或者是一个<component>标签，<transition>才能产生效果。

  • v-if
  • v-show
  • <component></component>标签
  • 改变特殊的key属性

插槽标签 <solt>

占位用的

<solt></solt> //单一插槽

<solt name="s1">我是插槽一</solt>
<solt name="s2">我是插槽二</solt>
<template #s1></template> //会显示：我是插槽一
<template #s2></template> //会显示：我是插槽二

<solt :index="index"></solt> //循环插槽
avatar
文章
阅读
粉丝