vue内置方法总结

目录

1. 生命周期钩子方法

2. 响应式系统方法

3. DOM 更新方法

4. 事件处理方法

5. 访问子组件和 DOM 元素

6. 数据观察方法

7. 其他方法

1. 生命周期钩子方法

这些方法在 Vue 实例的不同生命周期阶段自动调用。

• beforeCreate：

  • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

• created：

  • 在实例创建完成后立即调用，此时已完成数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。但是，挂载阶段还没开始，$el 属性目前不可见。

• beforeMount：

  • 在挂载开始之前被调用，相关的 render 函数首次被调用。

• mounted：

  • 实例被挂载后调用，此时 el 被新创建的 vm.el替换。如果根实例挂载到了一个文档内的元素上，当‘mounted‘被调用时，vm.el替换。如果根实例挂载到了一个文档内的元素上，当‘mounted‘被调用时，vm.el 也在文档内。

• beforeUpdate：

  • 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

• updated：

  • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

• beforeDestroy：

  • 实例销毁之前调用。在这一步，实例仍然是完全正常的。

• destroyed：

  • 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

2. 响应式系统方法

这些方法用于处理响应式数据。

• $set：

  • 向响应式对象中添加新的属性，或者更新现有属性，并确保该属性是响应式的。
  • 语法：this.$set(target, key, value)
  • 示例：

    this.$set(this.queryParams, 'partno', '');

• $delete：

  • 从响应式对象中删除一个属性，并确保视图能够响应这个变化。
  • 语法：this.$delete(target, key)
  • 示例：

    this.$delete(this.queryParams, 'partno');

3. DOM 更新方法

这些方法用于处理 DOM 更新。

• $nextTick：

  • 在下一次 DOM 更新循环结束之后执行回调函数。这通常用于在数据变化后等待 DOM 更新完成。
  • 语法：this.$nextTick(callback)
  • 示例：

    this.message = 'Hello';
    this.$nextTick(() => {
      // DOM 已经更新
      console.log(this.$el.textContent); // 'Hello'
    });

4. 事件处理方法

这些方法用于处理事件。

• $on：

  • 监听 Vue 实例上的自定义事件。
  • 语法：this.$on(event, callback)
  • 示例：

    this.$on('custom-event', (data) => {
      console.log(data);
    });

• $once：

  • 监听 Vue 实例上的自定义事件，但只触发一次。
  • 语法：this.$once(event, callback)
  • 示例：

    this.$once('custom-event', (data) => {
      console.log(data);
    });

• $off：

  • 移除 Vue 实例上的自定义事件监听器。
  • 语法：this.$off(event, callback)
  • 示例：

    const handler = (data) => {
      console.log(data);
    };
    
    this.$on('custom-event', handler);
    // 后面某个时刻移除监听器
    this.$off('custom-event', handler);

• $emit：

  • 触发 Vue 实例上的自定义事件。
  • 语法：this.$emit(event, [args...])
  • 示例：

    this.$emit('custom-event', 'some data');

5. 访问子组件和 DOM 元素

• $refs：

  • 访问子组件或 DOM 元素的引用。
  • 语法：this.$refs
  • 示例：

    <template>
      <div>
        <child-component ref="child"></child-component>
      </div>
    </template>
    
    <script>
    export default {
      mounted() {
        this.$refs.child.someMethod();
      }
    };
    </script>

6. 数据观察方法

• $watch：

  • 监听 Vue 实例上的数据变化。
  • 语法：this.$watch(source, callback, [options])
  • 示例：

    this.$watch('message', (newVal, oldVal) => {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    });

7. 其他方法

• $forceUpdate：

  • 强制 Vue 实例重新渲染。
  • 语法：this.$forceUpdate()
  • 示例：

    this.$forceUpdate();