Vue ​

const globalCompoes = require.context(
  // 其组件目录的相对路径
  "./components/global",
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /[a-zA-Z]+\-[a-zA-Z]+\.vue$/,
);
//遍历并注册全局组件
globalCompoes.keys().forEach(fileName => {
  // 获取组件配置
  // ./article-button.vue
  const componentConfig = requireComponent(fileName);
  //去除文件名中的 './'和'.vue'字符
  const componentName = fileName.replace(/\.\/|\.vue/g, "");
  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig,
  );
});

import baseImg from "@/assets/logo.png"; // 默认加载图片
// 创建一个监听器
let observer = new IntersectionObserver(entries => {
  // entries是所有被监听对象的集合
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 当被监听元素到临界值且未加载图片时触发。
      !entry.target.isLoaded && showImage(entry.target, entry.target.data_src);
    }
  });
});

function showImage(el, imgSrc) {
  const img = new Image();
  img.src = imgSrc;
  img.onload = () => {
    el.src = imgSrc;
    el.isLoaded = true;
  };
}
export default {
  // 这里用inserted和bind都行，因为IntersectionObserver时异步的，以防意外还是用inserted好一点
  // inserted和bind的区别在于inserted时元素已经插入页面，能够直接获取到dom元素的位置信息。
  inserted(el, binding) {
    // 初始化时展示默认图片
    el.src = baseImg;
    // 将需要加载的图片地址绑定在dom上
    el.data_src = binding.value;
    observer.observe(el);
  },
  unbind() {
    // 停止监听
    observer.disconnect();
  },
};

import { Toast, Button } from "vant";

const components = {
  Toast,
  Button,
};

const componentsHandler = {
  install(Vue) {
    Object.keys(components).forEach(key => Vue.use(components[key]));
  },
};

export default componentsHandler;

import Vue from "vue";
import vantCompoents from "@/config/vant.config";

Vue.config.productionTip = false;

Vue.use(vantCompoents);

new Vue({
  render: h => h(App),
}).$mount("#app");

// 通过webpack的require.context导入.Object.keys()循环注册.
// 后续找资料补充

export default {
  data() {
    return {
      text: "hello",
    };
  },
  filters: {
    capitalize: function (value) {
      if (!value) return "";
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    },
  },
  methods: {
    getDetail() {
      this.$api
        .getDetail({
          id: this.id,
        })
        .then(res => {
          // this.$options.filters可以找到实例中过滤器钩子里面的函数.
          let capitalize = this.$options.filters.capitalize;
          this.title = capitalize(res.data.title);
        });
    },
  },
};

computed: {
  msg: {
    get() {
      return this.$store.store.msg;
    },
    set(val) {
      this.$store.commit('updateMsg', val)
    }
  }
}

watch: {
   'obj.a': {
      handler (newName, oldName) {
        console.log('obj.a changed')
      },
      deep: true    // 深度监控
   }
}

computed: {
    newObjA() {
      return this.obj.a
    }
}

// 正常销毁resize事件
mounted() {
  window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeHandler);
}

// hook方式销毁resize事件
mount() {
  window.addEventListener('resize', this.resizeHandler);
  this.$on('hook:destroyed', () => {
    window.removeEventListener('resize', this.resizeHandler);
  })
}

// main.js
Vue.prototype.$log = window.console.log;

// 使用
<div>{{$log(info)}}</div>

export class Drag {
  //构造函数
  constructor(el) {
    this.el = el;
    //鼠标摁下时的元素位置
    this.startOffset = {};
    //鼠标摁下时的鼠标位置
    this.startPoint = {};
    let move = e => {
      this.move(e);
    };
    let end = e => {
      document.removeEventListener("mousemove", move);
      document.removeEventListener("mouseup", end);
    };
    el.addEventListener("mousedown", e => {
      this.start(e);
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", end);
    });
  }
  //摁下时的处理函数
  start(e) {
    let { el } = this;
    this.startOffset = {
      x: el.offsetLeft,
      y: el.offsetTop,
    };
    this.startPoint = {
      x: e.clientX,
      y: e.clientY,
    };
  }
  //鼠标移动时的处理函数
  move(e) {
    let { el, startOffset, startPoint } = this;
    let newPoint = {
      x: e.clientX,
      y: e.clientY,
    };
    let dis = {
      x: newPoint.x - startPoint.x,
      y: newPoint.y - startPoint.y,
    };
    el.style.left = dis.x + startOffset.x + "px";
    el.style.top = dis.y + startOffset.y + "px";
  }
}

// 使用时,导入Drag函数
// new Drag(el)即可