vue知识体系实用技巧总结

.box{background:red;}vue作为前端三大框架之一，可以说是前端开发者的必备技能。那么如何系统的学习和掌握vue呢？为此，我对知识体系做了一个简单的总结。请多多包涵，不足之处请指正。喜欢的话可以给个赞哦！本文主要讲一些vue开发中的实用技巧。监听组件的生命周期，比如父组件Parent，子组件Child，如果父组件监听到子组件mounted，就会做一些逻辑处理。常规的写法可能如下：//Parent.vue//Child.vuemounted(){this.$emit("mounted");}另外还有一个很简单的方式，子组件不需要任何处理，只需要在父组件被引用时通过@hook监听即可，代码如下：当然不仅可以监听mounted，还可以监听其他生命周期事件，比如：created,updated等等。watch的初始执行立即观察并响应Vue实例上的数据变化。类似于一些数据的监听回调，每当监听到的数据发生变化时，都会执行回调，进行后续操作。但是watch一个变量，在初始化的时候是不会执行的，如下例，需要在创建的时候手动调用一次。created(){this.getList();},watch:{keyWord:'getList',}可以用上面的方法，但是很麻烦。我们可以添加immediate属性，这样在初始化的时候会自动触发（不需要写created来调用），那么上面的代码可以简化为：watch:{keyWord:{handler:'getList',immediate:true}}watch有三个参数：handler：它的值是一个回调函数。即，检测到变化时应执行的函数deep：其值为true或false；确认是否深度监控。immediate：其值为true或false，确认是否以当前初始值执行handler的功能。路由参数变化组件在同路径页面跳转时不会更新路由参数变化，但是组件没有相应的更新。原因：主要原因是在创建或挂载的路由钩子函数中写入了获取参数。当路由参数改变时，这个生命周期不会重新执行。方案一：watchmonitorroutewatch:{//方法1//监听路由是否变化'$route'(to,from){if(to.query.id!==from.query.id){this.id=to.query.id;this.init();//重新加载数据}}}//方法2设置路由变化时的处理函数watch:{'$route':{handler:'init',immediate:true}}方案二：为了达到这个效果，可以给router-view加一个不同的key，这样即使是public组件，只要url改变了，这个组件肯定会重新创建。路由延迟加载Vue项目实现了按需路由加载（路由延迟加载）的3种方法：//1.vue异步组件技术：{path:'/home',name:'Home',component:resolve=>reqire(['path路径'],resolve)}//2、import()constHome=()=>import('ofes6proposalpath')//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'importcellComfrom'@/components/home/cellCom'components:{titleCom,bannerCom,cellCom}这样写了很多重复的代码，使用require.context可以写成constpath=require('path')constfiles=require.context('@/组件/家'，假,/\.vue$/)constmodules={}files.keys().forEach(key=>{constname=path.basename(key,'.vue')modules[name]=files(key).default||文件（key)})components:modulesrecursivecomponentrecursivecomponent:一个组件可以在它的模板中递归调用自己，只需要给组件设置名称component即可，但是需要注意的是必须给一个条件来限制数量，否则会throwAnerroroccurred:maxstacksizeexceededcomponentrecursion用于开发一些层次关系未知的特定独立组件。例如：级联选择器和树控件清除定时器或者事件监听因为项目中有些页面难免会遇到定时器或事件监控。但是在离开当前页面时，如果没有及时合理的清除定时器，会造成业务逻辑混乱，甚至应用卡顿。这时候需要清除定时器事件监听，即页面卸载（关闭）的生命周期函数，清除定时器。方法：{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;}.box{background:red;}vue代码翻译如下，所以我们在js中拼接的dom结构样式不会生效。.box[data-v-11c6864c]{background:red;}解决方法：将要改变的样式写在非范围在样式标签中。长列表性能优化大家应该都知道vue会通过object.defineProperty劫持数据来实现视图响应数据的变化。但是，有时候我们的组件是纯数据展示，没有任何变化，所以我们不需要vue来劫持我们的数据，在大量数据展示的情况下，这样可以显着减少组件的初始化时间。因此，我们可以通过object.freeze方法冻结一个对象。一旦对象被冻结，Vue就不会劫持数据。exportdefault{data:()=>({list:[]}),asynccreated(){constlist=awaitaxios.get('xxxx')this.list=Object.freeze(list)},methods:{//这里没有操作可以改变list的值}}另外需要注意的是这里只是冻结了list的值，并不会冻结引用。当我们需要响应式数据时，我们可以将值重新分配给列表。Contentdistribution(slot)槽也是一个HTML模板组件。这个模板是否显示以及如何显示由父组件决定。其实这里就突出了slot的两个核心问题，要不要显示，怎么显示。默认插槽也称为单个插槽和匿名插槽。这种插槽没有具体名称，一个组件只能有一个这样的插槽。命名槽和匿名槽没有name属性，所以称为匿名槽。然后，将名称属性添加到插槽中成为命名插槽。命名槽在一个组件中可以出现N次，出现在不同的位置，只需要使用不同的name属性来区分即可。作用域插槽作用域插槽可以是默认插槽或命名插槽。不同的是，函数Thedomainslot可以将数据绑定到slot标签上，这样它的父组件就可以获取到子组件的数据。>