听说你熟练使用Vue，那么这9大Vue技术你掌握了吗？不信你都知道！
>>>.scoped-third-party-class{颜色：灰色;}来源：公众号《前端全栈开发者》现在，Vue.js已经成为前端开发的流行框架。许多工程师都在利用Vue.js的便利性和强大功能。但是，我们已经完成的一些解决方案可能不遵循最佳实践。好吧，让我们来看看那些必备的Vue技术。1.函数式组件函数式组件是无状态的，没有生命周期和方法，因此不能被实例化。创建功能组件非常容易。您需要做的就是向SFC添加一个functional:true属性，或者向模板添加functional。由于它作为函数很轻，没有实例引用，所以渲染性能提高了很多。功能组件取决于上下文并随其中给定的数据发生变化。{{props.book.name}}{{props.book.price}}
2.Deepselector有时候，你需要修改第三方组件的CSS，这些是scoped样式，去掉scope或者开一个新的造型是不可能的。现在，深度选择器>>>/deep/::v-deep可以帮助你。
>>>.scoped-third-party-class{颜色：灰色;}/deep/.scoped-third-party-class{颜色：灰色;}::v-deep.scoped-third-party-class{color:gray;}3.高级“watcher”立即执行当被监控的prop发生变化时，watchhandler会触发。但有时，它会在组件创建后出现。是的，有一个简单的解决方案：在创建的钩子中调用处理程序，但这看起来并不优雅并且增加了复杂性。或者，您可以向观察者添加一个立即属性：watch:{value:{handler:'printValue',immediate:true}},methods:{printValue(){console.log(this.value)}}deepwatchsometimes,watch属性是一个对象，但对其属性的更改不能触发wacher处理程序。在这种情况下，向观察者添加deep:true可以检测其属性的变化。请注意，当对象具有多层时，深层可能会导致一些严重的性能问题。最好考虑使用更扁平的数据结构。data(){return{value:{one:{two:{three:3}}}}},watch:{value:{handler:'printValue',deep:true}},methods:{printValue(){console.log(this.value)}}Multiplehandlers其实watch可以设置为数组，支持的类型有String、Function、Object。当触发时，注册的watchhandlers将被一个一个调用。watch:{value:['printValue',function(val,oldVal){console.log(val)},{handler:'printValue',deep:true}]},方法：{printValue(){console.log(this.value)}}订阅多个变量Mutationwatchers无法监听多个变量，但我们可以将目标组合在一起作为一个新的计算，并观察这个新的“变量”。computed:{multipleValues(){return{value1:this.value1,value2:this.value2,}}},watch:{multipleValues(val,oldVal){console.log(val)}}4.事件参数：$event$event是事件对象的特殊变量。它在某些场景下为复杂的功能提供了更多的可选参数。本机事件在本机事件中，此值与默认事件（DOM事件或窗口事件）相同。自定义事件在自定义事件中，该值是从其子组件捕获的值。5.router参数解耦我相信这是大多数人在组件中处理路由器参数的方式：exportdefault{methods:{getRouteParamsId(){returnthis.$route.params.id}}}强耦合，限制了组件的灵活性。正确的解决方案是在路由器中添加props。constrouter=newVueRouter({routes:[{path:'/:id',component:Component,props:true}]})这样组件就可以直接从props获取params了。exportdefault{props:['id'],methods:{getParamsId(){returnthis.id}}}另外，你也可以传入函数返回自定义的props。constrouter=newVueRouter({routes:[{path:'/:id',component:Component,props:router=>({id:route.query.id})}]})6.双向自定义组件绑定允许自定义组件在使用v-model时自定义道具和事件。默认情况下，组件上的v-models使用value作为属性，使用Input作为事件，但是某些输入类型（例如复选框和单选按钮）可能希望将value属性用于不同的目的。在这种情况下，请使用模型选项来避免冲突。v-model是众所周知的双向绑定。input是默认的更新事件。该值可以通过$emit更新。唯一的限制是该组件需要一个标签与value属性绑定。还有一个双向绑定的解决方案，同步修饰符。与v-model不同，它不需要您的组件具有标签并为其绑定值。它只会触发update:通过事件系统改变属性。<自定义组件：value.sync="value"/>7.组件生命周期Hook通常可以这样监听子组件（比如挂载）的生命周期还有一个简单的解决方案，你可以在Vue内部系统中使用@hook:mount。8.事件监听API比如页面挂载时添加定时器，销毁设备时需要清除定时器。这看起来不错。坦率地说，只有在beforeDestroy中使用this.timer来获取计时器ID才有意义。不是刻薄，而是变量越少，性能越好。exportdefault{data(){return{timer:null}},mounted(){this.timer=setInterval(()=>{console.log(Date.now())},1000)},beforeDestroy(){clearInterval(this.timer)}}使其只能在生命周期挂钩中访问。使用$once删除不必要的东西。exportdefault{mounted(){lettimer=nulltimer=setInterval(()=>{console.log(Date.now())},1000)this.$once('hook:beforeDestroy',()=>{clearInterval(timer)})}}9.以编程方式加载组件在某些情况下，以编程方式加载组件要优雅得多。例如，可以通过全局上下文$popup()或$modal.open()打开弹出窗口或模态窗口。importVuefrom'vue'importPopupfrom'./popup'constPopupCtor=Vue.extend(Popup)constPopupIns=newPopupCtr()PopupIns.$mount()document.body.append(PopupIns.$el)Vue.prototype.$popup=Vue.$popup=function(){PopupIns.open()}ElementUI实现了一个结构良好的模式组件，允许自定义API控制实例的生命周期。该理论与我上面演示的几乎相同。以上是与Vue2.x相关的9个技巧，希望通过这篇文章，你可以更好地理解框架的使用。如果您认为这篇文章很棒，请将其分享到其他社交网络。推荐阅读2020年12个Vue.js开发技巧和技巧在Vue.js语法中编写更好的v-for循环的6个技巧React.js和Vue.jsVue技巧的并排比较MakingElementsinVue3inVue3FadeinVue3tutorialwhenscrollingview(forVue2users)
