小知识,大挑战!本文正在参与“程序员必备小知识”创作活动
本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。
计算属性(computed)
在模板中放入太多的逻辑会让模板过重且难以维护,因此对于任何复杂逻辑,都应当使用计算属性。
栗子🧨:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
结果:
Original message: "Hello"
Computed reversed message: "olleH"
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
🏷计算属性和方法区别
计算属性是基于它们的响应式依赖进行缓存的。这就意味着只要 message
还没有发生改变,多次访问reversedMessage
计算属性会立即返回之前的计算结果,而不必再次执行函数。
而使用methods,触发重新渲染时,函数会重新调用执行。
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
🖱计算属性的setter
- 每一个计算属性都包含一个 getter 函数和 setter 函数;
- 计算属性会默认使用 getter 函数;
- 你也可以提供 setter 函数,当修改计算属性的值时,就会触发 setter 函数,执行一些自定义的操作。
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
现在再运行 vm.fullName = 'John Doe'
时,setter 会被调用,vm.firstName
和 vm.lastName
也会相应地被更新。
侦听器(watch)
当需要在数据变化时执行异步(如:访问一个 API)或开销较大的操作时,这个方式是最有用的。
栗子🧨:具体可见 侦听器
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
🖥计算属性和侦听器的区别
watch是观察某一个属性的变化,重新计算属性值,只监听指定的变量的值。computed是通过所依赖的属性的变化重新计算属性值。 大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。当你有一些数据需要随着其它数据变动而变动时,最好用计算属性而不是watch回调
v-if和v-show区别
1、v-if只有在判断为true的时候才 会对数据进行渲染,false的时候把包含的代码进行删除。除非再次进 行数据渲染,v-if才会重新判断。 可以说是用法比较倾向于对数据一次操作。 2、v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操 作。所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
v-for
♠ 用 v-for
把一个数组对应为一组元素
用 v-for
基于一个数组来渲染一个列表,v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源数据数组,而 item
则是数组里的各个元素。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果:
Foo
Bar
在 v-for 块中,可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引。大多使用index
(序号)来标记。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果:
Parent-0-Foo
Parent-1-Bar
Parent 为父作用域里的,可供整个组件使用。
♣ 在 v-for
里使用对象
v-for也可以来遍历一个对象的属性(值,键名name/key都可以,索引),加括号不加括号都可
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
结果:
How to do lists in Vue
Jane Doe
2016-04-10
你也可以提供第二个的参数为 property 名称 (也就是键名):
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
结果:
title:How to do lists in Vue
author:Jane Doe
publishedAt:2016-04-10
还可以用第三个参数作为索引:
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
结果:
0.title:How to do lists in Vue
1.author:Jane Doe
2.publishedAt:2016-04-10
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
attribute:
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
🚩不要使用对象或数组之类的非基本类型值作为 v-for
的 key
。请用字符串或数值类型的值。
<router-link>
和<a>
区别
<a>
标签定义超链接,用于从一张页面链接到另一张页面,违背了多视图的单页Web应用这个概念,通过a标签进行跳转,页面会被重新渲染,即相当于重新打开一个新的网页,体现为视觉上的“闪烁”(如果是本地的项目基本看不出来)
<router-link>
跳转不会跳转到新的页面,也不会重新渲染,它会选择路由所指的组件进行渲染,避免了重复渲染的“无用功”,它只更新变化的部分从而减少DOM性能消耗
有问题欢迎交流哦~ 欢迎关注同名公主号:昕之一方
参考资料:vue文档