9种必备的Vue技术，不信你全知道！

现在，Vue.js已成为前端开发的热门框架。有很多工程师利用Vue.js的便利性和强大功能。但是，我们完成的某些解决方案可能未遵循最佳做法。好吧，让我们看一下那些必备的Vue技术。【相关推荐：Vue.js视频教程】

1. 函数组件

函数组件 是无状态的，没有生命周期或方法，因此无法实例化

创建一个函数组件非常容易，你需要做的就是在SFC中添加一个 functional: true 属性，或者在模板中添加 functional。由于它像函数一样轻巧，没有实例引用，所以渲染性能提高了不少。

函数组件依赖于上下文，并随着其中给定的数据而突变。

<template functional>
  <div class="book">
    {{props.book.name}} {{props.book.price}}
  </div>
</template>

<script>
Vue.component('book', {
  functional: true,
  props: {
    book: {
      type: () => ({}),
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement(
      'div',
      {
        attrs: {
          class: 'book'
        }
      },
      [context.props.book]
    )
  }
})
</script>

2.深层选择器

有时，你需要修改第三方组件的CSS，这些都是 scoped 样式，移除 scope 或打开一个新的样式是不可能的。

现在，深层选择器 >>> /deep/ ::v-deep 可以帮助你。

<style scoped>
>>> .scoped-third-party-class {
  color: gray;
}
</style>

<style scoped>
/deep/ .scoped-third-party-class {
  color: gray;
}
</style>

<style scoped>
::v-deep .scoped-third-party-class {
  color: gray;
}
</style>

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
        <mark>来源gaodaimacom搞#^代%!码网</mark>}
      }
    }
  }
},
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 是事件对象的一个特殊变量。它在某些场景下为复杂的功能提供了更多前端的相关知识，可访问 前端学习网站！！

以上就是9种必备的Vue技术，不信你全知道！的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)