V-for 就地复用原理

举个 🌰：

阅读更多

Vue3 和 vue2 的不同？

• Vue3 的不同之一在于数据获取。Vue3 中的反应数据（Reactive Data）是包含在一个反应状态（Reactive State）变量中，我们需要访问这个反应状态来获取数据值。
• Vue2 使用选项类型 API（Options API）对比 Vue3合成型 API（Composition API）
  • 旧的选项型 API 在代码里分割了不同的属性（properties）：data，computed属性，methods，等等。
  • 新的合成型 API 能让我们用方法（function）来分割，相比于旧的 API 使用属性来分组，这样代码会更加简便和整洁。

阅读更多

数据双向绑定原理(数据劫持原理)

• 深度遍历实例 data 中的所有属性，
• 通过Object.defineProperty()方法将它们全部变成getter、setter以此进行数据劫持
• 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染

阅读更多

Vue.config.productionTip 的作用

productionTip = true （默认）时–

productionTip = fasle 时，就没有了红框内的提示信息

阅读更多

Vue 特殊特性

已经有几个特殊特性：key、is、slot、等已经有整理到，它们分别应用于–

• 解决 v-for 数据混乱
• 指定动态组件渲染哪个组件
• 插槽：向组件中动态插入其他元素

  另一个特性：ref

阅读更多

Vue 选项/数据

**computed 与 methods 的区别–**两个核心点，

1. 属性调用(methods是方法调用)，直接用插值表达式{{属性名}}来调用，而 methods 需要在方法名后面加上”()”。
2. 能够缓存，methods 中的函数，调用即执行，意味着有几处用到了该函数，就执行计算几次，而 computed 的话，只需调用计算一次，得到返回值即可，其他调用可直接使用该缓存的返回值，避免内存的浪费
3. 详见https://cn.vuejs.org/v2/guide/computed.html

阅读更多

Vue 生命周期图示

阅读更多

Vue.$mount()方法

用来将自己手撕的全局 API 扩展或实例手动挂载到 DOM 上

• 项目中可用于延时挂载(如在挂载前先进行其他操作、判断等)，之后再手动挂载上
• new Vue 时，$mount 和el并没有本质上的不同

阅读更多

使用Vue实现对数据的增删改查

阅读更多

Vuex

Vuex：Vue 配套的公共数据管理工具(响应式状态存储库)，用于保存共享的数据，整个程序中的任何组件都可访问和提交数据变动

–可用于简单实现多级组件、兄弟组件数据传递

使用：

1. 导入vuex.js
2. 创建对象 vuex 对象(状态存储仓库 store)

1
2
3
4
5
6

const store = new Vuex.Store({
  state: {
    //state相当于data，用于保存数据/状态
    count: 0,
  },
});

3. 在祖先组件注册处添加store：store

然后…

1. 访问共享数据

该祖先组件及其子孙组件即可通过this.$store.state.count，访问store中的state中的数据

2. 修改共享数据

由于组件复用，当共享数据变动导致错误时，不清楚是哪个组件发生了错误，就要逐一检查，因此不建议直接修改共享数据，而采用–

提交数据变动：在 vuex 对象中添加 mutation(突变)对象，与 state 同级，如下 ↓

1
2
3
4
5
6
7
8
9
10
11
12

const store = new Vuex.Store({
  state: {
    //state相当于data，用于保存数据/状态
    count: 0,
  },
  mutations: {
    //mutations:突变,用于保存数据变动函数
    increment(state) {
      state.count++;
    },
  },
});

• 在mutations中定义数据变动函数，vuex 会默认为这些函数传入state，允许在其中使用 state.数据名改变数据状态
• 当需要数据改变时，使用this.$store.commit('函数名')调用mutations中对应的数据变动函数即可，可以理解为显式地提交了数据变动
• 这样的话，错误不在组件，而在这些数据变动函数中，因此直接到对应函数中追踪错误即可

3. getters

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: "...", done: true },
      { id: 2, text: "...", done: false },
    ],
  },
  getters: {
    //相当于实例中的computed，第一次调用后会缓存
    doneTodos: (state) => {
      return state.todos.filter((todo) => todo.done);
    },
  },
});

vuex 也会将 state 传入，以供操作