The main contents:
Documents from Vue
You may have seen
But you probably have not used
vue data response fails
Do you know under what circumstances, vue data response would fail it? The official cited an example:
Vue new new VM = var ({
Data: {
items: [ 'A', 'B', 'C']
}
})
vm.items [. 1] = 'X' // not responsive vm.items.length = 2 // copy the code not responsive
In daily traffic, especially for loop array rendering, when you are done using v-for, the dynamic index value designated by the operation of the array, not response. We use the actual business code example:
<template>
<div>
<div v-for="(item,key) in list" :key="key">
{{item}}
</div>
<button @click="changeList">失效</button>
<button @click="respondList">响应</button>
{{list}}
</div></template><script>export default { name: 'ex',
data () { return { list: [11, 12, { money: 17 }]
}
}, methods: {
changeList () { // 失效代码
this.list[0] = 16
this.list.length = 0
},
respondList () { // 生效代码
this.list[2].money = 0
this.list[0] = 16
}
}
}</script>复制代码
Then we look at what happens :
When this is very interesting, and we can see this process, the implementation of changeList () method, on page 11 did not turn out 16 and did not become an empty array of arrays, but the implementation of the second method, this.list already an empty array, resulting in an error. Will verify the official website said yes, item value we can not directly manipulate the array, the response you want will not happen. but! We may find, as if he projects that often have this operation, but this problem does not happen, then we look at what led us to ignore the problem in the project. Take a look:
I direct the implementation of the respondList (), but you can see this.list [0] = 16 sentence followed with a response, which is why our daily project no reason this problem. Because few have written a routine method in a separate project to change the list [index], usually accompanied by a number of other operations on the array or in an array of objects, and these actions will trigger a response of Vue, Vue response is not responding to our the code process, his response was the result, and the process only means that our code can trigger a response code Vue results.
Simply put, the implementation of the first method, two lines of code inside the list becomes empty array, but these two lines of code will not trigger the Vue to respond, Gu, page unchanged.
Performing the second method, this.list [2] .money = 0 except that the money becomes 0 also triggers a response mechanism Vue, which is performed after completion method Vue list will be updated, so the second row This.List [0] = 16 after the entire list to the edit, the method ends, the update list Vue
So we have to go alone to avoid direct [index] and the length of the array to an assignment in Vue, pay attention! He is alone .
vue data and response and ineffective?
You're not wrong, vue data response but also staged fails, this failure may your usual project wrote a lot, but you still have not noticed! The knowledge derived from vue document rendered inside a short list of tips Code:
var vm = new Vue({
data: { a: 1
}
})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的复制代码
阔怕，你从来没想过你在项目中obj.a=1会不生效，这其中文档中有2句话很重要：
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。 对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。
相信我的加粗已经让你意识到了问题所在，至于日常中为什么没有感觉到失效是和上个例子一样的，当然官方为这种单独操作对象属性方法
Vue.set(object, key, value)
具体使用方法可以回看文档。
不止在{{}}中可以使用函数
我要表达的意思是不止在双括号中可以使用函数，v-for也可以。 当然如果有人不知道双括号可以使用函数，我们先来演示一遍：
<template>
<div>
<div v-for="(item,key) in list" :key="key">
{{filterList(item)}}
</div>
</div></template><script>export default { name: 'ex',
data () { return { list: [0, 1, 2]
}
}, methods: {
filterList (item) { if (item > 0) { return '大于0'
} else { return item
}
}
}
}</script>复制代码
好的，接下来，文档告诉我们一个技巧，直接看官网示例：<li v-for="n in evenNumbers">{{ n }}</li>
复制代码
data: { numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
复制代码
可以直接用一个函数来代替v-for中的list，这样可以结合计算属性避免我们在每次获取数据等业务场景下重新单独处理list。
函数中直接调用当前元素的原生事件
首先说一下这个技巧适用于：
你要为某个元素绑定一个事件
你的事件里可能需要操作业务的同时，根据业务操作浏览器原生事件
绑定事件时可以用特殊变量 $event 把它传入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
复制代码// ...methods: {
warn: function (message, event) { // 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
复制代码
该技巧适应场景有限，但是至少你要记住，vue可以直接在实践中绑定event，去操作原生事件，因为总有一天你会发现有些p需求需要你去实现……
Vue的修饰符很多你知道吗
有v-once也有.once
大家知道vue推荐对低开销的静态内容使用v-once渲染，但是如果你仔细看过文档你应该知道v-once，首先v-once的原理其实是keep-alive,它会缓存v-once的组件，但是希望你再阅读一次官方这句提示：
再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。
是的，除非你这个组件渲染的开销已经严重到你觉得他明显的慢，否则不要使用。
然后我们来说事件的.once
<!-- 点击事件只会执行一次 --><form @click.once="submit"></form>复制代码
要注意不能将其应用于按钮的点击之后，它不同于按钮的loading，点击按钮打开loading如果执行错误可以关闭loading，按钮可以再次执行。
而使用.once事件触发过一次之后，不会再次执行，当然你可以将它应用于其他事件，但是你要记住存在一个可以只让你的事件只触发一次的修饰符，总会用到的。
你认为的type="number"
大家在表单中如果要是用数字类型的input的时候通常我们会使用type=number，但是也许没有人注意到input真正返回是什么，比如：
<template>
<div>
{{age}}
<input v-model.number="age" type="number" @change="lookAge">
{{year}}
<input v-model="year" type="number" @change="lookYear">
</div></template><script>export default {
data () { return { age: null, year: null
}
}, methods: {
lookAge () { console.log(this.age)
},
lookYear () { console.log(this.year)
}
}
}</script>复制代码
这一小段那代码有什么区别呢？
首先，在渲染上，至少结果都是正确的，console的结果也是没问题的，但是console调试的时候，蓝色数字和白色数字有什么区别，也许很多人都没注意过这个问题，回看看文档就可以让你理解我刚才提出的问题，文档原文：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。 是滴，我觉得这对于用ts的人极其和谐。
如果你看到了上面的.number修饰符，那你一定可以在文档中接着看到.trim修饰符：
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
这个问题我之前还真是碰见过，可惜我使用的方法是用js的trim去单独处理了一遍，殊不知文档如此简单，我竟然不好好阅读！
最后一个小技巧了
首先讲一讲我的菜鸟路程，在使用prop的时候刚开始我都是这样写：
props: { title,
author
}
复制代码
后来我这样写：
props: { title: String,
author: Object
}
复制代码
再后来我这样写：
props: { title:{ type: String, required: true
}, author:{ type: Object, required: true
}}复制代码
然后我读文档发现还可以这样写：
props: {// the default values of the object with the
title: {type: String, // Default object or array must be obtained from a function factory
default: function () {return {Message: 'Hello'}
}
}, // custom validation function
author: {validator: function (value ) {// this value must match one of the following string
.! return [ 'au', 'th', 'or'] indexOf (value) == -1
}
}
}
copy the code
Yes, but also with authentication prop, and you may use a custom validation function! I found this be a tip, but the most important later in this document:
When prop validation fails, the (development environment to build versions) Vue will generate a warning console.
Note that the prop will be verified before the next component instance is created, the instance attribute (e.g., data, computed , etc.) or in a default validator function is not available to.
In a most critical function verification: data and attribute calculation variables and methods are not available.
To this end, which I have recently used the commuting time I went over vue document, which will be willing to take some omissions or common projects rarely used, has been shared with a small content to forget you.
If useful to give a comment, useless if I do not Tucao good, I beg you, ha ha.