2020-12-22

模板内可以放置表达式 使用很方便 初衷时为了进行简单的计算 但是如果有复杂的逻辑计算就会导致模板变得过重且难以维护，因此引入了
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 特别关联。后面我们将在指南中看到，它还具有其它用途。