一、计算属性
1. 使用插值语法和methods拼接姓名
如果样式要求不多的话这样写没问题,如下代码是截取我输入的姓的前三个字母
<div id="root">
姓:<input type="text" v-moudel="firstName">
名:<input type="text" v-moudel="lastName">
姓名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
</div>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
firstName:'hb',
lastName:'bj'
}
})
样式太多的话就都放进methods里面去
注意:之前的showInfo是绑定事件,加不加()都行,现在是调用那个函数必须得加()
每次改动firstName后者lastName就会重新解析模版,调用fullName
<div id="root">
姓:<input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
姓名:<span>{{fullName()}}</span>
</div>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
firstName:'hb',
lastName:'bj'
},
methods:{
fullName(){
// this是vue实例,里面就有firstName啥的
return this.firstName+'-'+this.lastName
}
}
})
2. 使用计算属性拼接姓名
定义:要用的属性不存在,要通过Vue中已有属性计算得来。
原理:底层借助了Objcet.defineproperty方法提供的getter和setter
属性:vue认为data里面写的就是属性,属性:属性值,属性在vm._data里
计算属性:就是拿着你已经写完的属性去加工计算,放在vm里,不在data里
属性放在data里,计算属性放在computed
<div id="root">
姓:<input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
姓名:<span>{{fullName}}</span>
姓名:<span>{{fullName}}</span>
姓名:<span>{{fullName}}</span>
</div>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
firstName:'hb',
lastName:'bj'
},
computed:{
fullName: {
get(){
//读取fullName的时候自动调用get
// 并且vue给你设置computed里的this是vm
console.log('get被调用喽')
return this.firstName+'-'+this.lastName
}
}
}
})
如果这个时候我多次调用fullName的话,输出get被调用喽只显示一次,因为有缓存
get什么时候调用?(1)初次读取fullName 时,(2)所依赖的数据发生变化时,所以不用担心姓或者名变化fullName没变
我用computed不是fullName对象.get函数!而是我用fullName的时候立马就调用get函数,返回一个值放在fullName(计算出来的新属性)身上,在vm中可以查看
set什么时候调用?fullName被修改的时候,而且必须设置参数,你把fullName改成什么就返回什么
set(value){
const arr=value.split('-')
this.firstName=arr[0]
this.lastName=arr[1]
//fullName依赖first和last,想真正的改掉就得把谁算出来的改掉
}
优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
备注:
1.计算属性最终会出现在vm上,直接读取使用即可,不用加括号,和methods区别一下子。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
,这很关键。
3. 计算属性的简写
计算属性一般不修改,确定只读不改就可以用简写
姓名:<span>{{fullName}}</span>
computed:{
fullName(){
return this.firstName+'-'+this.lastName
}
}
fullName是一个属性,不是一个方法,只不过是调用里面的getter,把返回值直接给了vm,所以直接{{fullName}}不可以加()!!
data的数据,methods的方法,computed的计算属性
二、监视属性
1. 天气切换案例
(1)利用插值语法和三元表达式
<div id="root">
<h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2>
<button>切换天气</button>
</div>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
isHot:true
}
})
(2)利用计算属性
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="change">切换天气</button>
</div>
<script type="text/javascript">
const vm=new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
// isHot不是computed里的找不到,所以得this,就是vue的
}
},
methods:{
change(){
this.isHot=!this.isHot;
}
}
})
不需要methods也可以这样写:
<button @click="isHot=!isHot">切换天气</button>
@xxx:yyy绑定事件的时候可以写一些简单的语句
2. 监视属性
(1)watch
watch:{
isHot:{
immediate:true,
//初始化时让handler调用
//当isHot发生改变时它就调用
handler(newValue,oldValue){
console.log('isHot改了',newValue,oldValue)
}
}
}
用handler的时候同时返回两个参数newValue和oldValue
(2)vm.$watch
const vm=new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
// isHot不是computed里的找不到,所以得this,就是vue的
}
},
})
vm.$watch('isHot',{
immediate:true,
//初始化时让handler调用
//当isHot发生改变时它就调用
handler(newValue,oldValue){
console.log('isHot改了',newValue,oldValue)
}
})
第一个参数是对象名,第二个参数是配置对象
区别:很明确坚实谁就写第一种,否则就写第二种
3. 深度监视
(1).Vue中的watch默认不监测对象内部值的改变(一层,如果监视那么对象地址不变就不变)。
(2).配置deep:true可以监测对象内部值改变(多层)。
(3).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!想要可以就要手动开启deep:true
(4).使用watch时根据数据的具体结构,决定是否采用深度监视。
<div id="root">
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我实现a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我实现b+1</button>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
watch:{
//监视多级结构中某个属性的变化
numbers:{
//不加引号报错是因为本来就应该加引号写,有的中间不带.的简写了没加
// 如果想要给b也加的话,一个一个写太麻烦了,但是发现直接给number加
// 改变a或者bnumber都不输出,因为它没有深入的去看a或b的变化
deep:true,//监视多级结构中所有属性的变化
handler(){
console.log('number改了')
}
}
}
})
</script>
4.监视的简写形式
用简写的前提是不需要immediate也不需要deep
(1)watch写法
watch:{
isHot(newValue,oldValue){
console.log('isHot被改了')
}
}
(2)$watch写法
vm.$watch('isHot',function(newValue,oldValue)
{
console.log('isHot被改了')
})
三、watch对比computed
1.watch
<div id="root">
姓:<input type="text" v-model="firstName">
名: <input type="text" v-model="lastName">
全名: <span>{{fullName}}</span>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(newValue){
this.fullName=newValue+'-'+this.lastName
},
lastName(newValue){
this.fullName=this.firstName+'-'+newValue
}
}
})
监视姓的同时还是监视名
2.computed
computed:{
fullName: {
get(){
console.log('get被调用喽')
return this.firstName+'-'+this.lastName
}
}
}
加一下就完事了,但是computed计算属性里面不能开启异步任务去维护数据的,靠的就是返回值,watch就可以开延迟什么的。
firstName(newValue){
setTimeout(()=>{
this.fullName=newValue+'-'+this.lastName
},1000)
总结:
1、computed能完成的功能,watch都可以完成。
2、watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
两个重要的小原则!
1、所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
2、所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象