Vue笔记(一):Some points in the beginning
1. v-if / v-show
v-if
会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。另外,v-if
直到条件第一次为真时,才会开始渲染条件块。
v-show
不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS
进行切换。
v-if
有更高的切换开销,如果在运行时条件不太可能改变,则使用v-if
较好v-show
有更高的初始渲染开销,如果需要非常频繁地切换,则使用v-show
较好
2. computed / methods
computed
可被缓存,只要依赖不变就不会重新调用。以下使用computed
过滤数组。
<li v-for="n in evenNum">{{n}}</li>
new Vue({
el: 'ul',
data: {
num: [1, 2, 3, 4, 5]
},
computed: {
evenNum: function(){
return this.num.filter(function(n){
return n % 2 == 0;
});
}
}
});
methods
每次调用方法总是重新执行函数。以下使用methods
过滤数组。
<li v-for="n in even(num)">{{n}}</li>
new Vue({
el: 'ul',
data: {
num: [1, 2, 3, 4, 5]
},
methods: {
even: function(num){
return num.filter(function(n){
return n % 2 == 0;
});
}
}
});
3. v-for
- 迭代数组
<ul id="exp-1">
<li v-for="(item, index) in list">
{{index}} - {{item.txt}}
</li>
</ul>
new Vue({
el: '#exp-1',
data: {
list: [
{txt: 'first'},
{txt: 'second'},
{txt: 'third'}
]
}
});
0 - first
1 - second
2 - third
- 迭代对象:按
Object.keys()
遍历
<ul id="exp-2">
<li v-for="(value, key, index) in obj">
{{ index }} - {{ key }} - {{value}}
</li>
</ul>
new Vue({
el: '#exp-2',
data: {
obj: [
{txt: 'first'},
{txt: 'second'},
{txt: 'third'}
]
}
});
0 - name - qm
1 - age - 22
4. 数组限制
由于 JavaScript
的限制,Vue
不能检测以下变动的数组:
- 利用索引直接设置一个项:
vm.list[idx] = newValue;
可用以下两种方法实现相同效果触发状态更新
// 1. 全局set方法
Vue.set(vm.list, idx, newValue)
// 2. Array.prototype.splice
vm.list.splice(idx, 1, newValue)
- 直接修改数组长度:
vm.list.length = newLen;
vm.list.splice(newLen)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· Java轻量级代码工程
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战