作为一位Vue工程师，这些开发技巧你都会吗？
WahFung 人气:0
# 路由参数解耦
一般在组件内使用路由参数，大多数人会这样做：
``` js
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
```
在组件中使用 `$route` 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
正确的做法是通过 `props` 解耦
``` js
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: true
}]
})
```
将路由的 `props` 属性设置为 `true` 后，组件内可通过 `props` 接收到 `params` 参数
``` js
export default {
props: ['id'],
methods: {
getParamsId() {
return this.id
}
}
}
```
另外你还可以通过函数模式来返回 `props`
``` js
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
```
文档：[https://router.vuejs.org/zh/guide/essentials/passing-props.html](https://router.vuejs.org/zh/guide/essentials/passing-props.html)
# 函数式组件
函数式组件是无状态，它无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加 `functional` 声明即可。一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。
组件需要的一切都是通过 `context` 参数传递。它是一个上下文对象，具体属性查看[文档](https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6)。这里 `props` 是一个包含所有绑定属性的对象。
函数式组件
``` html
```
父组件使用
``` html
```
``` js
import List from '@/components/List.vue'
export default {
components: {
List
},
data() {
return {
list: [{
title: 'title',
content: 'content'
}],
currentItem: ''
}
}
}
```
文档：[https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6](https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6)
# 样式穿透
在开发中修改第三方组件样式是很常见，但由于 `scoped` 属性的样式隔离，可能需要去除 `scoped` 或是另起一个 `style` 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。
我们可以使用 `>>>` 或 `https://img.qb5200.com/download-x/deep/` 解决这一问题:
``` scss
```
``` scss
```
# watch高阶使用
### 立即执行
`watch` 是在监听属性改变时才会触发，有些时候，我们希望在组件创建后 `watch` 能够立即执行
可能想到的的方法就是在 `create` 生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法
``` js
export default {
data() {
return {
name: 'Joe'
}
},
watch: {
name: {
handler: 'sayName',
immediate: true
}
},
methods: {
sayName() {
console.log(this.name)
}
}
}
```
### 深度监听
在监听对象时，对象内部的属性被改变时无法触发 `watch` ，我们可以为其设置深度监听
``` js
export default {
data: {
studen: {
name: 'Joe',
skill: {
run: {
speed: 'fast'
}
}
}
},
watch: {
studen: {
handler: 'sayName',
deep: true
}
},
methods: {
sayName() {
console.log(this.studen)
}
}
}
```
### 触发监听执行多个方法
使用数组可以设置多项，形式包括字符串、函数、对象
``` js
export default {
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)
}
}
}
```
文档：[https://cn.vuejs.org/v2/api/#watch](https://cn.vuejs.org/v2/api/#watch)
# watch监听多个变量
watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象，再监听这个对象来实现“监听多个变量”
``` js
export default {
data() {
return {
msg1: 'apple',
msg2: 'banana'
}
},
compouted: {
msgObj() {
const { msg1, msg2 } = this
return {
msg1,
msg2
}
}
},
watch: {
msgObj: {
handler(newVal, oldVal) {
if (newVal.msg1 != oldVal.msg1) {
console.log('msg1 is change')
}
if (newVal.msg2 != oldVal.msg2) {
console.log('msg2 is change')
}
},
deep: true
}
}
}
```
# 事件参数$event
`$event` 是事件对象的特殊变量，在一些场景能给我们实现复杂功能提供更多可用的参数
### 原生事件
在原生事件中表现和默认的事件对象相同
``` html
```
``` js
export default {
methods: {
inputHandler(msg, e) {
console.log(e.target.value)
}
}
}
```
### 自定义事件
在自定义事件中表现为捕获从子组件抛出的值
`my-item.vue` :
``` js
export default {
methods: {
customEvent() {
this.$emit('custom-event', 'some value')
}
}
}
```
`App.vue`
``` html
```
``` js
export default {
methods: {
customEvent(index, e) {
console.log(e) // 'some value'
}
}
}
```
文档：[https://cn.vuejs.org/v2/guide/events.html#%E5%86%85%E8%81%94%E5%A4%84%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95](https://cn.vuejs.org/v2/guide/events.html#%E5%86%85%E8%81%94%E5%A4%84%E7%90%86%E5%99%A8%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95)
[https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E4%BA%8B%E4%BB%B6%E6%8A%9B%E5%87%BA%E4%B8%80%E4%B8%AA%E5%80%BC](https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E4%BA%8B%E4%BB%B6%E6%8A%9B%E5%87%BA%E4%B8%80%E4%B8%AA%E5%80%BC)
# 自定义组件双向绑定
组件 `model` 选项:
> 允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
`input` 默认作为双向绑定的更新事件，通过 `$emit` 可以更新绑定的值
``` html
{{item.title}}
{{item.content}}
{{item.content}}
加载全部内容