vue使用技巧,vue开发技巧
本文主要介绍分享九个vue的巧妙技巧。首先，文章通过巧妙运用$attrs和$listeners的技巧展开，有一定的参考价值，有需要的可以参考。
目录
前言1。巧妙使用$attrs和$listeners2。巧妙使用$props3。巧用功能部件4。巧妙运用Vue.config.devtools5 .巧妙运用方法6。巧用watch 7的数组格式。巧妙使用$options8。巧妙运用v-pre，v-once-prev-once
前言
写了两年Vue，学会了几个提高开发效率和性能的技巧。现在我以文章的形式总结一下这些技巧。
1. 巧用$attrs和$listeners
$attrs用于记录从父组件传递到子组件的所有参数，这些参数不是由props捕获的，也不是类和样式，而$listeners用于记录从父组件传递的所有事件，而没有。原生修饰符。
那下面的代码作例子：
Vue.component(child ，{
道具：[title]，
模板：“h3{{ title }}/h3”
})
新Vue({
数据：{a:1，标题：标题 }，
方法：{
handleClick(){
//.
},
handleChange(){
//.
}
},
模板：
child class= child-width :a= a b= 1 :title= title @ click . native= handle click @ change= handle change ，
})
然后在孩子/在
attr的值是{a: 1，b: 1}，listeners的值是{change: handleChange}。通常，我们可以使用$attrs和$listeners进行组件通信，在二次打包组件中使用时效率更高，比如：
Vue.component(自定义对话框，{
//通过v-bind=$attrs 和v-on=$listeners 将父组件传入的参数和事件注入el-dialog实例
El-dialog v-bind= $ attrs v-on= $ listeners /El-dialog ，
});
新Vue({
数据：{ visible: false }，
//这样就可以像在el-dialog中一样，用visible来控制自定义对话框的显示和消失。
模板：自定义对话框：visible.sync=visible ，
});
再举个例子：
Vue.component(自定义选择，{
模板：` El-select v-bind= $ attrs v-on= $ listeners
El-option value= option 1 label=黄金蛋糕/
El-option value= option 2 label= double skin milk /
/el-select `，
});
新Vue({
数据：{值： }，
//这里的v-model实际上是v-bind:value和v-on:change的组合，
//在custom-select中，通过注入v-bind= $ attrs v-on= $ listeners ，
//将父组件上的值双向绑定到自定义选择组件中的el-select，这相当于el-select v-model=value
//同时，custom-select中注入的size变量也会通过v-bind=$attrs 注入到el-select中，从而控制el-select的大小。
模板：自定义选择v-model=value size=small ，
});
2. 巧用$props
$porps用于记录由props捕获的所有参数，并且不是从父组件到子组件的类和样式。诸如
Vue.component(child ，{
道具：[title]，
模板：“h3{{ title }}/h3”
})
新Vue({
数据：{a:1，标题：标题 }，
方法：{
handleClick(){
//.
},
handleChange(){
//.
}
},
模板：
child class= child-width :a= a b= 1 :title= title ，
})
那么child/中$props的值就是{title:title}。当自身组件和子组件定义的道具相同时，可以使用$props，如：
Vue.component(孙子，{
道具：[a ， b]，
模板：“h3{{ a b}}/h3”
})
//当child和grand-child都需要使用父组件中A和B的值时，
//在child中，A和B可以通过v-bind=$props 快速注入到grand-child中
Vue.component(child ，{
道具：[a ， b]，
模板：` 1
差异
{{a}}加上{{b}}的总和是：
孙子女v-bind=$props/
/div
`
})
新Vue({
模板：
child class= child-width :a= 1 :b= 2 ，
})
3. 妙用函数式组件
功能组件与一般的vue组件相比，最大的区别就是无响应。它不监听任何数据，也没有实例(因此没有状态，这意味着没有生命周期，如创建、装载)。好处是因为只是一个函数，渲染成本低很多。
把开头的例子改成函数式组件，代码如下：
脚本
导出默认值{
名称：锚头，
Functional: true，//用functional:true将此组件声明为功能组件
道具：{
级别：数字，
名称：字符串，
内容：字符串，
},
//对于功能组件，render函数会额外传入一个上下文参数来表示上下文，也就是代替this。该功能组件没有实例，因此不存在。
render: function (createElement，context) {
常量锚={
道具：{
内容：字符串，
名称：字符串，
},
模板： a:id= name :href= `# $ { name } ` rel= external no follow { { content } }/a ，
};
const anchorEl=createElement(anchor，{
道具：{
Content: context.propscontent，//通过context.props调用props传入的变量。
名称：context.props.name，
},
});
const El=createElement(` h $ { context . props . level } `，[anchorEl])；
返回El；
},
};
/脚本
4. 妙用 Vue.config.devtools
其实我们也可以在生产环境中调用vue-devtools进行调试，只需更改Vue.config.devtools的配置即可，如下图：
//加载Vue后，一定要立即同步设置以下内容
//此配置项的默认值在开发版本中为“true ”,在生产版本中为“false”。
vue . config . dev tools=true；
我们可以通过检测cookie中的用户角色信息来决定是否打开配置项，从而提高在线查找bug的便利性。
5. 妙用 methods
Vue中的方法可以赋值为高阶函数返回的结果，例如：。
脚本
从“lodash”导入{ de bounce }；
导出默认值{
方法：{
搜索：去抖(异步功能(关键字){
//.请求逻辑
}, 500),
},
};
/脚本
上面的搜索函数赋给去抖返回的结果，就是带防抖功能的请求函数。这样，我们可以避免在组件中自己编写防抖逻辑。
这里有个例子：
模板
差异
表单分组
图例防抖处理/图例
输入框：input @input=handleChange/
div的输出结果：{{value}}/div
/字段集
表单分组
图例原始处理/图例
输入框：input @input=handleChange1/
div的输出结果：{{value1}}/div
/字段集
/div
/模板
脚本
从“lodash”导入{ de bounce }；
导出默认值{
名称：“应用程序”，
data(){
返回{
值：未定义，
值1:未定义
}
},
方法：{
handleChange:去抖(函数(e){
this.value=e .目标值
},500),
handleChange1(e){
this.value1=目标值
}
}
};
/脚本
可以点进去看看高阶函数处理的方法和原方法的区别，如下所示：。
另外，方法也可以定义为生成器。如果我们有一个函数需要按顺序执行，需要在数据中定义变量来记录最后的状态，可以考虑使用生成器。
比如有一个很常见的场景：微信的视频通话接通时，会显示一个定时器记录通话时间。这个通话时间需要每秒更新一次，也就是需要每秒执行一次获取通话时间的函数。如果写成普通函数，记录时间的变量需要存储在数据中。但如果使用生成器，就可以巧妙解决，如下图：
模板
div id=应用程序
h3{{ timeFormat }}/h3
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
data() {
返回{
//用于显示时间的变量是HH:MM:SS时间格式的字符串
时间格式： ，
};
},
方法：{
genTime:函数* () {
//声明存储小时、分钟和秒的变量
设小时=0；
设分钟=0；
设秒=0；
while (true) {
//递增秒数
秒=1；
//秒到60，加1清零秒。
if(秒===60) {
秒=0；
分钟=1；
}
//如果分数是60，加1清除分数。
if(分钟===60) {
分钟=0；
小时=1；
}
//最后返回最新的时间字符串
yield ` $ { hour }:$ { minute }:$ { second } `；
}
},
},
已创建(){
//通过生成器生成迭代器
const gen=this . gentime()；
//设置timer从迭代器获取最新的时间字符串。
const timer=setInterval(()={
this.timeFormat=gen.next()。价值；
}, 1000);
//组件销毁时清除定时器和迭代器，避免内存泄漏。
这个。$once(hook:beforeDestroy ，()={
clearInterval(定时器)；
gen=null
});
},
};
/脚本
页面效果如下所示：
但需要注意的是：method 不能是箭头函数
注意不要用arrow函数来定义方法函数(比如plus: ()=this.a)。原因是arrow函数绑定了父作用域的上下文，所以这不会像预期的那样指向Vue实例，this.a将是未定义的。
6. 妙用 watch 的数组格式
许多开发人员会在watch中的一个变量的处理程序中调用多个操作，如下所示：
脚本
导出默认值{
data() {
返回{
值： ，
};
},
方法：{
fn1() {}，
fn2() {}，
},
观察：{
值：{
处理程序(){
fn1()；
fn2()；
},
即时：真的，
深：真的，
},
},
};
/脚本
虽然当值改变时，fn1和fn2都需要被调用，但是调用它们的时间可能不同。可能只需要在deep为false的配置中调用Fn1。因此，Vue将数组类型添加到watch的值中，以解决上述情况。如果使用watch作为Array的编写方法，可以按以下形式编写：
脚本
观察：{
值:[
{
处理程序：函数(){
fn1()
},
即时：正确
},
{
处理程序：函数(){
fn2()
},
即时：真的，
深：真的
}
]
}
/脚本
7. 妙用$options
$options是记录当前Vue组件的初始化属性的选项。通常，在开发中，我们希望将数据中的某个值重置为初始化时的值，可以这样写：
this.value=this。$options.data()。价值；
这样，当因要求需要更改初始值时，只能在数据中更改。
这里再举一个场景：el对话框中有一个El表单。我们要求每次打开el对话框时都要重置el表单中的数据。你可以这样写：
模板
差异
el-button @click=visible=！“可见”打开弹出窗口/el按钮
El-dialog @ open= init form title= profile :visible . sync= visible
el格式
El-form-item标签=名称
el-input v-model=form.name/
/El-表单-项目
El-form-item标签=性别
El-radio-group v-model= form . gender
El-radio标签=male male /el-radio
El-收音机标签=女性女性/El-收音机
/el-radio-group
/El-表单-项目
/el格式
/el-dialog
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
data(){
返回{
可见：假，
表单：{
性别：男性，
名字：“韦恩”
}
}
},
方法：{
initForm(){
this.form=this。$options.data()。形式
}
}
};
/脚本
每次打开el-dialog之前，都会调用其@open中的initForm方法，从而将表单值重置为初始值。将显示以下效果：
如果您想要重置数据中的所有值，您可以按如下方式编写：
Object.assign(this。$data，这个。$ options . data())；
//注意不要这样写，会改变这个的点。$data。使得它指向与组件分离的另一状态。
这个。$data=this。$ options . data()；
8. 妙用 v-pre,v-once
v-pre
V-pre用于跳过标记元素及其子元素的编译过程。如果一个元素本身及其子元素非常具有攻击性，而没有任何与Vue相关的响应逻辑，则可以用v-pre标记。标记后，效果如下：
v-once
仅渲染元素和组件一次。随后重新呈现时，元素/组件及其所有子节点将被视为静态内容并被跳过。这可用于优化更新性能。
对于一些在第一次渲染后不会相应更改的元素，可以使用v-once属性标记它们，如下所示：
El-选择
el选项
v-for=选项中的项目
v-once
:key=item.value
:label=item.label
:value=item.value
{{i}}/el-option
/el-select
如果上例中的变量选项很大，并且不会有更多的响应变化，那么使用本例中的v-once将提高性能。
9. 妙用 hook 事件
如果想监听子组件的生命周期时，可以像下面例子中这么做：
模板
child @ hook:mounted= remove loading /
/模板
这种编写方法可以用来处理加载第三方初始化过程稍长的子组件。我们可以添加加载动画，当子组件被加载时，加载动画将在达到挂载的生命周期时被移除。
除了第一次，还有一种常见的编写hook的方法。在需要轮询更新数据的组件上，我们通常在创建时启动计时器，然后在销毁前清除计时器。而通过hook，我们可以实现在created中启动和销毁定时器的逻辑：
脚本
导出默认值{
已创建(){
const timer=setInterval(()={
//更新逻辑
}, 1000);
//通过$once和hook监听实例自身的beforeDestroy，在生命周期触发时清除定时器。
这个。$once(hook:beforeDestroy ，()={
clearInterval(定时器)；
});
},
};
/脚本
像上面这样的写法，保证了逻辑的统一，遵循了单一职责原则。
关于分享Vue的9个巧妙冷技能的这篇文章就到此为止。更多相关Vue技巧，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。