vue相关

批量注册组件

const path = require("path");
const ctx = require.context("../components",false,/\.vue$/);
let modules = {};
ctx.keys().forEach(key => {
    const name = path.basename(key,'.vue');
    modules[name] = ctx(key).default || ctx(key)
})
export default {
    ...modules
}

watch 深度监听

watch无法监听到不是在data中定义的对象属性改变的，需要使用deep开启深度监听

watch:{
    showDialog: {
      handler(newval, old) {
        if (newval.show) {
          this.dialogVisible = newval.show
          this.openDialog()
        }
      },
      deep: true,
      immediate: true
    },
  }

如果对象中属性较多，只想要监听某一个属性的话可以使用字符串形式监听

'showDialog.show': {
   handle (newval, old) {

   },
   deep: true,
   immediate: true
 }

watch监听的对象第一次绑定值时也触发监听，immediate

watch监听的对象在第一次绑定值时是不会触发的，如果想要在第一次绑定值时触发watch中的代码，只需要设置immediate 为true即可，如上图

vue中router与route

1. router对象是全局路由(VueRouter)的实例，有例如push()，go()，replace()等方法
2. route对象是当前路由的实例，包含url，参数，query，params对象等

vue中的跨域问题

解决方法：proxyTable
跨域这个行为，浏览器是禁止的，但是服务器不禁止，使用proxyTable其原理就是将域名发送给本地服务器，再由服务器请求

jsonp
通过script标的src属性加回调函数，服务器端返回这个回调函数实现，缺点只支持get请求，优点低版本ie浏览器也支持，jsonp只会发送一次请求
cors
通过ajax添加http Headers信息获取权限实现
会发送2次请求，ie10以下不支持

vue中改变this指向

关于this指向可以参考这篇文章：
https://blog.csdn.net/weixin_42115781/article/details/105239608

vue中data为什么是函数形式

js中只有函数(function)能构成作用域，当data是一个函数时，每个组件实例都有自己的作用域，这样每个实例才都是相互独立，互不影响的
如果data不是function，而是Object，每个组件实例的data都指向内存中同一个地址，其中一个组件实例修改了数据，其他组件实例也会相应修改

vue实现双向绑定的原理是什么

数据劫持 + 发布-订阅模式，通过Object.defineProperty()方法劫持各个属性的get()set()方法，在数据发生变动时通知订阅者，触发更新回调函数，重新渲染视图
数据劫持指当我们修改对象的某个属性时，vue会拦截该行为并进行额外操作或是修改返回结果
发布-订阅模式指对象的一种一对多的依赖关系，当对象发生改变时，所有依赖于它的对象都将得到通知，这个行为由发布订阅模式中的事件调度中心完成

发布订阅模式的优点是：

1. 发布者与订阅者互补干扰，实现了解耦
2. 可以作权限控制、节流处理，比如发布者发布的消息不希望所有的订阅者都接收到，可以在调度中心做处理

vue减少页面加载时间

1. 在打包vue项目时，所有的js、css文件都会被打包进vendor.js，浏览器加载完vendor.js文件后才会显示页面，如果引入的库太多导致vendor.js文件过大，就会造成项目打开缓慢
   解决方法：使用cdn或者其他服务器资源引用避免将js、css编译到vendor.js中，浏览器在加载时会异步的加载vendor.js和外部资源，从而节省时间
2. 路由懒加载/组件懒加载/全局懒加载
   使用懒加载可以避免第一次进入系统时因需要加载的页面过多导致页面打开速度慢
   组件懒加载
   下面展示了es6和vue两种写法，路由懒加载也是同理，主要是不能使用import引入文件
   
3. 压缩代码
4. loading动画

v-for中key的作用

1. 提高渲染性能
2. 避免数据混乱
   v-fow更新已被渲染过的列表时，采用就地复用原则，如果数据项被改变过，vue并不会移动dom来匹配数据项的顺序，而是复用这些元素，并且保证在特定索引下显示已被渲染过的每个元素。比如当你删除了某个数组中的倒数第二个元素，vue的做法是将最后一个元素变为倒数第二个元素并删除最后一个元素

vue刷新子组件：v-if

使用v-if可以实现重新加载子组件，将v-if使用在html元素上，表示删除这段dom结构，在组件上使用v-if表示销毁或重新加载该组件，会触发组件的生命周期钩子函数