There are some tricks which can"t be found easily in Vue.js homepage. So, for convenient, I summarized them here.
Vue Access Global Variable in TemplateHave you ever done something like this in lots of components?
or
Actually, you don"t have to, you can register window or bus in Vue.prototype like:
Vue.prototype.window = window Vue.prototype.bus = bus
in the main.js or the entry file. Then you can use bus or window in template directly. Also, this usage prevents Vue watching the attributes of bus or window which would bring a waste of performance.
Reactive or Not ReactiveAlways, if we want a data reactive, we have to do something like this:
data: {
newTodoText: "",
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
Set some initial value to adds all the properties found in its data object to Vue"s reactivity system.
Things we need to take care about is:
If we want to add reactive attributes dynamically, we have to use something like Vue.set or this.$set. Otherwise, they might not be reactive.
If we definitely don"t want some data to participate in Vue"s reactivity system even we initialize it in data. We can use something like Object.freeze(). For example, freeze a huge array to improve performance.
Scoped Style Won"t Work on Dynamically Inserted ElementsI always use the
color: red won"t work on .App__title because of scoped. The actual style is rendered with a unique attribute like:
So, how do we solve this? /deep/ or >>>.
They can be used to override child component style. Here is the doc.
Smarter WatchersHave you ever written code like this:
{
// ...
created() {
this.fetchPostList()
},
watch: {
searchInputValue() {
this.fetchPostList()
}
}
// ...
}
Actually, you can simplify it by
{
// ...
watch: {
searchInputValue:{
handler: "fetchPostList",
immediate: true
}
}
// ...
}
As the doc said:
Passing in immediate: true in the option will trigger the callback immediately with the current value of the expression.$attrs and $listeners
I don"t know if you have used $attrs and $listeners from this. However, I never used those until I met this situation. For example:
It"s obviously tedious to bind every attribute and listener by hand. Actually, this is where $attrs and $listeners will help us. We can write the BaseInput template like:
let BaseInput = {
name: "base-input",
template: ``,
props: {
value: {
type: String
}
},
computed: {
listeners() {
const listeners = {
...this.$listeners,
// move `focus` in to `listeners` instead of adding one more `focus` listener.
focus: this.focusCb
}
return listeners
}
},
methods: {
focusCb(event) {
console.log("child", event)
}
}
}
Vue-Router
$router and $route
Have you ever wonder about the relationship between $router and $route? I give you a hint:
this.$router.currentRoute === this.$route //trueVuex Commit Data by One Mutation
We can"t directly mutate state in Vuex. Instead, we have to commit a mutation to mutate the data. However, it would be tedious to write lots of similar mutations like this:
let store = new Vuex.Store({
modules: {
// ...
},
mutations: {
updateName(state, data) {
state.name = data
},
updateChildrenCount(state, data) {
state.children.count = data
}
// other similar mutations
}
})
We can write a public mutation to do this like:
let store = new Vuex.Store({
modules: {
// ...
},
mutations: {
replaceProperty(state, { path, data }) {
if (typeof path !== "string") {
return
}
path = path.split(".")
let targetObj = path.slice(0, -1).reduce((re, key) => re[key], state)
targetObj[path.pop()] = data
}
}
})
Then we can mutate state in anywhere with only one mutation like:
commit(
"replaceProperty",
{
path: "name",
data: name
},
{ root: true }
)
commit(
"replaceProperty",
{
path: "children.count",
data: data
},
{ root: true }
)
commit(
"replaceProperty",
{
path: "some.other.deep.path.in.state",
data: data
},
{ root: true }
)
It would also work for modules!
Original Post
Reference7 Secret Patterns Vue Consultants Don’t Want You to Know - Chris Fritz
vue-loader/issues/749
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108875.html
摘要：某熊周刊一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章项目书籍教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更新。 某熊周刊:一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章/项目/书籍/教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更新。资讯来源包括但不限于Medium、Twitter、Google Plus、Reddit、Hacke...
摘要：某熊周刊一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章项目书籍教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更新。 某熊周刊:一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章/项目/书籍/教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更新。资讯来源包括但不限于Medium、Twitter、Google Plus、Reddit、Hacke...
摘要：某熊周刊一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章项目书籍教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更新。 某熊周刊:一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章/项目/书籍/教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更新。资讯来源包括但不限于Medium、Twitter、Google Plus、Reddit、Hacke...
摘要：本文从属于某熊周刊一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章项目书籍教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更新。资讯来源包括但不限于。另外，周刊中的技术知识框架图参照笔者的我的编程知识体系结构。 本文从属于某熊周刊:一周推荐外文技术资料是笔者每周浏览外文技术网站中时发现的不错的文章/项目/书籍/教程的集锦，可以关注笔者的专栏某熊的全栈之路及时获取更...
摘要：前端工程师们都听过看起来很高级的词，节流和防抖，其实节流就是，防抖就是，其实这个也属于前端性能优化的一部分。具体就不写了，因为常用于连续事件的事件处理函数。可以参考文章最后的，其中的在上的运用，就是的正确打开方式。 showImg(https://segmentfault.com/img/bVbmYxW?w=960&h=540); 前端工程师们都听过看起来很高级的词，节流和防抖，其实节...
阅读 1559·2021-11-11 16:55
阅读 2261·2021-09-14 17:57
阅读 1274·2019-08-30 15:54
阅读 650·2019-08-29 15:34
阅读 2121·2019-08-29 13:11
阅读 2794·2019-08-26 13:28
阅读 1758·2019-08-26 10:49
阅读 852·2019-08-26 10:40
