掌握以下vue2知识后,更有时间摸鱼了,以前2天的工作量,现在半天就搞完

简介: vue2项目维护,你不能不知道的知识点

生命周期函数

1.beforeCreate

2.created

3.beforeMounte

4.mounted

数据渲染到页面上,并可以通过dom访问。

5.beforeUpdate

6.updated

7.beforeDestory

断开与子组件的联系,摧毁组件本身。

销毁所有子组件,然后销毁组件本身,最后销毁vue实例。一般当中做一些清理工作。

8.destoryed

常用指令

  1. v-model
  2. v-bind
  3. v-on
  4. v-show
  5. v-if、v-else-if、v-else
  6. v-for 注意:与v-if使用的时候,v-for有更高的优先级
  7. v-html
  8. v-text
  9. v-once
  10. v-slot 注意,只能绑定在template上。

v-model 实现原理

自定义事件

1.使用场景:作用与 input 标签上

使用方法

model: {
  prop: "value",
  event: "change"
},
props: {
  value: {type: String, default: ""}
}
template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `

.sync 的实现原理

.sync修饰符
// 子组件
this.$emit('update:title', newTitle)
// 父组件
title.sync="title"

特殊属性

1. is

用于动态组件 用于指定组件, 与component配合使用

// 目录结构
|
|-parts
|--Comp.vue
|-index.vue
// index.vue
<template>
  <component is="Comp">
</template>
import Comp from "./parts/Comp.vue";

components: {Com}

2. ref

用于指定组件实例,可以通过 ref 来直接组件实例的属性和触发方法等。

// 子组件 Child.vue
data() {
  return {
    aaa: "aaa"
  }
},
methods: {
  getAaa() {
    //一些操作
  }
}

// 父组件 
<template>
  <child ref="child">
</template>
mounted() {
  this.$refs.child.aaa;
  this.$refs.getAaa()
}

组件通讯

1.父组件传子组件

  1. props
  2. refs
  3. children

2.子组件向父组件通讯

  1. $emit('fnName', sth)
  2. $parent

3.多层组件通讯

其中provide与injects需要配套使用。

1. provide

// 一般用于父组件,是个函数 
provide(): {
  return {elForm: this}
},

2. injects

// 一般用于子组件,值可以是对象与数组
// 1.数组
injects: ["elForm"]
// 2.对象
injects: {
  elForm: { default: '' }
}

3. eventBus

多个组件在一个vue实例下,就可以通过

4. vuex

vue官网

四个重要核心概念:

  1. state
  2. getter
  3. mutations: mutation 必须是 同步函数
  4. actions: 提交的是 mutation ,而不是直接变更状态;可以包含任意异步操作
  5. module: 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。每个模块使用 namespaced: true 来使其变成带有命名空间的模块,各命名默认根据模块注册的路径调整

5. sessionStorage、localStorage、cookies

值得注意的是,两者的存储大小一般为5M

watch与computed

computed

计算属性,依赖其他字段和数据获取;只有依赖项发生变化才会更新

computed: {
  sth() {
    return this.name + "a"
  },

  sthB: {
    get: function() {
      return this.name + "b"
    },
    set: function(val) {
      this.name = val.split(" ")[0]
    }
  }
}

watch

主动监听某个字段的变化

watch() {
  name(val) {
    this.aaa = val
  },
  nameB: function(newVal, oldVal) {},
  nameC: {
    handler: "methodA",
    immediate: true, //收集响应式依赖时,立即执行
    deep: true, //深度响应
  }
},
methods: {
  methodA(val) {}
}

插槽

  1. slot
  2. slotScoped

渲染函数

渲染函数与jsx

推荐的前置知识 虚拟dom

render(h, ctx) {
// h相当于createElement(),
// ctx即创建的上下文

}

响应式原理

1. defineProperty

2.对象

this.$set(object, propertyName, value)

3.数组

  1. this.$set(object, propertyName, value)
  2. this.splice(indexOfItem, 1, newValue)

内置组件

1. component

2. transition

用于单个元素或组件的过渡。 详情见

3. transition-gropu

作为多个元素/组件的过渡效果, 注意:每个 <transition-group> 的子节点必须有独立的 key

4. keep-alive

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 详情见

keep-alive的2个组件周期函数

  1. activated
  2. deactivated

相关文章
|
6月前
|
前端开发
十分钟封装一个好用的axios,省时又省力他不香吗
十分钟封装一个好用的axios,省时又省力他不香吗
|
JavaScript 前端开发 数据库
让你少踩坑的fastadmin教程(3)
让你少踩坑的fastadmin教程
1393 0
让你少踩坑的fastadmin教程(3)
|
3月前
|
JavaScript
哇哦~ 老板让我用 vue3 setup 实现动态表单的功能?这有什么难度吗?立马安排!
哇哦~ 老板让我用 vue3 setup 实现动态表单的功能?这有什么难度吗?立马安排!
|
3月前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
3月前
|
存储 前端开发 JavaScript
太爽了!这12个前端库,帮我在工作中赢得了不少摸鱼时间!!
太爽了!这12个前端库,帮我在工作中赢得了不少摸鱼时间!!
|
存储 JSON 算法
一杯茶的时间入门Vue新的状态管理库-2
Pinia 插件 Pinia 生态已有许多插件,可以扩展更多功能: pinia-plugin-persistedstate:数据持久化 pinia-plugin-debounce:防抖修改状态 pinia-plugin-pinia-observable:转换成 Observable
110 0
|
12月前
|
缓存 前端开发 JavaScript
前端Vue小项目的一个非常诡异离谱的"眼神不好"Bug
公司放假, 现在来提升自己的前端的技术, 想着使用饿了么UI搭建一个简单的页面, 并完成mock数据的获取, 一个小项目就好了....
81 0
|
存储 JavaScript API
一杯茶的时间入门Vue新的状态管理库-1
Pinia 的优势 相比 Vuex,Pinia 有以下优点:
120 3
|
存储 JavaScript
下班前几分钟,我学会了如何使用 Vuex
下班前几分钟,我学会了如何使用 Vuex
51 0