现在，Vue.js已成为前端开发的热门框架。有很多工程师利用Vue.js的便利性和强大功能。但是，我们完成的某些解决方案可能未遵循最佳做法。好吧，让我们看一下那些必备的Vue技术。
来源：公众号《前端全栈开发者》
1. 函数组件
函数组件是无状态的，没有生命周期或方法，因此无法实例化
创建一个函数组件非常容易，你需要做的就是在SFC中添加一个 functional: true 属性，或者在模板中添加 functional。由于它像函数一样轻巧，没有实例引用，所以渲染性能提高了不少。
函数组件依赖于上下文，并随着其中给定的数据而突变。
{{props.book.name}} {{props.book.price}}
2.深层选择器
有时，你需要修改第三方组件的CSS，这些都是 scoped 样式，移除 scope 或打开一个新的样式是不可能的。
现在，深层选择器 >>> /deep/ ::v-deep 可以帮助你。
3.高级“watcher”
/ 立即执行 /
当被监控的prop发生突变时，watch handler就会触发。但有时，它是在组件被创建后才出现的。
是的，有一个简单的解决方案：在 created 的钩子中调用处理程序，但这看起来并不优雅，同时也增加了复杂性。
或者，你可以向观察者添加 immediate 属性：
watch: { value: { handler: 'printValue', immediate: true }},methods : { printValue () { console.log(this.value) }}/ 深度监听 /
有时，watch 属性是一个对象，但是其属性突变无法触发 wacher 处理程序。在这种情况下，为观察者添加 deep:true 可以使其属性的突变可检测到。
请注意，当对象具有多个层时，深层可能会导致一些严重的性能问题。最好考虑使用更扁平的数据结构。
data () { return { value: { one: { two: { three: 3 } } } }},watch: { value: { handler: 'printValue', deep: true }},methods : { printValue () { console.log(this.value) }}/ 多个handlers /
实际上，watch 可以设置为数组，支持的类型为 String、Function、Object。触发后，注册的watch处理程序将被一一调用。
watch: { value: [ 'printValue', function (val, oldVal) { console.log(val) }, { handler: 'printValue', deep: true } ]},methods : { printValue () { console.log(this.value) }}/ 订阅多个变量突变 /
watcher 不能监听多个变量，但我们可以将目标组合在一起作为一个新的 computed，并监视这个新的 "变量"。
computed: { multipleValues () { return { value1: this.value1, value2: this.value2, } }},watch: { multipleValues (val, oldVal) { console.log(val) }}4.事件参数：$event
$event 是事件对象的一个特殊变量。它在某些场景下为复杂的功能提供了更多的可选参数。
/ 原生事件 /
在原生事件中，该值与默认事件(DOM事件或窗口事件)相同。
/ 自定义事件 /
在自定义事件中，该值是从其子组件中捕获的值。
5.路由器参数解耦
我相信这是大多数人处理组件中路由器参数的方式：
export default { methods: { getRouteParamsId() { return this.$route.params.id } }}在组件内部使用 $route 会对某个URL产生强耦合，这限制了组件的灵活性。
正确的解决方案是向路由器添加props。
const router = new VueRouter({ routes: [{ path: '/:id', component: Component, props: true }]})这样，组件可以直接从props获取 params。
export default { props: ['id'], methods: { getParamsId() { return this.id } }}此外，你还可以传入函数以返回自定义 props。
const router = new VueRouter({ routes: [{ path: '/:id', component: Component, props: router => ({ id: route.query.id }) }]})6.自定义组件的双向绑定
允许自定义组件在使用 v-model 时自定义使props和event。默认情况下，组件上的v-model使用value作为属性，Input作为事件，但一些输入类型，如复选框和单选按钮可能希望使用value属性来实现不同的目的。在这种情况下，使用model选项可以避免冲突。
v-model 是众所周知的双向绑定。input 是默认的更新事件。可以通过 $emit 更新该值。唯一的限制是该组件需要 标记才能与 value 属性绑定。
双向绑定还有另一种解决方案，即 sync 修饰符。与 v-model 不同的是，它不需要你的组件有一个 标签并将值绑定到它上面。它仅触发 update: 通过事件系统对属性进行突变。
7.组件生命周期 Hook
通常，你可以像这样监听子组件的生命周期(例如 mounted)
还有另一种简单的解决方案，你可以改用 @hook:mount 在Vue内部系统中使用。
8.事件监听APIs
比如，在页面挂载时增加一个定时器，但销毁时需要清除定时器。这看起来不错。
坦白地说，只有在 beforeDestroy 中使用 this.timer 来获取计时器ID才有意义。并非刻薄，而是变量越少，性能越好。
export default { data () { return { timer: null } }, mounted () { this.timer = setInterval(() => { console.log(Date.now()) }, 1000) }, beforeDestroy () { clearInterval(this.timer) }}使其只能在生命周期钩子内访问。使用 $once 来放弃不必要的东西。
export default { mounted () { let timer = null timer = setInterval(() => { console.log(Date.now()) }, 1000) this.$once('hook:beforeDestroy', () => { clearInterval(timer) }) }}9.以编程方式挂载组件
在某些情况下，以编程方式加载组件要优雅得多。例如，可以通过全局上下文 $popup() 或 $modal.open() 打开弹出窗口或模态窗口。
import Vue from 'vue'import Popup from './popup'const PopupCtor = Vue.extend(Popup)const PopupIns = new PopupCtr()PopupIns.$mount()document.body.append(PopupIns.$el)Vue.prototype.$popup = Vue.$popup = function () { PopupIns.open()}Element UI 实现了结构良好的模式组件，该组件允许使用自定义API来控制实例的生命周期。该理论与我上面演示的几乎相同。
这是有关Vue 2.x的9种技术，希望在本文中你可以对使用框架有更好的了解。如果你认为本文很棒，请在其他社交网络上分享。
如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。
作者简介：Web前端工程师，全栈开发工程师、持续学习者。
