前端职场人技术提升第一步 —— 基础巩固（vue）🧐

ChatGPT_Talk
1,159 阅读5分钟

前言

大家好，我是 「艾伦」 ，是一名刚进入职场不久的前端新人。最近一段时间笔者一直在思考一个问题：怎样才能跳出平时业务的迷城，找到自己感兴趣的前端领域，并成为该领域的技术专家呢？但细想一下现在前端的发展趋势，有太多的前沿领域值得深究。**在笔者还没找到真正感兴趣的领域时，难道只能原地踏步？此时能为成为技术专家做什么准备工作呢？ —— 笔者得到的答案是：巩固前端各个方面的基础，后续的技术成长之路才能通顺。

所谓打好地基再盖楼，此文就从vue开始，我们一起踏出前端职场人技术成长第一步！！！

正文

vue的生命周期

先来看这张图最经典的图：

6KYBFD4N02L6_9A5O5QB1XC.jpg

可能你已经掌握了vue生命周期函数的执行顺序，但请注意下面才是该分支的重点👇👇👇

  • 你知道什么是vue的生命周期吗？

    每个组件都是独立的，每个组件都有自己的生命周期，从一个组件创建实例 -> 数据初始化 -> 挂载 -> 更新 -> 销毁，就是一个组件的生命周期。

  • 你知道每个生命周期函数的具体触发时间吗？

  • beforeCreate 当beforeCreate钩子函数调用时，实例已经初始化完成，但还未进行数据观测和事件配置，此时组件的选项对象还未创建，el和data并未初始化，因此无法访问methods， data， computed等上的方法和数据，特别注意Props也访问不到。 这些数据的初始化都在initState中
  • created 在created钩子函数调用时，此时已经可以访问到之前不能访问到的数据,但这时候组件还没被挂载，所以是看不到的。这意味着实例的data和props等数据的初始化发生在beforeCreate和created之间。
  • beforeMount 当beforeMount钩子函数执行时，此时已经模板解析函数已经开始执行了，但还没有将$el元素挂载在页面上，页面视图未更新。这意味着render模板解析函数是在created和beforeMount之间执行的，也就是说组件的模板编译在beforeMount触发前就开始了。
  • mounted 当mounted钩子函数触发时，此时模板编译已经完成，并且数据已经被加载到视图上了，即$el元素被挂载到页面时触发了视图的更新。这意味着在beforeMount之后、mounted之前，模板编译完成并且挂载在了视图上
  • beforeUpdate 和 updated 当数据发生改变，触发视图更新时。beforeUpdate钩子函数在状态更新之前触发，此时data的状态已经更新了，但是界面上显示的数据还没有更新。 updated钩子函数在实例状态更新完毕后触发，此时data中的状态和界面上显示的数据都是最新的。
  • beforeDestroy 当beforeDestroy钩子函数执行时，此时的实例处于准备销毁状态，但**还未销毁实例属性和方法，这意味着执行此钩子函数时实例属性和方法仍然可以使用。**在该阶段，最适合移除事件、定时器等，防止引起内存泄露。
  • destroyed 在该钩子函数执行前，实例已经销毁完毕，所以钩子触发时所有实例的属性和方法已经不可以使用了。
  • 和keep-alive相关的两个生命周期函数你了解吗？

这两个生命周期函数分别是activated和deactivated。

在vue中，用keep-alive包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行deactivated钩子函数，在命中缓存渲染后会执行actived钩子函数。

  • 在整个生命周期中，父子组件相关的这些顺序你都知道吗？
  • 父子组件的加载渲染顺序：1-2-3-1-2-3-4-4 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  • 子组件发生数据更新过程: 父beforeUpdate->子beforeUpdate->子updated->父updated
  • 父组件更新过程 父beforeUpdate->父updated
  • 销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
  • vue内置方法的初始化顺序 Props -> methods -> data -> computed -> watch

组件间的传值

父子组件之间

  • 父组件通过props传值给子组件 （用v-model其实也是这个原理）

    1. 这是一种典型的单向数据流，就是说子组件不能直接修改props的值，只能通过发送事件的方式告知父组件进行修改
    2. 可以使用v-bind来动态传递prop 
      <blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
    3. 子组件可以通过调用$emit并传入事件名称来触发一个事件 
      //子组件
<button v-on:click="$emit('enlarge-text')">
	Enlarge text
</button>

//父组件
<blog-post
	...
	v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
    4. 还可以使用emit方法的第二个参数抛出一个值，在组件事件中直接通过‘emit方法的第二个参数抛出一个值，在组件事件中直接通过`emit`接收（如果事件处理函数是一个方法的话，可以直接通过第一个参数获取到）

  • 通过访问$parent或者$children对象来访问组件实例中的方法和数据

  • 使用$listeners实现父子通信

    //父组件中
<my-button :msg="msg" @todo="handleCilck"/>
//子组件中
<div @click="$listeners.todo">C</div>
//在子组件中可以通过$listeners访问到父组件绑定的所有事件，子组件通过$listeners.事件名实现通信

  • 使用.sync实现通信

    //在父组件中
<input :value.sync="value" />
//相当于
<input :value="value" @update:value="v => value = v" />
//加上.sync修饰符就相当于默认绑定了一个‘update:value’事件
//子组件中
<script>
	this.$emit('update:value', 1)
</script>

兄弟组件之间

  • this.parent.parent.children 通过查找父组件中的子组件实现

跨组件

  • provide对象 和 inject数组 实现通信 
    //在高层组件中
provide: {
	data: 1
}

//在子组件中
inject: ['data']

当在根组件使用provide，再通过在子组件使用inject。这其实实现了一个单向的vuex

任意组件之间

  • vuex
  • Event Bus 做一个简易版的vuex，通过手动创建一个vue实例，然后在要进行通信的兄弟组件上都访问该实例。再通过bus.$on(事件名，回调函数)和bus.$emit(事件名，要传的数据)这对API来实现组件之间的通信

为什么data必须要写成一个函数？ 什么时候可以写成对象？

  • 这么做是为了实现组件的多次复用。
  • 文档上的例子是子组件维护一个count记录点击的次数，当在父组件中使用三次该子组件，当点击按钮的时候，每个子组件都会维护一个独立的count。也就是说没用一次组件，就会有一个新实例被创建
  • 当我们把data写成函数的时候，每个实例可以维护一份被返回对象的独立的拷贝
  • 当然，如果组件完全不需要被复用，就可以写成对象的形式

你能实现一个v-model吗？

从v-model的两种使用场景来实现：

  • v-model 用在input上 
    <input v-model="searchText">
//等价于
<input
	v-bind:value="searchText"
	v-on:input="searchText = $event.target.value"
>

v-bind实现从数据源 -> 视图 的更新 = 把数据源的searchText作为输入框的value值 v-on实现实现从视图 -> 数据源 的更新 = 当输入框的value值发生改变 -> 触发input事件 -> 就将数据源的searchText修改为value

  • 当将v-model 用在组件上，实现组件传参 
    <custom-input v-model="searchText"/>
//等价于
<custom-input
	v-bind:value="searchText"
	v-on:input="searchText = $event"
></custom-input>
//相当于将searchText传给子组件，并自定义了一个input事件

//为了能父子组件能正常通信，子组件内要有下列操作
props:['value']  //用props接收父组件传过来的值
<input   v-bind:value="searchText" v-on:input="$emit('input', $event.target.value)">
//  在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

computed 和 watch 的区别？

  • computed是计算属性，依赖其他属性计算值，并且computed会基于它的响应式依赖来进行缓存，只有响应式依赖发生改变时，才会重新求值；否则就直接返回上一次的计算结果
  • watch监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作
  • 当需要依赖别的属性来动态获得值时，使用computed
  • 对于监听到值的变化需要做一些复杂的逻辑处理时，使用watch

结语

至此，我们对vue基础的回顾就到这了，前端职场人技术提升将成为笔者此段时间更文的系列专题，相信该专题能为和我一样刚进入职场不知如何提升的 或 马上要步入职场的面试者 提供一些帮助～

如果这篇文章让你觉得有所帮助，欢迎持续关注该专题，相信能给你带来更多的收获～

avatar
文章
阅读
粉丝