本篇文章给大家谈谈vue高级技巧，以及vue高级视频教程对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
【译】Vue实用笔记（一）：提高大量数据的渲染性能
大家好，欢迎大家来看我的第一个笔记！我下定决心开始在Vu eDose上尝试给像你一样的开发者们一些奇技淫巧。
VueDoes的技巧将会非常简洁明了，希望这种格式你会更能抓住重点。好了各位看官，我们直奔主题吧。
通常我们需要渲染一个非常大的数组对象，例如用户列表，对象列表，文章列表等等等等。
但是有关的时候我们并不需要修改他们，仅仅作展示用，或者用vuex中的全局状态管理对象保存。下面是一个简单的例子：
Vue官方文档：
把这种非常大的只用来展示的数组的属性变成响应式的属性，会消耗很多浏览器解析时间（可以实用google的开发者工具查看，下篇文章会提到）。虽然有时候，这些数据会做分页加载，但是你仍然会把这些数据在前端存储。
又比如制作谷歌地图的数据，通常是一个非常大的对象。
所以在以上的场景中，我们可以通过减少这种数据的响应式转换来提供前端的性能。那么咋办呢？我们可以在给Vue的data属性或者Vuex的state对象的属性赋值时，先用 Object.freeze 处理一下。
1.Vue的data属性
2.Vuex的state对象的属性:
顺便说一下，当你需要修改这个数据，你可以通过创建一个新的对象数组。
当你需要增加一个对象，可以参考下面这个例子：
想了解具体提升了多少 性能 吗？欲知后事如何，请看下篇分解。
这就是今天所有的内容!希望你们能给个大拇指?。
Remember you can read this tip online (with copy/pasteable code) and please share VueDose with all your colleagues if you liked it!
See you next week.
Alex
Vue组件开发有哪些技巧
这次给大家带来Vue组件开发有哪些技巧，Vue组件开发的注意事项有哪些，下面就是实战案例，一起来看一下。
Vue 单文件组件开发
当使用vue-cli初始化一个项目的时候，会发现src/components文件夹下有一个HelloWorld.vue文件，这便是单文件组件的基本开发模式。
// 注册
Vue.component('my-component', {
template: 'pA custom component!/p'
})
// 创建根实例
new Vue({
el: '#example'
})
接下来，开始写一个dialog组件。
Dialog
目标对话框组件的基本样式如图：
根据目标样式，可以总结出：
dialog组件需要一个titleprops来标示弹窗标题
dialog组件需要在按下确定按钮时发射出确定事件（即告诉父组件确定了）
同理，dialog组件需要发射出取消事件
dialog组件需要提供一个插槽，便于自定义内容
那么，编码如下:
template
p class="ta-dialogwrapper"
p class="ta-dialog"
p class="ta-dialogheader"
span{{ title }}/span
i class="ios-close-empty" @click="handleCancel()"/i
/p
p class="ta-dialogbody"
slot/slot
/p
p class="ta-dialogfooter"
button @click="handleCancel()"取消/button
button @click="handleOk()"确定/button
/p
/p
/p
/template
script
export default {
name: 'Dialog',
props: {
title: {
type: String,
default: '标题'
},
},
methods: {
handleCancel() {
this.$emit('cancel')
},
handleOk() {
this.$emit('ok')
},
},
}
/script
这样便完成了dialog组件的开发，使用方法如下：
ta-dialog
title="弹窗标题"
@ok="handleOk"
@cancel="handleCancel"
p我是内容/p
/ta-dialog
这时候发现一个问题，通过使用v-if或者v-show来控制弹窗的展现时，没有动画！！！，看上去很生硬。教练，我想加动画,这时候就该transition组件上场了。使用transition组件结合css能做出很多效果不错的动画。接下来增强dialog组件动画，代码如下:
template
transition name="slide-down"
p class="ta-dialogwrapper" v-if="isShow"
// 省略
/p
/transition
/template
script
export default {
data() {
return {
isShow: true
}
},
methods: {
handleCancel() {
this.isShow = false
this.$emit('cancel')
},
handleOk() {
this.isShow = true
this.$emit('ok')
},
},
}
/script
可以看到transition组件接收了一个nameprops，那么怎么编写css完成动画呢？很简单的方式，写出两个
关键class(css 的 className)样式即可：
.slide-down-enter-active {
animation: dialog-enter ease .3s;
}
.slide-down-leave-active {
animation: dialog-leave ease .5s;
}
@keyframes dialog-enter {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dialog-leave {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-20px);
}
}
就是这么简单就开发出了效果还不错的动效，注意transition组件的name为slide-down,而编写的动画的关键className为slide-down-enter-active和slide-down-leave-active。
封装Dialog做MessageBox
Element的MessageBox的使用方法如下:
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() = {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() = {
this.$message({
type: 'info',
message: '已取消删除'
});
});
看到这段代码，我的感觉就是好神奇好神奇好神奇（惊叹三连）。仔细看看，这个组件其实就是一个封装好的dialog,
接下来，我也要封装一个这样的组件。首先，整理下思路：
Element的使用方法是this.$confirm，这不就是挂到Vue的prototype上就行了
Element的then是确定，catch是取消，promise就可以啦
整理好思路，我就开始编码了：
import Vue from 'vue'
import MessgaeBox from './src/index'
const Ctur = Vue.extend(MessgaeBox)
let instance = null
const callback = action = {
if (action === 'confirm') {
if (instance.showInput) {
instance.resolve({ value: instance.inputValue, action })
} else {
instance.resolve(action)
}
} else {
instance.reject(action)
}
instance = null
}
const showMessageBox = (tip, title, opts) = new Promise((resolve, reject) = {
const propsData = { tip, title, ...opts }
instance = new Ctur({ propsData }).$mount()
instance.reject = reject
instance.resolve = resolve
instance.callback = callback
document.body.appendChild(instance.$el)
})
const confirm = (tip, title, opts) = showMessageBox(tip, title, opts)
Vue.prototype.$confirm = confirm
至此，可能会疑惑怎么callback呢，其实我编写了一个封装好的dialog并将其命名为MessageBox,
它的代码中，有这样两个方法:
onCancel() {
this.visible = false
this.callback (this.callback.call(this, 'cancel'))
},
onConfirm() {
this.visible = false
this.callback (this.callback.call(this, 'confirm'))
},
没错，就是确定和取消时进行callback。我还想说一说Vue.extend,代码中引入了MessageBox,
我不是直接new MessageBox而是借助new Ctur，因为这样可以定义数据(不仅仅是props)，例如：
instance = new Ctur({ propsData }).$mount()
这时候，页面上其实是还没有MessageBox的，我们需要执行:
document.body.appendChild(instance.$el)
如果你直接这样，你可能会发现MessageBox打开的时候没有动画，而关闭的时候有动画。解决方法也很简单，
appendChild的时候让其仍是不可见，然后使用类这样的代码：
Vue.nextTick(() = instance.visible = true)
这样就有动画了。
总结
通过transition和css实现不错的动画。其中，transition组件的name决定了编写css的两个关键类名为[name]-enter-active和[name]-leave-active
通过Vue.extend继承一个组件的构造函数（不知道怎么说合适，就先这样说），然后通过这个构造函数，便可以实现组件相关属性的自定义（使用场景：js调用组件）
js调用组件时，为了维持组件的动画效果可以先document.body.appendChild 然后Vue.nextTick(() = instance.visible = true)
Vue开发技巧--------批量引入文件
在平时开发中，大家肯定遇到一些你不想做但是又必须做的事，比如路由配置文件、ajax请求封装使用等。
比如在开发中，随着模块增多，每增加一个模块你就需要去router的配置文件下对路由进行配置
如下router配置文件
还有对异步请求的封装也是一个道理，对于我个人而言，我喜欢把异步请求统一引入再统一向外暴露使用，随着模块的增多，也会是没新增一个模块我就要去配置的地方引入一遍暴露一遍。
那么我们有什么好办法呢？
有的有的，我们可以用一种规则来统一引入某些文件，然后动态生成我们想要的配置文件，这样后面再增加模块的时候就不需要我们自己动手了，然后根据自己定的规则在进行使用就完事了！
vue技巧：解决网页静态化的问题
我们使用vuecli打包出来的vue页面，只有一个html。不错这确实是spa牛逼的地方。
但是对于seo来说，这也是一个致命缺陷。
那就是，完全没法seo。这货连个实体页面都没有。那就很难受了。
此时我们需要借助插件prerender-spa-plugin解决问题。在项目目录输入
这里你需要注意一点，你现在需要设置你的route为history模式。当然我们一直是这个模式，之前有人使用hash模式，那个是不可取的。
接着打开webpack.prod.conf.js这个文件在build文件夹中，添加
然后还是这个文件，找到plugins，在里面加入
注意着里面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。按照你的route来写。
然后重新输入
完成后是这样的
这只是一个治标不治本的解决办法！因为只有route中的页面被生成了静态页面，我们的内容页面是无法生成静态的。那么这该怎么办呢？如果你既想使用vue那简介的语法进行开发，又希望项目能实现cms那样自动生成静态的功能，你就需要用到一个吊炸天的东西—基于vue的nuxt.js来开发！
请持续关注龙哥的后续教程！
vue高级技巧的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue高级视频教程、vue高级技巧的信息别忘了在本站进行查找喔。
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » vue高级技巧（vue高级视频教程）
