【vue学习笔记】vue单组件

最新推荐文章于 2024-03-08 16:26:19 发布

蔚尺丈八声

最新推荐文章于 2024-03-08 16:26:19 发布

阅读量751

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_30282617/article/details/126415588

版权

本文是阅读¹所做的笔记。

组件的生命周期

vue 3组件的生命周期写法称为Composition API（组合式API）。

vue 3组件的生命周期的函数统一放在setup里运行：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onErrorCaptued。

被包含在<keep-alive>中的组件，相比正常的会多出两个生命周期钩子函数：onActivated、onDeactivated。

defineComponent

defineComponent是vue3推出的一个API，用来自动对TypeScript进行类型推导（省去手动类型推导的过程）。

setup()

steup是vue3推出的compostion API之一，是vue3组件生命周期的启用入口。

steup(props,context)的入参：props是传承自父组件的数据，context是本组件的执行上下文；如果一个定义不在props中定义，那么就会存在于context.attrs中；context.slots是插槽，context.emit是触发事件（可以用emit('xxx')代替context.emit('xxx')）。

setup()模板如下：

import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, context) {
    // 业务代码写这里...

    return {
      // 需要给 template 用的数据、函数放这里 return 出去...
    }
  },
})

组件的基本写法

vue3官方推荐defineComponent+Composition API的写法。

响应式数据的变化

1. 响应性

所谓响应性，官方文档是这样解释的：响应性是一种允许我们以声明式的方式去适应变化的编程范例。简单地可以理解为，具有响应性的数据，如果在某处地方被使用，这个数据如果发生了变化，那么使用的地方也会相应更新。

例如，有一个数据a，然后b使用了数据a，如果a在某处发生变化了，会触发b使用a的地方的更新。如果还不理解，再具体一点，vue data 选项里定义的就是响应性的数据，你在模板中使用了这些数据，然后这些数据在某处发生了变化，你模板里面的数据是不是也会相应更新？这就是响应性。vue3 通过 Proxy 和依赖&副作用收集实现这种响应性，相比起vue3的Proxy，vue2是使用defineProperty实现的。

2. 副作用effect

关于副作用，官方文档是这么描述的：Vue 通过一个副作用 (effect) 来跟踪当前正在运行的函数。副作用是一个函数的包裹器，在函数被调用之前就启动跟踪。Vue 知道哪个副作用在何时运行，并能在需要时再次执行它。

文档说得有点抽象，可以这么简单地理解，副作用就是记录[使用了响应式数据的地方]且可能需要被重新执行的一种机制，在vue3里面体现为一个函数包裹器，里面便包裹了使用了响应式数据的地方。也就是说，如果我们跟踪了副作用依赖于哪些响应式数据，在这些数据做出了变化之后，我们便可以触发副作用的执行，达到更新的目的。

你可以发现，其实computed，watch，甚至使用了数据的模板，都可以理解为跟副作用相关，因为他们都依赖于某些响应式的数据。

3. ref、reactive

ref，reactive可以创建响应式的数据，可以理解为setup里面与原来data选项相对应的功能，一旦有地方使用到了这些数据，就会被包裹进副作用里，并在这些数据修改的时候运行副作用更新。

vue3使用Proxy的getter/setter实现数据的响应性。

响应式API之ref

ref用来定义响应式数据（随状态变化而变化的数据），定义方式是用<>包裹类型定义，紧跟ref API之后：

// 单类型
const msg = ref<string>('Hello World!');

// 多类型
const phoneNumber = ref<number | string>(13800138000);

不同类型的ref定义有些差异：基本类型、对象、普通数组、对象数组。
ref也可以挂在html语言的DOM元素、子组件上，获取它们响应式变化的值。获取值时注意几点：

必须通过 xxx.value 才能正确操作到挂载的 DOM 元素或组件；
视图渲染完毕后再执行 DOM 或组件的相关操作（需要放到生命周期的 onMounted 或者 nextTick 函数里；
该变量必须 return 出去才可以传给template使用。
ref会将其标记的变量变为对象，因此必须用xx.value才能获取变量的值。

响应式API之reactive

reactive也是用于定义响应式数据，但只适用于对象、数组。

reactive对象读取字段的值或修改值的时候，与普通对象是一样的（不像ref对象那样需要xx.value取值）。

但是一些不良操作可能会使reactive数组失去响应性：重置数组；对reactive定义的对象进行解构（解构（解构赋值）是一种表达式，将数组或者对象中的数据赋予另一个变量[10]）。

响应式API之toRef与toRefs

toRef、toRefs都是用来将reactive对象转为ref对象的，前者转换某个字段，后者转换所有字段，当修改转换后ref对象的字段时，转换前的reactive对象相应字段会同步更新。

注意使用toRef最好不要转换原reactive不存在的字段。

注意toRef与toRefs在业务场景中的运用：

先用reactive定义一个源数据，所有的数据更新，都是修改这个对象对应的值，按照对象的写法去维护你的数据；
再通过toRefs定义一个给template用的对象，它本身不具备响应性但是它的字段全部是ref变量；
在return的时候，对toRefs对象进行解构，这样导出去就是各个字段对应的ref变量，而不是一整个reactive对象；（return给模板的时候，注意是否有相同命名的变量存在，不然排在后面的同名变量会覆盖前面的）

函数的定义和使用

vue3的函数都是放在setup()中定义的，注意执行时放在对应的生命周期中，比如OnMounted。

如果是暴露给模板通过click、change等行为除法的函数，需要把函数名在setup里进行return才可以在模板里使用。

数据的监听

数据的监听即是对组件的监听，比如监听它的路由变化、参数变化等。

watch

watch API分基础用法和批量监听，该API接受3个入参：source（必传）数据源，callback （必传）监听到变化后执行的回调函数，options（可选）一些监听选项。watch返回一个可以用来停止监听的函数。

watch API 代码：

import { watch } from 'vue'

// 基本用法
watch(
 source, // 必传，要监听的数据源
 callback, // 必传，监听到变化后要执行的回调函数
 // options // 可选，一些监听选项
)

1. 监听源

watch的监听源必须是：1、响应式变量（Ref）；2、计算数据（ComputedRef）；3、getter函数（()=>T）；

注意如果监听响应性对象中的某个字段（这种情况下对象本身是响应式，但它的字段不是），就需要在return中写成getter函数返回需要监听的字段，比如()=>foo.bar。

2. 回调函数

// watch 第 2 个入参的 TS 类型
// ...
export declare type WatchCallback<V = any, OV = any> = (
  value: V,
  oldValue: OV,
  onCleanup: OnCleanup
) => any
// ...

注意回调函数在watch批量监听时的简化写法。

如果有多个数据源监听，并且监听到变化后执行的行为一样，可以用批量监听。

注意回调函数只有在数据源发生变化时，才会被执行。

3. 监听的选项

deep控制是否开启深度监听，默认不开启，且默认对ref对象不起作用（可以手动开启监听）。

immediate让回调函数不等数据源的变化就立马执行，即watch所监听的ref对象一旦初始化，就触发回调函数（immediate不能在第一次会调时就取消该数据源的监听）。

flush控制是在渲染的什么时候进行回调函数的执行。

4. 停止监听

watch函数会返回一个停止监听的函数（一般来说不太关心这个）。

5. 监听效果清理

有时 watch 的回调会执行异步操作，当 watch 到数据变更的时候，需要取消这些操作，这个函数的作用就用于此，会在以下情况调用这个清理函数：

watcher即将重新运行的时候；
watcher被停止（组件被卸载或者被手动停止监听）；

watchEffect

这里注意watch只有在数据变化时才会执行监听，而watchEffect会默认执行一次，然后在数据变化时再监听。

数据的计算

vue数据的计算采用computed API，通过现有的响应式数据，去计算得到新的响应式变量。
定义出的computed变量，也是和ref变量一样，需要xx.value才能获取到它的值，但区别在于，computed变量的value是只读的。
一般不需要显示定义computed出来的变量类型，defineComponent会自动推导。

computed变量优势：

使用缓存储存计算的数据，等到下次访问时能快速给出；
和ref变量一样使用xx.value获取数据，书写风格统一；

computed变量劣势：

不能用于非响应式数据（比如时间）的计算；
只读，不能直接赋值；

如果一定要对computed变量手动复制，可以使用其setter属性更新数据：

// 注意这里computed接收的入参已经不再是函数
const foo = computed({
  // 这里需要明确的返回一个值
  get() {
	// ...
	},
	// 这里接收一个参数，代表修改 foo 时，赋值下来的新值
	set(newValue) {
  	// ...
  },
})

此时使用xx.value=所赋的值，computed变量就会用其set方法更新数据。

computed变量的应用场景：

数据的拼接和计算：在已有数据上进行综合计算。
复用组件的动态数据：根据接口返回不同的url，无需重新渲染UI组件。
获取多级对象的值：类似v-if，若多级对象的某级字段不存在，则作相应的异常处理。
不同类型的数据转换：将用户在组件中输入的数据，用set方法实时处理。

指令

指令是vue模板语法里的特殊标记，统一以v-开头（比如v-html），它以简单的方式实现了常用的JavaScript表达式功能，当表达式的值改变的时候，响应式地作用到DOM上。

有两个指令有别名：

v-on的别名是@，使用@click等价于V-on:click；
v-bind的别名是:，使用:src等价于v-bind:src；

自定义指令分局部注册和全局注册两种方式：

局部注册在单个组件内定义并使用，分对象式和函数式写法（函数式更简单）；
全局注册只需在入口文件main.ts中定义，任意组件都可以使用它。（见“开发本地vue专属插件一节”）

注意：自定义指令还有一个deep选项，如果自定义指令用于一个有嵌套属性的对象，并且需要在嵌套属性更新的时候触发beforeUpdate和updated钩子，那么需要将这个选项设置为true才能够生效：

<template>
  <div v-foo="foo"></div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  directives: {
    foo: {
      beforeUpdate(el, binding) {
        console.log('beforeUpdate', binding)
      },
      updated(el, binding) {
        console.log('updated', binding)
      },
      mounted(el, binding) {
        console.log('mounted', binding)
      },
      // 需要设置为 true ，如果是 false 则不会触发
      deep: true,
    },
  },
  setup() {
    // 定义一个有嵌套属性的对象
    const foo = reactive({
      bar: {
        baz: 1,
      },
    })

    // 2s 后修改其中一个值，会触发 beforeUpdate 和 updated
    setTimeout(() => {
      foo.bar.baz = 2
      console.log(foo)
    }, 2000)

    return {
      foo,
    }
  },
})
</script>

插槽

参考²，Vue实现了一套内容分发的API，将元素作为承载分发内容的出口，这是vue文档上的说明。具体来说，slot就是可以让你在组件内添加内容的空间。举个例子：

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
  </div>
</template>

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> </ebutton>
  </div>
</template>

如果直接想要在父组件中的<ebutton></ebutton> 中添加内容，是不会在页面上渲染的。那么我们如何使添加的内容能够显示呢？在子组件内添加slot 即可。

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button></button>
      <slot></slot>       //slot 可以放在任意位置。（这个位置就是父组件添加内容的显示位置）
  </div> 
</template>

子组件可以在任意位置添加slot , 这个位置就是父组件添加内容的显示位置。
简言之，插槽就是父组件内部定义的内容通过slot替换子组件默认的内容。

1. 编译作用域

上面我们了解了，slot 其实就是能够让我们在父组件中添加内容到子组件的‘空间’。我们可以添加父组件内任意的data值，比如这样：

//父组件：（引用子组件 ebutton）

<template>
  <div class= 'app'>
     <ebutton> {{ parent }}</ebutton>
  </div>
</template>

new Vue({
  el:'.app',
  data:{
    parent:'父组件'
  }
})

使用数据的语法完全没有变，但是，我们能否直接使用子组件内的数据呢？显然不行。

// 子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button> </button>
       <slot></slot>
  </div>
</template>

new Vue({
  el:'.button',
  data:{
    child:'子组件'
  }
})

// 父组件：（引用子组件 ebutton）

<template>
  <div class= 'app'>
     <ebutton> {{ child }}</ebutton>
  </div>
</template>

2. 后备内容（子组件默认值）

所谓的后背内容，其实就是slot的默认值，有时我没有在父组件内添加内容，那么 slot就会显示默认值，如：

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot> 这就是默认值 </slot>
  </div>
</template>

3. 具名插槽

有时候，也许子组件内的slot不止一个，那么我们如何在父组件中，精确的在想要的位置，插入对应的内容呢？给插槽命一个名即可，即添加name属性。

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name= 'one'> 这就是默认值1</slot>
      <slot name='two'> 这就是默认值2 </slot>
      <slot name='three'> 这就是默认值3 </slot>
  </div>
</template>

父组件通过v-slot : name 的方式添加内容：

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> 
        <template v-slot:one> 这是插入到one插槽的内容 </template>
        <template v-slot:two> 这是插入到two插槽的内容 </template>
        <template v-slot:three> 这是插入到three插槽的内容 </template>
     </ebutton>
  </div>
</template>

当然 vue 为了方便，书写 v-slot:one 的形式时，可以简写为 #one 。

4. 作用域插槽

通过slot 我们可以在父组件为子组件添加内容，通过给slot命名的方式，我们可以添加不止一个位置的内容。但是我们添加的数据都是父组件内的。上面我们说过不能直接使用子组件内的数据，但是我们是否有其他的方法，让我们能够使用子组件的数据呢？其实我们也可以使用v-slot的方式：

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
      <slot name= 'one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据
      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot
  </div>           
</template>

new Vue({
  el:'.button',
  data:{
    child1:'数据1',
    child2:'数据2'
  }
})

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> 

        // 通过v-slot的语法 将插槽 one 的值赋值给slotonevalue 
        <template v-slot:one = 'slotonevalue'>  
           {{ slotonevalue.value1 }}
        </template>

        // 同上，由于子组件没有给slot命名，默认值就为default
        <template v-slot:default = 'slottwovalue'> 
           {{ slottwovalue.value2 }}
        </template>

     </ebutton>
  </div>
</template>

总结来说就是：