를 능숙하게 사용하세요.
code>는 모든 것을 녹음하는 데 사용됩니다.
데코레이터 없이 상위 구성 요소에서 전달된 이벤트. (학습 영상 공유:
vuejs 영상 튜토리얼$attrs和$listeners$attrs用于记录从父组件传入子组件的所有不被props捕获以及不是class与style的参数，而$listeners用于记录从父组件传入的所有不含.native修饰器的事件。（学习视频分享：vuejs视频教程）
那下面的代码作例子：
Vue.component('child', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({
data:{a:1,title:'title'},
methods:{
handleClick(){
// ...
},
handleChange(){
// ...
}
},
template:'
<child class="child-width" :a="a" b="1" :title="title" @click.native="handleClick" @change="handleChange">',
})로그인 후 복사
则在<child/>在中
attrs的值为{a:1,b:"1"}listeners的值为{change: handleChange}
通常我们可以用$attrs和$listeners作组件通信，在二次封装组件中使用时比较高效，如：
Vue.component("custom-dialog", {
// 通过v-bind="$attrs"和v-on="$listeners"把父组件传入的参数和事件都注入到el-dialog实例上
template: '<el-dialog v-bind="$attrs" v-on="$listeners"></el-dialog>',
});
new Vue({
data: { visible: false },
// 这样子就可以像在el-dialog一样用visible控制custom-dialog的显示和消失
template: '<custom-dialog :visible.sync="visible">',
});로그인 후 복사
再举个例子：
Vue.component("custom-select", {
template: `<el-select v-bind="$attrs" v-on="$listeners">
<el-option value="选项1" label="黄金糕"/>
<el-option value="选项2" label="双皮奶"/>
</el-select>`,
});
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上，相当于<el-select v-model="value">
// 与此同时，在custom-select注入的size变量也会通过v-bind="$attrs"注入到el-select上，从而控制el-select的大小
template: '<custom-select v-model="value" size="small">',
});로그인 후 복사
2. 巧用$props
$porps用于记录从父组件传入子组件的所有被props捕获以及不是class与style的参数。如
Vue.component('child', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({
data:{a:1,title:'title'},
methods:{
handleClick(){
// ...
},
handleChange(){
// ...
}
},
template:'
<child class="child-width" :a="a" b="1" :title="title">',
})로그인 후 복사
则在<child/>在中，$props的值为{title:'title'}。$props可以用于自组件和孙组件定义的props都相同的情况，如：
Vue.component('grand-child', {
props: ['a','b'],
template: '<h3>{{ a + b}}</h3>'
})
// child和grand-child都需要用到来自父组件的a与b的值时，
// 在child中可以通过v-bind="$props"迅速把a与b注入到grand-child里
Vue.component('child', {
props: ['a','b'],
template: `
<div>
{{a}}加{{b}}的和是：
<grand-child v-bind="$props"/>
</div>
`
})
new Vue({
template:'
<child class="child-width" :a="1" :b="2">',
})로그인 후 복사
3. 妙用函数式组件
函数式组件相比于一般的vue组件而言，最大的区别是非响应式的。它不会监听任何数据，也没有实例（因此没有状态，意味着不存在诸如created，mounted的生命周期）。好处是因只是函数，故渲染开销也低很多。
把开头的例子改成函数式组件，代码如下：
<script>
export default {
name: "anchor-header",
functional: true, // 以functional:true声明该组件为函数式组件
props: {
level: Number,
name: String,
content: String,
},
// 对于函数式组件，render函数会额外传入一个context参数用来表示上下文，即替代this。函数式组件没有实例，故不存在this
render: function (createElement, context) {
const anchor = {
props: {
content: String,
name: String,
},
template: '<a :id="name" :href="`#${name}`"> {{content}}</a>',
};
const anchorEl = createElement(anchor, {
props: {
content: context.props.content, //通过context.props调用props传入的变量
name: context.props.name,
},
});
const el = createElement(`h${context.props.level}`, [anchorEl]);
return el;
},
};
</script>로그인 후 복사
4. 妙用 Vue.config.devtools
其实我们在生产环境下也可以调用vue-devtools去进行调试，只要更改Vue.config.devtools配置既可，如下所示：
// 务必在加载 Vue 之后，立即同步设置以下内容
// 该配置项在开发版本默认为 `true`，生产版本默认为 `false`
Vue.config.devtools = true;
로그인 후 복사
我们可以通过检测cookie里的用户角色信息去决定是否开启该配置项，从而提高线上 bug 查找的便利性。
5. 妙用 methods
Vue中的method可以赋值为高阶函数返回的结果，例如：
<script>
import { debounce } from "lodash";
export default {
methods: {
search: debounce(async function (keyword) {
// ... 请求逻辑
}, 500),
},
};
</script>로그인 후 복사
上面的search函数赋值为debounce返回的结果，也就是具有防抖功能的请求函数。这种方式可以避免我们在组件里要自己写一遍防抖逻辑。
这里有个例子sandbox，大家可以点进去看看经过高阶函数处理的method与原始method的效果区别，如下所示：
除此之外，method还可以定义为生成器，如果我们有个函数需要执行时很强调顺序，而且需要在data里定义变量来记录上一次的状态，则可以考虑用生成器。
例如有个很常见的场景：微信的视频通话在接通的时候会显示计时器来记录通话时间，这个通话时间需要每秒更新一次，即获取通话时间的函数需要每秒执行一次，如果写成普通函数则需要在data里存放记录时间的变量。但如果用生成器则能很巧妙地解决，如下所示：
<template>
<div id="app">
<h3>{{ timeFormat }}</h3>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
// 用于显示时间的变量，是一个HH:MM:SS时间格式的字符串
timeFormat: "",
};
},
methods: {
genTime: function* () {
// 声明存储时、分、秒的变量
let hour = 0;
let minute = 0;
let second = 0;
while (true) {
// 递增秒
second += 1;
// 如果秒到60了，则分加1，秒清零
if (second === 60) {
second = 0;
minute += 1;
}
// 如果分到60了，则时加1，分清零
if (minute === 60) {
minute = 0;
hour += 1;
}
// 最后返回最新的时间字符串
yield `${hour}:${minute}:${second}`;
}
},
},
created() {
// 通过生成器生成迭代器
const gen = this.genTime();
// 设置计时器定时从迭代器获取最新的时间字符串
const timer = setInterval(() => {
this.timeFormat = gen.next().value;
}, 1000);
// 在组件销毁的时候清空定时器和迭代器以免发生内存泄漏
this.$once("hook:beforeDestroy", () => {
clearInterval(timer);
gen = null;
});
},
};
</script>로그인 후 복사
页面效果如下所示：
代码地址：https://codesandbox.io/s/jovial-williams-nkouf?file=/src/App.vue
但需要注意的是：method 不能是箭头函数
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
6. 妙用 watch 的数组格式
很多开发者会在watch中某一个变量的handler)
🎜그럼 아래 코드의 예: 🎜<script>
export default {
data() {
return {
value: "",
};
},
methods: {
fn1() {},
fn2() {},
},
watch: {
value: {
handler() {
fn1();
fn2();
},
immediate: true,
deep: true,
},
},
};
</script>로그인 후 복사
로그인 후 복사
<child/>의 🎜attrs 값은 {a:1 ,b:"1"}리스너의 값은 {change: handlerChange}
입니다. 🎜 일반적으로 구성 요소 통신에 $attrs 및 $listeners를 사용할 수 있으며, 이는 다음과 같은 2차 포장 구성 요소에 사용할 때 더 효율적입니다. 🎜<script>
watch:{
'value':[
{
handler:function(){
fn1()
},
immediate:true
},
{
handler:function(){
fn2()
},
immediate:true,
deep:true
}
]
}
</script>로그인 후 복사
로그인 후 복사
this.value = this.$options.data().value;
로그인 후 복사
로그인 후 복사
🎜2. $props
🎜$porps를 현명하게 사용하여 데이터를 기록합니다. 상위 구성 요소에서 props에 의해 캡처되고 클래스 및 스타일이 아닌 하위 구성 요소에 전달된 모든 매개 변수입니다. 예를 들어 🎜<template>
<div>
<el-button @click="visible=!visible">打开弹窗</el-button>
<el-dialog @open="initForm" title="个人资料" :visible.sync="visible">
<el-form>
<el-form-item label="名称">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
visible: false,
form: {
gender: 'male',
name: 'wayne'
}
}
},
methods:{
initForm(){
this.form = this.$options.data().form
}
}
};
</script>로그인 후 복사
로그인 후 복사
<child/>에 있고 $props의 값은 {title:'title'}입니다. . $props는 self 구성 요소와 손자 구성 요소에 의해 정의된 props가 동일한 경우 사용할 수 있습니다. 예: 🎜Object.assign(this.$data, this.$options.data());
// 注意千万不要写成下面的样子，这样子就更改this.$data的指向。使得其指向另外的与组件脱离的状态
this.$data = this.$options.data();
로그인 후 복사
로그인 후 복사
🎜3 . 기능적 컴포넌트를 훌륭하게 사용하세요
🎜일반 vue 컴포넌트와 비교했을 때, 기능적 컴포넌트의 가장 큰 차이점은 반응성이 없다는 것입니다. 어떤 데이터도 수신하지 않으며 인스턴스도 없습니다(따라서 상태가 없습니다. 즉 created, mounted와 같은 수명 주기가 없음을 의미). 장점은 단순한 함수이기 때문에 렌더링 오버헤드가 훨씬 낮다는 것입니다. 🎜🎜처음의 예제를 기능적 구성 요소로 변경하세요. 코드는 다음과 같습니다. 🎜<el-select>
<el-option
v-for="item in options"
v-once
:key="item.value"
:label="item.label"
:value="item.value"
>{{i}}</el-option
>
</el-select>로그인 후 복사
로그인 후 복사
🎜4 Vue.config.devtools
를 사용하세요. 🎜실제로 프로덕션 환경에서 디버깅을 위해 vue-devtools를 호출할 수도 있습니다. 아래와 같이 Vue.config.devtools 구성을 변경하면 됩니다. 🎜<template>
<child @hook:mounted="removeLoading" />
</template>
로그인 후 복사
로그인 후 복사
🎜5. 유용한 메소드
🎜 Vue의 method는 high- level 값 함수에 의해 반환된 결과, 예: 🎜<script>
export default {
created() {
const timer = setInterval(() => {
// 更新逻辑
}, 1000);
// 通过$once和hook监听实例自身的beforeDestroy，触发该生命周期时清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(timer);
});
},
};
</script>로그인 후 복사
로그인 후 복사
search 함수에는 흔들림 방지가 포함된 요청 함수인 debounce에 의해 반환된 결과가 할당됩니다. 기능. 이 방법을 사용하면 구성 요소에 손떨림 방지 논리를 직접 작성하지 않아도 됩니다. 🎜🎜다음은 예시입니다 위 내용은 개발 효율성과 성능을 향상시키는 9가지 Vue 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
🎜
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
