9 Vue tips to improve development efficiency and performance

This article will share with you several tips that I have learned during my study ofVueto improve development efficiency and performance. I hope it will be helpful to everyone!

1. Use$attrsand$listeners

## skillfully #$attrsis used to record all parameters passed from the parent component to the child component that are not captured bypropsand are notclassandstyle, but$listenersis used to record all events passed in from the parent component without the.nativemodifier. (Learning video sharing:vuejs video tutorial)

Vue.component('child', { props: ['title'], template: '
{{ title }}
' }) new Vue({ data:{a:1,title:'title'}, methods:{ handleClick(){ // ... }, handleChange(){ // ... } }, template:' ', })

The value of

• attrsis{a:1,b:"1"}
• listenersThe value is{change: handleChange}

$attrsand$listenersfor component communication. It is more efficient when used in sub-encapsulated components, such as:

Vue.component("custom-dialog", { // 通过v-bind="$attrs"和v-on="$listeners"把父组件传入的参数和事件都注入到el-dialog实例上 template: '', }); new Vue({ data: { visible: false }, // 这样子就可以像在el-dialog一样用visible控制custom-dialog的显示和消失 template: '', });

Vue.component("custom-select", { template: `   `, }); new Vue({ data: { value: "" }, // v-model在这里其实是v-bind:value和v-on:change的组合， // 在custom-select里，通过v-bind="$attrs" v-on="$listeners"的注入， // 把父组件上的value值双向绑定到custom-select组件里的el-select上，相当于 // 与此同时，在custom-select注入的size变量也会通过v-bind="$attrs"注入到el-select上，从而控制el-select的大小 template: '', });

2. Clever use of$props

$porpsis used to record all the props passed from the parent component to the child component that are captured bypropsand are notclassandstyleparameters. For example,

Vue.component('child', { props: ['title'], template: '
{{ title }}
' }) new Vue({ data:{a:1,title:'title'}, methods:{ handleClick(){ // ... }, handleChange(){ // ... } }, template:' ', })

, and the value of$propsis{title:'title'}.$propscan be used when thepropsdefined by the self component and the grandchild component are the same, such as:

Vue.component('grand-child', { props: ['a','b'], template: '
{{ a + b}}
' }) // child和grand-child都需要用到来自父组件的a与b的值时， // 在child中可以通过v-bind="$props"迅速把a与b注入到grand-child里 Vue.component('child', { props: ['a','b'], template: ` 
 {{a}}加{{b}}的和是：  
 ` }) new Vue({ template:' ', })

3. Use functional components

vuecomponents is that they are non-responsive. It does not listen to any data and has no instances (so no state, meaning there is no life cycle such ascreated,mounted). The advantage is that since it is just a function, the rendering overhead is much lower.

4. Use Vue.config.devtools wonderfully

vue-devtoolsfor debugging in the environment. Just change theVue.config.devtoolsconfiguration, as shown below:

// 务必在加载 Vue 之后，立即同步设置以下内容 // 该配置项在开发版本默认为 `true`，生产版本默认为 `false` Vue.config.devtools = true;

cookieto decide whether to enable this configuration item, thereby improving the convenience of online bug finding.

5. Use themethodin methods

Vueto assign the result returned by a higher-order function, for example:

searchfunction is assigned the result returned bydebounce, which is the request function with anti-shake function. This method can avoid us having to write the anti-shake logic ourselves in the component.

sandbox. You can click on it to see the difference between themethodprocessed by the high-order function and the originalmethod. As shown below:

methodcan also be defined as agenerator, if we have a function that needs The order is emphasized during execution, and variables need to be defined indatato record the last status, then you can consider using a generator.

call time. Thiscall timerequires every second Update once, that is, the function to obtaincall timeneeds to be executed once per second. If written as a normal function, the variable recording the time needs to be stored indata. But if you use a generator, it can be solved very cleverly, as shown below:

Code address: https://codesandbox.io/s/jovial-williams-nkouf?file=/src/App.vue

But it should be noted that method cannot be an arrow function

Note that arrow functions should not be used to define

methodfunctions (for example,plus: () => this.a). The reason is that arrow functions are bound to the context of the parent scope, sothiswill not point to the Vue instance as expected,this.awill beundefined.

6. Use the array format of watch wisely

handler# of a certain variable inwatch## Call multiple operations, as shown below:

<script> export default { data() { return { value: "", }; }, methods: { fn1() {}, fn2() {}, }, watch: { value: { handler() { fn1(); fn2(); }, immediate: true, deep: true, }, }, }; </script>

虽然fn1和fn2都需要在value变动的时候调用，但两者的调用时机可能不同。fn1可能仅需要在deep为false的配置下调用既可。因此，Vue在watch的值添加了Array类型来针对上面所说的情况，如果用watch为Array的写法处理可以写成下面这种形式：

this.value = this.$options.data().value;

Object.assign(this.$data, this.$options.data()); // 注意千万不要写成下面的样子，这样子就更改this.$data的指向。使得其指向另外的与组件脱离的状态 this.$data = this.$options.data();

 {{i}}