模板内可以放置表达式 使用很方便 初衷时为了进行简单的计算 但是如果有复杂的逻辑计算就会导致模板变得过重且难以维护,因此引入了
camputed 既计算属性 理解 复杂或者不能一眼看明白的逻辑计算 建议放入计算属性内
实例:
div
{{massage.split('').reverse().jion('')}}
div
此处是字符串翻转
倘若使用计算属性 可以这样写
div
{{massageFun}}
div
data:{
massage:''
}
computed:{
// 计算属性的getter//?
massageFun:function(){
// 此处this指向 data里数据
return this.massage.split('').reverse().jion('');
}
}
此时massageFun只是函数 结果输出取决于massage的值 符合了面向对象编程 当massage发生改变是 massageFun会绑定更新 易于理解和维护
所以,对于任何复杂逻辑,你都应当使用计算属性。
计算属性VS缓存 秒!!
在实际使用中 使用函数会有一样的效果
我们将massageFun定义为一个函数而不是一个计算属性 实际上两者结果完全相同 不同的是 计算属性是基于 响应式依赖进行缓存 只有massage发生改变时才需要重新计算求值 没有改变时多次求值 不会再重新计算 如下
div
{{massageFun()}}
div
method:{
massageFun(){
return this.massage.split.('').reverse().join('')
}
}
原因 : 当有一个开销比较大的运算时 每次渲染时调用方法总会再次执行函数
当然当你不需要缓存 或者需要避免缓存就需要调用方法
computed(_){
new(){
return Date new();
}
}
计算属性和事件监听
watch 多个个属性 服务一个结果 每个属性都要进行监听
计算属性: 使用数据绑定 当结果包含的属性有变化时自动进行计算
举个栗子:
事件监听版本:
div
fullNameIs:{{fullName}}
div
data:{
firstName:'xxx';
lastName:'xxx';
fullName:'';
}
//监听
watch:{
// firstName 发生改变时运行?
firstName:function (value){
this.fullName = value + this.lastName;
}
lastName:function (value){
this.fullName = this.firstName + value;
}
}
计算属性版本:
div
fullNameIs:{{fullName}}
div
data:{
firstName:'xxx';
lastName:'xxx';
}
computed:{
fullName: function(){
return this.firstName + this.lastName;
}
}
对比可以看出计算属性更为简洁//
计算属性里默认只有get方法,当你需要set方法时 需要自己设置
//…
computed:{
fullName: {
// get方法
get:function(){
return this.firstName + ’ ’ + this.lastName;
},
// set方法
set:function(value){
const names = value.split(’ ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
运行 this.fullName = ‘xxx xxx’; 就会随时更新firstName 和 lastName
侦听器watch
侦听器允许我们监听一个值得变化 进而触发函数 由此我们可以 在异步请求中到达最后结果前进行中间状态设置
模板语法
模板表达式只能绑定单个表达式 模板表达式都被放在沙盒中 只能访问全局白名单里的变量 如date math 所以不应该在模板表达式里面试图访问用户定义的全局变量
v-on 监听dom事件 例子:
div
button v-on:click='doSomeThing'
div
class style 绑定
class 使用v-bind:绑定class 里面可以是数组 对象 或者三元表达式 根据数据的true false 来切换class
如下
div v-bind: class = "{blue:buleValue,red:redValue}"
div
data:{
buleValue:true,
redValue: false
}
//当buleValue 或者 redValue 发生变化时 相应的class也会发生变化
// 用计算属性接收值也可以代替
//如下
div v-bind:class="{classList}"
div
data:{
buleValue:true,
redValue: false
}
computed:{
classList:function(){
//代码块
return {
blue:buleValue&&redValue,
red:buleValue||redValue
}
}
}
条件渲染
v-if v-else v-show
v-if 和v-show区别 v-if是惰性的 在加载时 只要为false 就不会渲染 当为true时才会渲染 它们处于销毁和重建的状态 v-show: 初次加载时就会渲染 只是显示和不显示的问题 所以当一个元素需要多次显示和消失是 使用v-show有着更高的效率 反之使用v-if
用法
<template v-if="value">
<label>用户名</label>
<input type="text" placeholder="请输入用户名">
</template>
<template v-else>
<label>邮箱</label>
<input type="text" placeholder="请输入邮箱" >
</template>
在此例子中v-else 是value的false值显示 vue自己的算法为了节省性能会复用已经渲染的label和input 所改变的只是placeholder 用户input里已经输入的值永不会发生改变 如果需要改变 就需要加上key值 如下
<template v-if="value">
<label>用户名</label>
<input type="text" placeholder="请输入用户名" key = 'username'>
</template>
<template v-else>
<label>邮箱</label>
<input type="text" placeholder="请输入邮箱" key = 'email'>
</template>
此时input离的值不会保存 input元素不在复用 但是label会复用
vue 的迭代器 v-for
类似map()
列表渲染
在数组中
<ul v-for="item in itemArr" :key="item.name">
<li>{{item.name}}</li>
</ul>
data(){
return {
itemArr:[
{name:'key1'},
{name:'key2'},
],
}
}
在对象中
<ul v-for="(value,item,index) of itemObject" :key="value">
<li>{{index}}.{{item}}:{{value}}</li>
</ul>
data(){
itemObject:{
name:'张三',
age:'18',
height:'180'
},
}
效果如下
0.name:张三
1.age:18
2.height:180
在vue中渲染遵循‘就地渲染策略’ 假如说列表的顺序发生了变化 vue是不会跟新dom顺序的 而是就地更新dom的值 这个渲染模式是高效的但只在少数的情况的下用 例如只考虑性能 不依赖子组件状态或临时dom状态 但是大多数情况下我们不想发生这样的情况 说以必须给vue一个提示 key值 类似react中的key值 一般在列表中考虑key可以为ID index 对象中 可以为item value并不适用
key 并不仅与 v-for 特别关联。后面我们将在指南中看到,它还具有其它用途。