vue实战技巧,vue简单使用
本文主要介绍一些关于vue实战中实用魔法的相关资料。这些技巧和诀窍可以帮助你成为更好的Vue开发者。有需要的朋友可以参考一下。
能让你首次加载更快的路由懒加载，怎么能忘？
惰性路由加载可以让我们的包不需要一次性加载所有页面，只加载当前页面的路由组件。
比如你这样写，加载的时候就全加载了。
const router=new VueRouter({
路线：[
{
路径：“/”，
姓名：家，
组件：主页
},
{
路径：“/about”，
名称：“关于”，
组件：关于
}
]
})
所以你要避免上面的写法，尽量用懒加载。
懒加载方式，结合webpack的导入。
const router=new VueRouter({
路线：[
{
路径：“/”，
姓名：家，
component:()=import(/* webpackChunkName: home */./views/home . vue’)
},
{
路径：“/about”，
名称：“关于”，
component:()=import(/* webpackChunkName: about */./views/about . vue’)
}
]
})
你是否还记得有一个叫Object.freeze的方法？
所有同学都要知道，vue初始化的时候，data里面的所有数据都会被做成响应式数据。但是我们写业务逻辑的时候，有些数据一旦初始化就永远不会改变，根本不需要vue把它做成响应式数据。所以我们要通过Object.freeze方法来冻结这些没有变化的数据，避免在vue初始化的时候做一些无用的操作。
导出默认值{
数据：()=({
List:Object.freeze([{title:我从不需要改变，我不需要响应 }])
})
}
异步组件那么强，你是不是没用过？
异步组件允许我们在需要的时候加载一些组件，而不是一初始化就加载，这和路由懒的时候是一个概念。
导出默认值{
组件：{
async component:()=import(/* webpackChunkName: async component */。/Async’)
}
}
首次加载的包不包含更改组件的代码。
当点击触发某种行为时，引入的包是这样的。
有一种更完美的方式来编写异步组件。
导出默认值{
组件：{
AsyncComponent:()=({
组件：导入(/* webpackChunkName: async component */。/Async )，
延时：200，//延时几毫秒，默认是200
超时：3000，//加载几毫米后超时，触发错误组件。
Loading:LoadingComponent，//组件在被加载之前显示。
错误：错误组件//组件超时时显示
})
}
}
你是不是还在computed中使用this？
我估计还是有很多同学用this.xxx来获取data中的数据和computed属性中methods中的方法。也许他们也会用这个。$store来获取vuex的状态，提交之类的，甚至用这个。$route获取路线中的数据。其实我们可以避免这些丑陋的这个，它甚至会给我们带来隐形的性能问题。实际上，我们可以通过它访问的数据可以根据computed的第一个参数来构造。
导出默认值{
哈哈({$attrs，$route，$store，$listeners，$ref}){
//也可以自己构造很多属性，打印康康。
返回
}
}
如何避免v-if和v-for一起使用？
为什么要避免在同一个元素上同时使用v-if和v-for？因为vue的源代码中有一段代码是处理指令优先级的，这段代码先处理v-for，再处理v-if。所以如果我们在同一层一起使用两条指令，就会出现一些不必要的性能问题。例如，这个列表有一百条数据，在某些情况下，它们都不需要显示。当vue仍然循环显示这100条数据时，就会判断v-if。所以要避免这种情况。
严重的
H3 v-if= status v-for= item in 100 :key= item { { item } }/H3
行
模板v-if=status
H3 v-for= item in 100 :key= item { item } }/H3
/模板
那么强的.sync修饰符你为什么不用？
如果要在父组件中控制一个子组件的显示和隐藏，是不是还要传一个道具和一个自定义方法，会很麻烦？尝试同步修改器。
//父组件
模板
差异
切换：show . sync= show /切换
/div
/模板
//切换组件
模板
差异
div v-if=show
显示和隐藏组件
/div
按钮@click=test 隐藏组件/按钮
/div
/模板
脚本
导出默认值{
道具：[秀]，
方法：{
测试(){
这个。$emit(update:show ，false)
}
}
}
/脚本
$attr和$listeners让你封装组件如鱼得水！
$attr和$listeners可能很多学生都不会用。事实上，它们允许我们对组件库的一些组件进行重新打包，这非常容易使用。
给他们两个简单介绍一下：
$attr:如果一个组件不仅传递了prop需要的属性，还传递了prop以外的其他属性，那么这些属性将被收集到$attr中。
$listeners:如果一个组件发送了一个定制事件，但是它的子组件没有被emit触发，那么这些定制方法将被收集到$listeners中。
下面是ElementUI的Tabel组件的一个简单的二级包。
el表
v-bind=$attrs
v-on=$listeners
模板v-for=列中的项目
el-table-column v-bind=item /
/模板
/el-table
脚本
导出默认值{
道具：{
列：{
类型：数组，
必填：真
}
}
}
脚本
v-model还有这么好的修饰符！
v-model上有三个易于使用的修改器。不知道大家有没有用过。一个是懒，一个是数，一个是修。
懒：可以把@input事件变成@blur事件。
数字：只能输入数值。
修剪：清空两边的空间。
//懒惰
input v-model.lazy=msg /
//数字
输入v-model.number=msg /
//修剪
输入v-model.trim=msg /
你是否知道v-model还能自定义属性？
如果您想在一个定制的输入组件上使用v-model，您应该引入一个值，并在子组件中触发输入事件。v-model默认的语法糖就是这两样东西的组合。
//父组件
模板
差异
CustomInput v-model=msg /
/div
/模板
//自定义输入
模板
差异
输入类型=文本:值=值 @输入=测试
/div
/模板
脚本
导出默认值{
道具：[值]，
方法：{
测试(e){
这个。$emit(input ，e.target.value)
}
},
}
/脚本
但是，如果组件不是输入，而是一个复选框或一个单选按钮呢？我不想接收一个值和输入事件，但我想接收一个更具语义检查和更改的事件。我该怎么办？
//不需要更改父组件
.
//自定义输入
模板
差异
输入类型=复选框:checked=checked @change=test
/div
/模板
脚本
道具：[checked]，
型号：{
道具：“已检查”，
事件：“更改”
},
方法：{
测试(e){
这个。$emit(change ，e.target.checked)
}
}
}
/脚本
你还在用浏览器的scrollTop滚动你的页面吗？
有时候我们在操纵页面的滚动行为时，会第一时间想到scrollTop。其实我们还有第二种选择，就是VueRouter提供的scrollBehavior钩子。
const router=new VueRouter({
路线：[.] ,
滚动行为(收件人、发件人、位置){
position参数可以自己打印康康，点击浏览器左右箭头会触发。
返回{
//这里可以返回很多参数。这里只是几个。具体可参考康康官网。
x:100，
y:100，
选择器：#app，
偏移量：200，
//以此类推
}
}
})
你在子组件上定义的原生事件不生效？
有时候我们想监听子组件上的一些事件，比如click，但是无论你怎么点击，它都没有反应。为什么？
模板
差异
Child @click=test/Child
/div
/模板
脚本
方法：{
测试(){}
}
/脚本
因为这样写vue会认为你自定义了一个click事件，这个事件要由子组件中的$emit(click )来触发。如果我只想在父组件中触发呢？那么将使用本机修饰符。
模板
差异
Child @ click . native= test /Child
/div
/模板
脚本
方法：{
测试(){}
}
/脚本
用keep-alive缓存一下你的页面状态吧！
Keep-alive可以帮助我们在切换组件时保持之前的组件不被破坏。常用于管理后台系统。
点火电极
路由器视图/路由器视图
/保持活力
总结
关于vue实战中的实用魔法这篇文章到此为止。更多关于vue实用技巧的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。