1.动态组件结合v-for循环使用环境如图，这是v-for渲染的列表（目前这部分刚刚开始，只有一个），圆是一个组件，也就是实际使用v-for动态组件是基础组件从头开始??importColorInfrom'@/components/Magic/ColorIn.vue'importLineInfrom"@/components/Magic/LineIn.vue”；从“@/components/Magic/Header.vue”导入LineIn；从“@/components/Magic/Footer.vue”导入LineIn；导出默认值{components:{ColorIn,LineIn,Header,Footer}}接下来是使用动态v-for动态组件，componentList:['ColorIn','LineIn','Header','Footer']使用下面的代码把代码循环依次编译出来的效果是/LineIn>2.观看高级使用立即y执行使用环境。比如场景是页面一进来就调用拉取列表数据getList()，然后监听路由的$route。query.id则触发列表数据的更新。为了让它一开始就执行，我们需要在created()生命周期中进行一次拉取数据。方法watch:{'$route.query.id':{handle(){this.getList();},}},created(){this.getList();}，但是使用immediate可以立即执行，改写代码如下watch:{'$route.query.id':{handle(){这个.getList();},immediate:true}},使用环境进行深度监控时对象的内部属性watch无法监控到变化。在这种情况下，您需要使用深度监控。实际使用中，只需要设置deep:true即可开启深度监控data(){return{queryList:{count:0,name:'',}}},watch:{queryList:{handle(newValue,oldValue){//dosomething},deep:true}},计算属性的setter实际使用是我们平时使用的getter，但其实它还有一个setter，当计算属性的fullName时触发一个更新，它会触发设置回调data(){return{firstName:'',lastName:'',}},computed:{fullName:{get(){return`${this.firstName}${this.lastName}`;},set(newValue){letnames=newValue.split('');this.firstName=名字[0]；this.lastName=姓名[1]；}}},$on('hook:lifecycle')来简化窗口监控的实际使用。){window.removeEventListener('resize',this.resizeHandler);}重写后的代码是，与上面的写法相比，这种写法的好处是可以挂在beforeDestroy生命周期中开启一个事件监听器加载移除事件侦听器的事件会比上面的写法更安全，有助于避免内存泄漏和事件冲突mounted(){window.addEventListener('resize',this.resizeHandler);this.$on("hook:beforeDestroy",()=>{window.removeEventListener('resize',this.resizeHandler);})}子组件@hook:生命周期监听子组件的生命周期回调实际上被v-pre环境中不需要编译的html代码可以使用v-pre，可以提高性能，实际使用{{message}}//即使在data中定义了message，渲染之后还是{{message}}v-once环境只需要渲染一次，适合之后不会更新的内容渲染，减少性能开销。实际上使用{{message}}//message的值会被编译渲染，但是编译后再次修改message的值不会触发更新。v-pre和v-once的区别v-pre相当于不编译，直接显示。v-once相当于只编译一次，后续更新不会编译Vue.set()使用环境①当你使用索引直接设置数组项时②当你修改数组长度时③当添加或删除对象时属性，由于Object.defineprototype()方法的限制，数据不响应更新。实际上使用这个.$set(arr,index,item);$forceUpdate()使用环境$set()也有一定的使用限制。当对象没有这个属性时，$set()会报错。这种情况直接修改数据，然后使用$forceUpdate()强制刷新视图。其实可以用this.$forceUpdate();keep-alive使用环境当这个页面没有数据更新，或者想保存状态，下次进来还是这样，这样如淘宝查看列表页，点击查看详情，返回列表页仍然到上次浏览的地方，可以用keep-alive的实际使用分为与路由一起使用，使用max，include，exclude，以及特殊生命周期activated和deactivated$route路由信息$route.query.id用于获取路由值的信息，如路由后缀?id=1，$route.query.id得到的值为1$route.meta.flag用于获取路由元中的信息。路由信息中的meta是可以自定义的。我的通用导航栏当前是selectednav用来匹配$route.meta.flag来获取当前页面应该激活哪个tab。比如所有的百度路由都以/baidu为前缀，那么路由的base可以设置为/baiduexportconstrouter=newRouter({base:'/baidu/',}另外打包的时候请修改config/index.js的buildblock中的assetsPublicPath为'/baidu/'，否则打包后找不到资源文件module.exportsofthepath={build:{assetsPublicPath:'/baidu/',}}用法全局路由钩子的场景一般是用户的登录认证router.beforeEach((to,from,next)=>{//必须调用next()才能进入下一页if(path==='/login'){next()}else{if(token){next();}else{next('/login');}}})组件路由钩子中访问这个组件路由的钩子一开始还没有初始化,andcannotaccessthevueinstancebeforeRouteEnter(to,from,next){//这里不能访问组件实例，this===undefinednext(vm=>{//通过vm访问组件实例})}$routerouting资讯tiondoesnotrefresh问题使用场景有时候，当你从/user?id=1跳转到/user?id=2时，因为渲染了同一个User组件，导致路由被重用。这个时候页面还是会是用户1的信息解决方案组件内部的路由守卫beforeRouteUpdate(to,from,next){//当当前路由发生变化时调用，但该组件被重用//例如，对于具有动态参数的路径/foo/:id，当在/之间跳转时foo/1and/foo/2,//由于将渲染相同的Foo组件，因此组件实例将被重用。在这种情况下将调用此钩子。//可以访问组件实例`this`}，将key绑定到使用watch监听路由watch：{'$route':{hander(){//dosomething...},immediate:true//如果是第一次加载则触发}}$emit传参并获取值父组件和子组件。在实际项目开发中，你可能会遇到$emit的值和父组件的index都被取到的情况，但是按照之前的写法，只能取其中一个值，要么是子组件或父组件，不能同时拥有。组件入参this.$emit('uploadSuccess',res);父组件入参方法访问参数uploadLogoImage(){console.log(arguments[0]);//索引console.log(arguments[1][0]);//res}，样式穿透使用环境一般在修改插件样式时用的比较多。实际使用分为两种，一般在stylus中使用>>>，less中使用/deep/，没有sass经验，不做解释>>>.el-dialog.el-dialog__body{padding0text-aligncenterborder-radius004px4px}/deep/.el-dialog.el-dialog__body{padding0text-aligncenterborder-radius004px4px}Object.freeze()使用环境我们都知道vue使用Object.defineProperty来双向绑定数据，仅用于显示对于长列表，您可以使用Object.freeze()将其冻结，使其无法修改，从而提高性能。实际上使用getList().then(res=>{this.list=Object.freeze(res.data.result);})值得注意的是，改变list的值不会更新，但是改变引用会触发组件更新通信技巧props$emit$attrs&$listenersprovide&injectvuexObservableeventBus$refsslot-scope&v-slotscopedSlots$parent&$children&$root父子组件参数同时获取使用环境，有时在父组件，需要获取子组件中$emit传过来的值，需要获取父组件v-for的当前索引值。子组件进入this.$emit('uploadSuccess',res);父组件入口实际使用uploadLogoImage(){console.log(arguments[0]);//索引console.log(arguments[1][0]);//res}，mixins的使用环境一般用于获取验证码、收藏、点赞等，通用且逻辑相同（部分逻辑根据不同页面不同，不建议使用mixins)等场景可以实际使用这里我直接封装了一个新建vue窗口的mix-in方法。引入之后，mix-in中的所有数据、方法、生命周期都会被共享//openWindow.jsexportdefault{methods:{openUrl(url){constlink=this.$router.resolve({路径:url});window.open(link.href,'_blank');},}}//其他页面使用importopenWindowfrom"../../mixins/openWindow";exportdefault{mixins:[openWindow],}注意事项（使用的页面统称为组件）①Mix-in优先于组件执行②当mix-in中的属性或方法与组件中的属性或方法名相同时，mix-in中的值以component为准（结合前面的规则，因为mix-in先执行，所以component会覆盖mixin）③比如A页面和B页面使用同一个mixin，A页面和B页面的状态也是独立的qs使用场景，使用路由拼接方式get传输（?a=1&b=2），而不是实际使用的json方式//安装依赖npminstallqs--save//在页面中或者直接在api.js,useimportqsfrom'qs'qs.stringify(params)//在axios拦截器中直接使用importqsfrom'qs'axios.interceptors.request.use(config=>{if(config.method==='get'){config.data=qs.stringify(config.data)})v-for绑定键不推荐使用索引。主要原因是有时候v-for列表可能会有删除、交换位置等操作。所以不推荐使用v-for的keybinding索引方案。建议使用另一个具有唯一值的变量，比如后台给你的id。反正只要唯一，不会重复，不建议v-for和v-if配合，主要是v-for的优先级高于v-if。也就是说，假设一共有50条数据，即使经过v-if，也只剩下25条数据可以显示，但是v-for已经循环了50条数据。数据，解决方案是先用一个计算属性过滤数据，再用v-for循环过滤数据解决方案。使用computed计算属性过滤列表，过滤后只留下需要的数据document.body.contentEditable操作方法打开控制台，输入document.body.contentEditable=true，然后回车，网页就可以像word一样编辑了，很方便测试页面布局的抗压能力
