vue知识体系实用技巧总结

.box{background:red;}vue作为前端三大框架之一，可以说是前端开发者的必备技能。那么如何系统的学习和掌握vue呢？为此，我对知识体系做了一个简单的总结。请多多包涵，不足之处请指正。喜欢的话可以给个赞哦！本文主要讲讲Vue开发中的一些实用技巧。相关推荐总结vue基础知识体系介绍总结几种vue-router使用技巧搭建vue-cli移动端H5开发模板，监控组件生命周期比如有父组件父组件子组件子，如果是父组件component监听child组件挂载时，会做一些逻辑处理。常规的写法可能如下：//Parent.vue//Child.vuemounted(){this.$emit("mounted");}另外还有一个很方法很简单，子组件不需要做任何处理，只需要在父组件被引用时通过@hook监听即可，代码如下：当然这里不仅可以监控mounted，还可以监控其他生命周期事件，比如created、updated等。watch的初始执行立即观察并响应Vue实例上的数据变化。类似于一些数据的监听回调，每当监听到的数据发生变化时，都会执行回调，进行后续操作。但是watch一个变量，在初始化的时候是不会执行的，如下例，需要在创建的时候手动调用一次。created(){this.getList();},watch:{keyWord:'getList',}可以用上面的方法，但是很麻烦。我们可以添加immediate属性，这样在初始化的时候会自动触发（不需要Writecreated来调用），那么上面的代码可以简化为：watch:{keyWord:{handler:'getList',immediate:true}}watch有三个参数handler：它的值是一个回调函数。即，检测到变化时应执行的函数deep：其值为true或false；确认是否深度监控。immediate：其值为true或false，确认是否以当前初始值执行handler的功能。路由参数变化组件在同路径页面跳转时不会更新路由参数变化，但是组件没有相应的更新。原因：主要原因是在创建或挂载的路由钩子函数中写入了获取参数。当路由参数改变时，这个生命周期不会重新执行。方案一：watchmonitorroutewatch:{//方法一//监听路由是否变化'$route'(to,from){if(to.query.id!==from.query.id){this.id=to.query.id;this.init();//重新加载数据}}}//方法二设置路由变化时的处理函数watch:{'$route':{handler:'init',immediate:true}}方案二：按顺序要达到这个效果，可以给router-view加一个不同的key，这样即使是public组件，只要url改变了，这个组件肯定会重新创建。路由懒加载Vue项目中实现路由按需加载（路由懒加载）的方式有3种：//1.Vue异步componenttechnology:{path:'/home',name:'Home',component:resolve=>require(['path'],resolve)}//2、es6提案的import()constHome=()=>import('path')//3.webpack提供的require.ensure(){path:'/home',name:'Home',component:r=>require.ensure([],()=>r(require('pathpath')),'demo')}require.context()require.context(directory,useSubdirectories,regExp)directory:表示要检索的目录useSubdirectories:是否检索子目录regExp:匹配文件的正则表达式，一般是文件名场景：如果页面需要导入多个组件，原写法：importtitleComfrom'@/components/home/titleCom'importbannerComfrom'@/components/home/bannerCom'importcellCom来自“@/components/home/cellCom”组件：{titleCom,bannerCom,cellCom}这样写了很多重复的代码，使用require.context可以写成constpath=require('path')constfiles=require.context('@/components/home',false,/\.vue$/)constmodules={}files.keys().forEach(key=>{constname=path.basename(key,'.vue')modules[name]=files(key).default||files(key)})组件：模块递归组件递归组件：其中的组件可以在模板中递归调用自己，只需要为组件设置名称component即可。但是需要注意的是，必须给出一个条件来限制个数，否则会报错：maxstacksizeexceededcomponent递归用于开发一些具体有用的组件。层次关系未知的独立组件。例如：级联选择器和树控件清除定时器或事件监听，因为项目中有些页面难免会遇到需要定时器或者事件监听器的情况。但是在离开当前页面时，如果没有及时合理的清除定时器，会造成业务逻辑混乱，甚至应用卡顿。这时候需要清空定时器事件监听，即页面卸载（关闭）的生命周期函数，清空定时器。方法：{resizeFun(){this.tableHeight=window.innerHeight-document.getElementById('table').offsetTop-128},setTimer(){this.timer=setInterval(()=>{})},clearTimer(){//清除定时器clearInterval(this.timer)this.timer=null}},mounted(){this.setTimer()window.addEventListener('resize',this.resizeFun)},beforeDestroy(){window.removeEventListener('resize',this.resizeFun)this.clearTimer()}自定义路径别名我们也可以在基础配置文件中添加自己的路径别名resolve:{extensions:['.js','.vue','.json'],别名：{'vue$':'vue/dist/vue.esm.js','@':resolve('src'),'assets':resolve('src/assets')}}然后当我们导入组件时，我们可以这样写：//importYourComponentfrom'/src/assets/YourComponent'importYourComponentfrom'assets/YourComponent'这样不仅解决了路径太长的麻烦，也解决了相对的麻烦小路。之所以动态修改dom的样式：因为我们会在.vue文件中给样式追加scoped。这样模板dom中的样式就可以生效了，但是生效后最终的样式不是我们写的样式名，而是编码后的样式。例如：.box{background:red;}Vue翻译代码如下，所以我们在js中拼接的dom结构样式不会生效。.box[data-v-11c6864c]{背景：红色；}解决方法：将要改变的样式写在non-scopedstyle标签中。长列表性能优化大家应该都知道vue会通过object.defineProperty劫持数据来实现视图响应数据的变化。但是，有时候我们的组件是纯数据展示，没有任何变化，所以我们不需要vue来劫持我们的数据，在大量数据展示的情况下，这样可以显着减少组件的初始化时间。因此，我们可以通过object.freeze方法冻结一个对象。一旦对象被冻结，Vue就不会劫持数据。exportdefault{data:()=>({list:[]}),asynccreated(){constlist=awaitaxios.get('xxxx')this.list=Object.freeze(list)},方法：{//这里的所有操作都不能改变list的值}}另外需要注意的是这里只是冻结了list的值，并不会冻结引用。当我们需要响应式数据时，我们可以将值重新分配给列表。Contentdistribution(slot)槽也是一个HTML模板组件。这个模板是否显示以及如何显示由父组件决定。其实这里就突出了slot的两个核心问题，要不要显示，怎么显示。默认插槽也称为单个插槽和匿名插槽。这种插槽没有具体名称，一个组件只能有一个这样的插槽。namedslot匿名槽没有name属性，所以称为匿名槽。然后，将名称属性添加到插槽中成为命名插槽。命名槽在一个组件中可以出现N次，出现在不同的位置，只需要使用不同的name属性来区分即可。Scopeslot作用域槽可以是默认槽也可以是命名槽，不同的是作用域槽可以绑定数据到slot标签，这样它的父组件就可以获取到子组件的数据。>