VUE

指令语法

生命周期

组件

插槽

• 普通插槽
• 具名插槽
• 作用域插槽

组合式和选项式对比图

Vue 子组件和父组件执行顺序

加载渲染过程：

1. 父组件 beforeCreate
2. 父组件 created
3. 父组件 beforeMount
4. 子组件 beforeCreate
5. 子组件 created
6. 子组件 beforeMount
7. 子组件 mounted
8. 父组件 mounted

更新过程：

1. 父组件 beforeUpdate
2. 子组件 beforeUpdate
3. 子组件 updated
4. 父组件 updated

销毁过程：

1. 父组件 beforeDestroy
2. 子组件 beforeDestroy
3. 子组件 destroyed
4. 父组件 destoryed

插件

// 创建插件文件
// my-plugin.js
export default {
  install(Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log("This is a global method");
    };

    // 2. 添加全局资源 (指令)
    Vue.directive("my-directive", {
      bind(el, binding, vnode, oldVnode) {
        // 指令逻辑
        el.style.color = binding.value;
      },
    });

    // 3. 注入组件
    Vue.mixin({
      created: function () {
        // 混入逻辑
      },
    });

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log("This is an instance method");
    };
  },
};

// main.js
// 注册
import MyPlugin from "./my-plugin.js";
Vue.use(MyPlugin, {
  /* ... */
});

自定义指令

// 注册一个全局自定义指令 `v-color='black'`
Vue.directive('color', function (el, binding,vnode) {
  /**
   * el: 表示当前 dom 元素
   * binding: 表示传递参数
   * vnode: 表示当前 vnode 节点,通过 context 属性可以访问到 vue 实例
   **/
    const self = vnode.context
    el.style.color = binding.value
})

// 注册一个局部自定义指令 `v-color`
directives: {
  // color: {
  //   bind: function (el, binding) {
  //     el.style.color = binding.value
  //   },
  //   update: function (el, binding) {
  //     el.style.color = binding.value
  //   }
  // }

  // 简化上面的代码，自动执行 update
  color(el, binding){
    el.style.color = binding.value
  }
}

自定义指令应用场景，如：拖拽指令、图片懒加载、一键 Copy、权限校验等

diff 算法

diff整体策略为：深度优先，同层比较

1. 比较只会在同层级进行, 不会跨层级比较

2. 比较的过程中，循环从两边向中间收拢（交叉）