Vue查漏补缺

发表于 2021-03-23 更新于 2023-06-27

Vue 查漏补缺

data 为什么被定义成函数
避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例，如果 data 是一个对象的话，这些实例用的是同一个构造函数。为了保证组件的数据独立，要求每个组件都必须通过 data 函数返回一个对象作为组件的状态。
vue 组件之间的传递分类：
1. 父向子传递:props
2. 子向父传递：$emit
3. 兄弟之间传递：借助中间代理：emit,$on
4. 祖先传给孙子：provide,inject
v-model 中的实现原理及如何自定义 v-model
v-model 可以看成是 value+input 方法的语法糖(组件)。原生的 v-model，会根据标签的不同生成不同的事件与属性。

自定义:自己写 model 属性，里面放上 Prop 和 event
Vue 性能优化
编码优化
- 事件代理
- keep-alive
- 拆分组件
- key 保证唯一性
- 路由懒加载、异步组件
- 防抖节流
Vue 加载性能优化
- 第三方模块按需导入（babel-plugin-component)
- 图片懒加载
用户体验
- app-skeleton 骨架屏
- shellap p 壳
- pwa
SEO 优化
- 预渲染
Computed、watch 和 method
computed：默认 computed 也是一个 watcher 具备缓存,只有当依赖的数据变化时才会计算，当数据没有变化时，它会读取缓存数据。如果一个数据依赖于其他数据，使用 computed

watch:每次都需要执行函数。watch 更适用于数据变化时的异步操作。如果需要在某个数据变化时做一些事情，使用 watch。

method:只要把方法用到模板上了，每次一变化就会重新渲染视图，性能开销大。

vue 中的 watch 监听数据变化

watch 使用的几种方法

通过 watch 监听 data 数据的变化，数据发生变化时，就会打印当前的值

watch: {
    data(val, newval) {
        console.log(val)
        console.log(newval)
    }
  }

通过 watch 监听 docData 数据的变化，数据发生变化时，this,change_number++(使用深度监听)

watch: {
    docData: {
      handler(newVal) {
        this.change_number++
      },
      deep: true
    }
}

通过 watch 监听 data 数据的变化，数据发生变化时,执行 changeData 方法

watch: {
    data： 'changeData'  // 值可以为methods的方法名
}，
methods: {
      changeData(curVal,oldVal){
    　　　 conosle.log(curVal,oldVal)
　　}
}

生命周期

生命周期图示

Vue 实例生命周期

beforeCreate
- 类型：Function
- 作用：在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用
created
- 类型：Function
- 作用：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer），property 和方法的运算，watch/event 事件回调。
beforeMount
- 类型：Function
- 作用：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
- 类型：Function
- 作用：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
beforeUpdate
- 类型：Function
- 作用：数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated
- 类型：Function
- 作用：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后回调用该钩子。
beforeDestroy
- 类型：Function
- 作用：实例销毁之前调用。在这一步实例仍然完全可用。
destroyed
- 类型：Function
- 作用：实例销毁后调用。解绑 Vue 实例的所用指令，移除所有事件监听器。

组件传值

provide/inject

类型：
- provide：Object | () => Object
- inject：Array | {[key: string] : string | Symbol | Object}
作用：
- provide 选项应该是一个对象或返回一个对象的函数。
- inject 选项应该是：
  - 一个字符串数组或
  - 一个对象，对象的 key 是本地的绑定名，value 是：
    - 在可用的注入内容中搜索用的 key（字符串或 Symbol），或
    - 一个对象，该对象的：
      - from property 是在可用的注入内容中搜索有用的 key
      - default property 是降级情况下使用的 value

model

类型：{prop?: string , event ?:string}
作用：允许一个自定义组件在使用v-model时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把value用作 prop 且把input用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

model 接受有两个属性：

props 代替原来 value 的值。
event 代替原本 input 出发的事件。

子组件

<template>
  <div v-if="show">
    <div>
      <p>定制 v-model</p>
      <button @click="close">关闭组件</button>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'show',
    event: 'close',
  },
  props: ['show'],
  methods: {
    close() {
      this.$emit('close', false)
    },
  },
}
</script>

父组件

<template>
  <div>
    <button @click="show = true">打开model</button>
    <child v-model="show"></child>
    <!-- 等同于 -->
    <child :show="show" @close="show = $event"></child>
  </div>
</template>

<script>
import Child from './child'
export default {
  components: {
    Child,
  },
  data() {
    return {
      show: false,
    }
  },
}
</script>

当父组件点击打开 model 按钮的时候，内部的 show 属性变为了 true, 这时因为子组件的显示与隐藏是根据 props 里面的 show 来确定的，子组件将会显示。
点击子组件的关闭组件按钮, 出发了 close 事件，这个事件中将会像父级暴露一个 close 方法，并传递一个 false 参数。
父级触发 close 方法，改变 show 的值.

计算属性和侦听器

计算属性

对于任何复杂逻辑，都应当使用计算属性。

7.Vue2.x 双向绑定原理

Vue 采用数据劫持+订阅发布模式实现双向绑定。通过Object.defineProperty()方法来为组件中data的每个属性添加 get 和 set 方法，在数据变动时，触发 set 里相应的监听回调函数，将变动信息发布给订阅者。

8.Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。store 基本上就是一个容器，它包含着应用中的大部分的状态(state).

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交(commit)mutaition。

主要包括以下几个模块：

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

Vue 查漏补缺

data 为什么被定义成函数

vue 组件之间的传递分类：

v-model 中的实现原理及如何自定义 v-model

Vue 性能优化

编码优化

Vue 加载性能优化

Computed、watch 和 method

vue 中的 watch 监听数据变化

watch 使用的几种方法

生命周期

生命周期图示

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed