Vue对Vue的理解Vue是一个渐进式构建数据驱动的框架，目标是通过API实现Vue的两大核心数据驱动组件系统：响应数据绑定和视图更新Vue生命周期Vue实例图LR从创建到销毁的过程开始创建-->初始化数据-->编译模板-->挂载DOM-->渲染-->更新-->渲染；update-->unloadlifecycle循环中有多个事件钩子，可以让开发者在控制整个vue实例过程时更容易形成良好的逻辑判断Createdandmountedcreatedmounted调用时机模板渲染成HTML之前template渲染成HTML，常用功能是初始化属性值，然后渲染成视图操作DOM节点timer在beforeDestroy()clearInterval(this.timer);这个。计时器=空；v-model的使用用于表单数据的双向绑定，其实就是语法糖，背后做了两件事操作：v-bind绑定value属性v-on绑定输入事件Vue响应式（双向）data)原理通过数据劫持结合发布订阅模式实现Vue2：通过Object.defineProperty()Getter劫持各个属性的setter，当数据发生变化时向订阅者发布消息，并触发相应的监听回调Vue3：justchange从Object.defineProperty到ES6的Proxy代理的数据劫持方式Vue3相比Vue2优化了双向数据绑定：Vue2的object.defineProperty一次只能劫持一个对象的单个属性，所以需要监控每一个的数据通过递归+遍历得到每个对象的属性；如果属性值是一个对象，同样需要深度遍历，可以一次性使用Vue3.0中的代理被劫持对象的所有属性的setter和getter，也可以作为数组的代理，动态添加特性。有13种被劫持的操作在性能上快了1.2到2倍：（1）diff方法优化了vue2中的虚拟dom。比较（每个节点不管写静态还是动态都会比较）vue3增加了静态标志（patchflag）和最后一个虚拟节点比较时，只比较有patch标志的节点（动态数据所在的节点）位于）;通过Flag信息知道当前要比较的节点的具体内容（二）静态改进vue2不考虑元素元素是否参与更新，每次都会重新创建然后渲染。对于不参与更新的元素，vue3会做静态提升，只会创建一次。渲染时可以直接复用(3)timelistenercachedefault下一次onClick会被视为动态绑定，所以每次都会跟踪它的变化，但是因为是同一个函数，所以不需要跟踪变化，并且它可以直接缓存和重用。(4)ssr渲染按需编译，体积比vue2大。x更小的组合API（类似于reacthooks）BetterTssupportExposescustomrenderingAPI更高级的组件Fragment:TemplatescanhavemultiplerootelementsVirtualDOM虚拟DOM是相对于浏览器渲染的真实DOM，在React出现之前，Vue等技术，改变页面内容只能遍历查询DOM树找到需要修改的DOM，然后修改样式行为或结构更新UI，但这种方式消耗大量计算资源.需要遍历整个DOM树，所以创建一个对应真实DOM树的虚拟DOM对象（JavaScript对象），DOM树用对象嵌套表示。那么DOM的每一次变化都会成为对象属性的变化。这样查询真实DOM树的性能开销可以低于通过diff算法查询真实DOM树的性能开销。节点递归生成虚拟DOM树-->通过diff算法对比虚拟DOM，渲染到真实DOM-->新的DOM操作使DOM树发生变化-->通过diff算法对比虚拟DOM，并将其呈现为真正的DOM键。更新虚拟DOM为虚拟DOM的每个节点VNode添加一个唯一的id，这样可以依赖key更快速准确的获取oldVnode中对应的VNode【不建议使用索引或者随机数的时候设置key，因为添加或删除子项时性能损失较大]v-if和v-showv-if判断元素是否存在DOM层级，会引起重排和重绘v-show判断是否渲染CSS层面的元素（其实元素一直存在）v-if和v-for优先v-ifv-forVue2优先Vue3优先解决方案：父元素使用v-if，子元素使用v-for计算属性computed(){list(){return[1,2,3].filter(item=>item!==2);}}data是一个函数，返回一个对象/data为什么要用return，因为一个组件可能会被调用多次，每次调用都会执行data函数，返回新的data对象，这样可以避免多次调用之间的数据污染Vue如何实现监听键盘事件@keyup。methodaddEventListener组件通信父子参数传递和方法调用：props/$emit,$parent/$children祖父母传递的参数：provide/injectAPI,$attrs/$listeners兄弟传递的参数：bus.js,Vuex路由传递参数：query,paramsfatherandsongrandchildren/brothersprops/$emit√refand$parent/$children√$attrs/$listeners√provide/inject√EventBus($emit/$on)√√√Vuex√√√localStorage/Cookie等可以删除数组。delete和Vue.deletedelete的区别：只有被删除的数组成员变为空/未定义，其他元素的键值不变。vue.delete：直接删除数组成员，改变数组的键值（对象是响应式的，确保删除能触发更新视图，该方法主要用于避免Vue无法检测到的限制属性被删除）计算属性computed和属性检测watchcmpputed：当且仅当computed属性依赖的数据发生变化时，会自动计算第一次运行computedwatch√×默认依赖深度（推荐使用时）shallowcalls，你模板渲染中只需要修改元数据适配性筛选，不异步昂贵，异步操作特性随页面变化而变化（用于计算）监控页面状态和变化（用于监控）Vue组件封装过程图LRVue.extend 创建组件-->vue.component 注册组件v-for并使用this.$refs报错domundefined组件初始化给th第一次渲染染色后的mounted循环中，只渲染了组件模板的静态数据，动态绑定的dom并没有初始化，所以mounted循环中的操作无法获取dom解决方法：将this.$nextTick放在v-for中绑定数据赋值后，即触发响应式更新后，进行操作。dom操作的操作是放在updated生命周期中的，但是每次视图更新时，都会触发操作。scoped的实现原理是通过PostCSS赋予所有dom的。添加了唯一的动态属性。通过PostCSS，在css选择器中增加了一个额外对应的属性选择器，用于选择组件中的dom槽。DefaultslotNamedslotscopeslotVueCLIsrcdirectory各个文件夹和文件的用法assets文件夹是存放静态资源的；components用于组件；router用于定义路由相关的配置；app.vue是一个应用程序主组件；main.js是static和assets入口文件的区别：webpack如何处理静态资源staticassetscontent类库项目资源资源是webpack直接引用打包的（static放别人的资源，assets放自己的资源）导入第三方库直接导入绝对路径在webpack中配置别名[?e?li?s]在webpack中配置plugins[?plu:genz]Vue-Router路由实现原理利用URL中的hash("#")利用HTML5中History接口的新方法Hash方式historymodeHashmodeHistorymode浏览器支持版本IE，低版本HTML5新API刷新Reload404URL中是否有#√×#。后面的hashchange不会重新加载，会触发hashchange事件渲染相应内容重新加载，会触发popState事件渲染相应内容。传参名称传参URL传参
