八个很棒的Vue开发技巧

时间：2023-03-13 05:58:36 科技观察

Outerlayer>>>.el-checkbox{display:block;字体大小：26px；.el-checkbox__label{字体大小：16px；}}1。路由参数解耦通常在组件中使用路由参数，大部分人会做如下操作。exportdefault{methods:{getParamsId(){returnthis.$route.params.id}}}在组件中使用$route会导致与其相应路由的高耦合，通过将其限制为某些URL来限制组件的灵活性性别。正确的做法是通过props来解耦。constrouter=newVueRouter({routes:[{path:/user/:id,component:User,props:true}]})设置路由的props属性为true后，组件可以通过props接收params参数。exportdefault{props:[id],methods:{getParamsId(){returnthis.id}}}你也可以通过函数模式返回props。constrouter=newVueRouter({routes:[{path:/user/:id,component:User,props:(route)=>({id:route.query.id})}]})2.功能组件函数组件是无状态的，它不能被实例化，也没有任何生命周期或方法。创建功能组件也很简单，只需在模板中添加功能声明即可。它一般适用于只依赖于外部数据变化的组件，并且由于其轻量级提高了渲染性能。组件需要的一切都通过上下文参数传递。它是一个上下文对象，具体属性见文档。这里的props是一个包含所有绑定属性的对象。

父组件使用从@/components/List导入List.vueexportdefault{components:{List},data(){return{list:[{title:title,content:content}],currentItem:}}}3.样式作用域开发中修改第三方组件的样式是很常见的，但是由于样式隔离对于scoped属性，可能需要删除scoped或启动另一种样式。这些做法有副作用（组件样式污染，缺乏优雅），在css预处理器中使用样式渗透才能生效。我们可以使用>>>或者/deep/来解决这个问题：Outerlayer>>>.el-checkbox{display:block;字体大小：26px；.el-checkbox__label{字体大小：16px；}}/deep/.el-checkbox{显示：块；字体大小：26px；.el-checkbox__label{字体大小：16px；}}Advancedfor4.watch使用watch在监听器属性改变时触发，有时我们希望watch在组件创建后立即执行。可能想到的方式是在创建生命周期中调用一次，但这不是一种优雅的写法，所以也许我们可以使用这样的东西。exportdefault{data(){return{name:Joe}},watch:{name:{handler:sayName,immediate:true}},methods:{sayName(){console.log(this.name)}}}DeepListening监听一个对象，当对象内部属性发生变化时，watch不会被触发，所以我们可以对其设置深度监控。导出默认{数据：{学生：{名称：乔，技能：{运行：{速度：快速}}}}，观看：{学生：{处理程序：sayName，深度：真}}，方法：{sayName（）{console.log(this.studen)}}}触发监听器执行多个方法使用数组，可以设置多种形式，包括字符串、函数和对象。exportdefault{data:{name:Joe},watch:{name:[sayName1,function(newVal,oldVal){this.sayName2()},{handler:sayName3,immaediate:true}]},methods:{sayName1(){console.log(sayName1==>,this.name)},sayName2(){console.log(sayName2==>,this.name)},sayName3(){console.log(sayName3==>,this.name)}}}5.watch监控多个变量watch本身不能监控多个变量。然而，我们可以通过返回一个具有计算属性的对象然后监听该对象来“监听多个变量”。exportdefault{data(){return{msg1:apple,msg2:banana}},computed:{msgObj(){const{msg1,msg2}=thisreturn{msg1,msg2}}},watch:{msgObj:{处理程序(newVal,oldVal){if(newVal.msg1!=oldVal.msg1){console.log(msg1ischange)}if(newVal.msg2!=oldVal.msg2){console.log(msg2ischange)}},deep:true}}}6.事件参数$event$event是事件对象的一个??特殊变量，它为我们在某些场景下实现复杂的功能提供了更多可用的参数。NativeEvents：行为与NativeEvents中的默认事件对象相同。exportdefault{方法：{inputHandler(msg,e){console.log(e.target.value)}}}自定义事件：在自定义事件中表示为捕获从子组件抛出的值。exportdefault{methods:{customEvent(){this.$emit(custom-event,somevalue)}}exportdefault{methods:{customEvent(index,e){console.log(e)//一些价值}}}7。程序化的事件监听器比如在页面挂载时定义一个定时器，页面销毁时需要清除定时器。这似乎不是问题。但是仔细一看，this.timer的唯一目的就是为了能够在beforeDestroy中拿到timer的编号，否则是没有用的。exportdefault{mounted(){this.timer=setInterval(()=>{console.log(Date.now())},1000)},beforeDestroy(){clearInterval(this.timer)}}如果可能最好最好只访问生命周期挂钩。这不是一个严重的问题，但可以被认为是混乱。我们可以通过使用$on或$once来监控页面生命周期销毁来解决这个问题：()=>{console.log(msg)},1000)this.$once(hook:beforeDestroy,function(){clearInterval(timer)})}}使用这个方法，即使我们同时创建多个定时器，不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。8.监控组件生命周期通常我们使用$emit来监控组件生命周期，父组件接收事件进行通知。子组件exportdefault{mounted(){this.$emit(listenMounted)}}父组件其实有一个简单的方法就是在组件内部不做任何改动的情况下，使用@hook来监听组件的生命周期。同样，create、update等也可以使用这个方法。综上所述，以上就是我今天分享给大家的关于Vue的8个开发技巧。我希望这些提示对您有用。