关于Vue.js推广的一些总结
第一招:简化复杂事物的观察者。
场景还原:
已创建(){
this.fetchPostList()
},
观察:{
searchInputValue(){
this.fetchPostList()
}
}
我们在创建组件时获得一次列表，同时监听输入框。每次有变化时，再次获得过滤列表是非常常见的。有什么办法可以优化吗？
移动分析:
首先，在watchers中，可以直接使用函数的字面名称；第二，声明immediate:true意味着组件在创建时立即执行。
观察:{
searchInputValue:{
处理程序:' fetchPostList '，
即时:正确
}
}
第二招:一劳永逸的组件注册。
场景还原:
从“”导入BaseButton。/baseButton '
从“”导入BaseIcon。/baseIcon
从“”导入BaseInput。/baseInput '
导出默认值{
组件:{
基本按钮，
BaseIcon，
基本输入
}
} & lt基本输入
v-model="searchText "
@keydown.enter="search "
/& gt；
& ltBaseButton @ click = " search " & gt
& ltbase icon name = " search "/& gt；
& lt/base button & gt；
我们写了一堆基本的UI组件，然后每次需要用到这些组件的时候都要先导入，然后再声明组件，非常繁琐！秉承能偷懒就偷懒的原则，一定要想办法优化！
移动分析:
我们需要使用工件webpack通过使用require.context()方法来创建自己的(模块)上下文，从而实现自动动态需求组件。这个方法需要三个参数:要搜索的文件夹目录，是否也应该在它的子目录中搜索，以及匹配文件的正则表达式。
我们在components文件夹中添加一个名为global.js的文件，在webpack的帮助下将所有需要的基础组件动态打包到这个文件中。
从“vue”导入Vue
function capitalize first letter(string){
返回string.charAt(0)。toupper case()+string . slice(1)
}
const require component = require . context(
'.'，false，/\。vue$/
//找到名为的文件。组件文件夹下的vue。
)
requireComponent.keys()。forEach(fileName = & gt；{
const component config = require component(文件名)
const component name = capitalize first letter(
fileName.replace(/^\.\//, '').替换(/\。\w+$/，'')
//因为获取的文件名格式是:'。/baseButton.vue '，这里我们掉头加尾，只保留真实文件名。
)
Vue.component(组件名，组件配置.默认值||组件配置)
})
最后，我们在main.js中导入‘components/global . js’，然后就可以随时随地使用这些基础组件，不需要手动引入。
第三招:路由器钥匙，这是自下而上的工资。
场景还原:
下面这个场景真的伤透了很多程序员的心...第一，默认大家都用Vue-router实现路由控制。
假设我们正在写一个博客网站，需求是从/post-page/a跳转到/post-page/b，然后我们惊奇的发现页面跳转后数据没有更新？！原因是vue-router“智能地”发现这是同一个组件，然后它决定重用这个组件，所以你在创建的函数中写的方法从来没有执行过。通常的解决方案是监视$route的变化来初始化数据，如下所示:
data() {
返回{
加载:假，
错误:null，
帖子:空
}
},
观察:{
$route': {
处理程序:' resetData '，
即时:正确
}
},
方法:{
resetData() {
this.loading = false
this.error = null
this.post = null
this.getPost(this。$route.params.id)
},
getPost(id){
}
}
bug解决了，但是每次都这样写也太优雅了吧？秉承偷懒的原则，我们希望代码这样写:
data() {
返回{
加载:假，
错误:null，
帖子:空
}
},
已创建(){
this.getPost(this。$route.params.id)
},
方法(){
getPost(postId) {
// ...
}
}
移动分析:
怎样才能达到这种效果？答案是给router-view添加一个唯一的键，这样，只要url改变，即使是公共组件也会被重新创建。虽然我们失去了失去的性能，但我们避免了无限的错误。同时注意我直接把钥匙设置成了路线的全路径，一举两得。
& ltrouter-view:key = " $ route . full path " & gt；& lt/router-view & gt；
第四招:万能的渲染功能
场景还原:
Vue要求每个组件只有一个根元素。当你有多个根元素时，vue会给你一个错误。
& lt模板& gt
& lt里
v-for= "路线中的路线"
:key="route.name "
& gt
& ltrouter-link:to = " route " & gt；
{{ route.title }}
& lt/router-link & gt；
& lt/李& gt
& lt/template & gt；
错误-组件模板应该只包含一个根元素。
如果在多个元素上使用v-if，请使用v-else-if
把他们锁起来。
移动分析:
有什么办法解决吗？答案是肯定的，但是这个时候我们需要使用render()函数来创建HTML而不是template。其实用js生成html的好处就是极其灵活强大，不需要学习使用vue的指令API，功能有限，比如v-for。
如果.(reactjs完全丢弃模板。)
功能性:真的，
render(h，{ props }) {
return props . routes . map(route = & gt；
& ltli key = { route.name } & gt
& ltrouter-link to = { route } & gt；
{route.title}
& lt/router-link & gt；
& lt/李& gt
)
}
第五招:无招制胜的高级组件。
重点:此招威力无比，请务必掌握。
当我们编写一个组件时，通常需要将一系列props从父组件传递到子组件，而父组件监听子组件emit的一系列事件。例如:
//父组件
& lt基本输入
:value="value "
Label= "密码"
Placeholder= "请填写密码"
@input="handleInput "
@ focus = " handleFocus & gt
& lt/base input & gt；
//子组件
& lt模板& gt
& lt标签& gt
{{ label }}
& lt投入
:value="value "
:placeholder="placeholder "
@focus=$emit('focus '，$event)"
@input="$emit('input '，$event.target.value)"
& gt
& lt/label & gt；
& lt/template & gt；
有以下优化点:
1.从父组件传递到子组件的每个属性必须在子组件的属性中显式声明，然后才能使用。这样我们的子组件每次都需要声明很多道具。
像placeholer这样的dom原生属性实际上可以直接从父级传递给子级，无需声明。该方法如下:
& lt投入
:value="value "
v-bind="$attrs "
@input="$emit('input '，$event.target.value)"
& gt
$attrs包含父范围中未被识别(和获得)为正确的属性绑定(除了类和样式)。当组件没有声明任何
Prop，这将包含父作用域的所有绑定，内部组件可以通过v-bind="$attrs "传入——在创建更高级别的组件时非常有用。
2.注意，子组件的@focus=$emit('focus '，$event)"实际上什么也没做，只是把事件发回给了父组件，实际上和上面差不多，我就不用显式声明了:
& lt投入
:value="value "
v-bind="$attrs "
v-on="listeners "
& gt
计算值:{
listeners() {
返回{
...这个。$听众，
输入:event = & gt
这个。$emit('input '，event.target.value)
}
}
}
$listeners包含父范围中的v-on事件侦听器(没有。原生装饰者)。它可以通过v-on="$listeners "传入内部组件——在创建更高级别的组件时非常有用。
3.需要注意的是，因为我们的输入不是组件BaseInput的根节点，所以默认情况下父作用域不会被识别为props。
的功能绑定将“后退”并用作普通HTML。
该属性应用于子部件的根元素。所以我们需要设置inheritAttrs:false，这些默认行为将被移除，这样以上两点的优化才能成功。
相信看完这个案例，你已经掌握了方法。更多精彩请关注Gxl上其他相关文章！
推荐阅读:
Vue的初学者教程
如何按环境打包Vue项目？