vue学习笔记vue单组件

Posted 蔚尺丈八声

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue学习笔记vue单组件相关的知识,希望对你有一定的参考价值。

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

组件的生命周期

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元素、子组件上,获取它们响应式变化的值。获取值时注意几点:

  1. 必须通过 xxx.value 才能正确操作到挂载的 DOM 元素或组件;
  2. 视图渲染完毕后再执行 DOM 或组件的相关操作(需要放到生命周期的 onMounted 或者 nextTick 函数里;
  3. 该变量必须 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在业务场景中的运用:

  1. 先用reactive定义一个源数据,所有的数据更新,都是修改这个对象对应的值,按照对象的写法去维护你的数据;
  2. 再通过toRefs定义一个给template用的对象,它本身不具备响应性但是它的字段全部是ref变量;
  3. 在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 到数据变更的时候,需要取消这些操作,这个函数的作用就用于此,会在以下情况调用这个清理函数:

  1. watcher即将重新运行的时候;
  2. watcher被停止(组件被卸载或者被手动停止监听 );

watchEffect

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

数据的计算

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

computed变量优势:

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

computed变量劣势:

  1. 不能用于非响应式数据(比如时间)的计算;
  2. 只读,不能直接赋值;

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

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

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

computed变量的应用场景:

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

指令

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

有两个指令有别名:

  1. v-on的别名是@,使用@click等价于V-on:click;
  2. v-bind的别名是:,使用:src等价于v-bind:src;

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

  1. 局部注册在单个组件内定义并使用,分对象式和函数式写法(函数式更简单);
  2. 全局注册只需在入口文件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>

插槽

参考2,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>

总结来说就是:

  • 首先在子组件的slot上动态绑定一个值( :key=‘value’)
  • 然后在父组件通过v-slot : name = ‘values ’的方式将这个值赋值给 values
  • 最后通过 values.key 的方式获取数据

CSS样式与处理器

vue组件样式的基础写法,即在vue文件中创建一个style标签,就可在里面写CSS代码了。

动态绑定CSS

1. 使用:class动态修改样式名

可以在DOM元素的标签中使用:class属性,动态绑定一到多个样式(预先在script文件中定义好的)。

最常见的场景,应该就是导航、选项卡了,比如你要给一个当前选中的选项卡做一个突出高亮的状态,那么就可以使用:class来动态绑定一个样式。

2. 使用:style动态修改内联样式

如果你觉得使用class需要提前先写样式,再去绑定样式名有点繁琐,有时候只想简简单单的修改几个样式,那么你可以通过:style来处理。

样式表的组件作用域

由于CSS没有作用域的概念,有可能一旦写了某个样式,造成全局污染。vue组件有两种方案可以避免这种污染问题,一个是vue2的<style scoped>,一个是vue3的<style module>。

注意<style scoped>和<style module>的区别:

  1. 如果单纯只使用<style module>,那么在绑定样式的时候,是默认使用style对象来操作的;
  2. 必须显示的指定绑定到某个样式,比如$style,才能生效;
  3. 如果单纯的绑定style,并不能得到“把全部样式名直接绑定”的期望结果;
  4. 如果你指定的className是短横杆命名,比如.user-name,那么需要通过$style['user-name']去绑定;

使用CSS预处理器

CSS预处理器用来解决CSS的低复用性,弥补了直接写CSS的一些缺憾3

  1. 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;
  2. 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

CSS预处理器主要有Sass\\Less\\Stylus,直接在style标签里定义lang属性,指定使用哪个预处理器,就可以编写对应的预处理器代码。

参考


  1. Vue3 入门指南与实战案例 ↩︎

  2. vue插槽(slot)详解 ↩︎

  3. 浅谈css预处理器,Sass、Less和Stylus ↩︎

以上是关于vue学习笔记vue单组件的主要内容,如果未能解决你的问题,请参考以下文章

Vue 学习总结笔记

vue视频学习笔记05

Vue学习笔记 在html文件中创建Vue实例,并使用http-vue-loader注册单文件组件

Vue 学习总结笔记

Vue学习笔记 根据MDN教程,创建一个To-Do List

vue.js学习笔记