Vue 高级技巧速查表
目录
嘿，DEV.to社区的各位！
由于我经常使用 Vue，所以会遇到很多问题需要解决。相信我，没有什么比解决一个困扰开发者多年的难题更让人感到满足的了！xD
所以，我在这里和大家分享一些我用来克服一些问题的技巧，这些技巧或许在某些时候对你们也有用。
本文的日文版本可在以下网址找到：https://qiita.com/_masa_u/items/6599546a7f3db2e2ffbc感谢
享受！
目录
强制重新渲染
在某些情况下，需要强制 Vue 重新渲染组件，因为它无法跟踪某些更改。
有一些方法可以做到这一点，例如使用一些v-if技巧，但正确的方法是使用forceUpdate以下方法：
export default {
methods: {
forceUpdateMyComponent() {
this.$forceUpdate()
},
},
}
请记住，$必须在您的 Vue 实例中使用此方法。
另外需要注意的是，此方法不会更新任何计算属性，而只会强制重新渲染组件的视图。
观察嵌套数据
有时您可能需要查看一些嵌套数据，您可以使用点号表示法来实现这一点：
export default {
data() {
return {
myInfo: {
firstName: 'Adnan'
}
}
},
watch: {
'myInfo.firstName'() {
console.log('Here');
}
}
}
上面的代码适用于你知道要监视对象中的哪个属性的情况！
但如果你想监视整个对象及其所有值呢？
export default {
data() {
return {
myFruits: {apple: 'red', banana: 'yellow'},
}
},
methods: {
changeIt() {
this.myFruits.apple = 'green'
},
},
watch: {
myFruits: {
deep: true,
handler() {
console.log('Fruits updated!')
},
},
},
}
你可以先将你的监视对象定义为一个对象，而不是一个函数，然后使用deep键和值true来监视你的对象，并将你想要在数据更改时触发的内容放在一个名为 `watch` 的函数中handler。
支持 v 模型的自定义组件
如您所知，v-model它用于创建输入元素/组件和数据属性之间的双向绑定。
如果您正在创建一个自定义组件并希望它支持该功能，v-model您可以发出input关键字，为了接收最初通过该关键字传递给您的组件的内容，v-model您只需获取一个名为的属性即可value。
为了便于理解，请查看以下代码：
<template>
<div>
<label>My custom test input: <input :value="inputValue" @input="emitTheData" /></label>
</div>
</template>
<script>
export default {
props: ['value'],
data() {
return {
inputValue: value
}
},
methods: {
emitTheData() {
this.$emit('input', this.inputValue)
}
}
}
</script>
这个简单的组件会将传递给它的数据双向绑定。
注意：如您所见，我将名为 `prop` 的属性赋值给了value名为 `data` 的属性inputValue，并在输入框中使用它。您可能会认为我可以直接将属性传递给输入框，但正如 Vue 所建议的，最好不要直接修改属性。
功能组件
想象一下，有一个组件既没有监听属性，也没有计算属性，更没有方法！你只会用它来渲染其他组件，并赋予它们一些属性。如果真是这样，既然没有生命周期方法，为什么还要浪费 Vue 的时间呢？
功能组件可以定义如下：
<template functional>
<div>{{ props.foo }}</div>
</template>
注意：请记住，这些组件中没有this上下文，因为它们是函数式组件！
您可以点击以下链接了解更多关于 Vue 函数式组件的信息：
Vue 函数式组件
如果您还有其他技巧可以加快 Vue 应用的运行速度或提升开发效率，请告诉我，我会将它们添加到这里。
点击此处查看我的免费Node.js基础电子书：
文章来源：https://dev.to/adnanbabakan/vue-advanced-tricks-cheat-sheet-3ee3