computed
computed: {
total: function (){
return this.first + this.second
}
},
computed监控定义的变量，不在data中声明，就可以在页面上直接展示结果，如果在data中申明，会报错
如果定义会报错,total作为计算属性定义，，在里面计算的结果返回给这个变量，那么就不可以被 重复定义和赋值
比较常用的场景类似于购物车，，，商品的多和少或者数量的增和减都会影响最后总的金额，多个变量中的某一个发生了变化 那么总的值也会发生变化
computed中定义的变量有两个方法，get和set
<h1>b----{{b}}</h1>
<button @click="add">click me</button>
<h2>a-----{{a}}</h2>
data() {
return {
a: 1,
}
},
computed: {
b: {
get() {
console.log('GET')
return this.a + 2;
},
set(val) {
console.log('SET')
this.a = val
}
}
},
methods: {
add: function(){
this.b = 10
}
}
get方法是默认的，获取值
set方法就是改变这个属性值的时候会触发，比如在这里点击了按钮就会触发这个set方法
点击按钮，走add的方法，然后改变了计算属性定义的变量b，这个时候就会执行set方法，重新给a赋值为10，然后通过get方法返回b的值是12
watch
监控的变化必须在data里面声明才可以，变量，对象都可以
工作中常用的，监听路由
//简单数据
watch:{
total(newVal,oldVal){
console.log(newVal)
console.log(oldVal)
console.log('watch')
}
},
//复杂数据
return {
obj: {
name: 'Lily',
age: 12
}
}
},
watch:{
obj:{
deep:true,
handler:function(newVal,oldVal){
console.log(newVal)
console.log(oldVal)
}
}
},
methods: {
changeName() {
this.obj.name = 'Jack'
}
}‘
输出的两个值都是更新后的值，无法拿到更新之前的值 ，，因为newVal和oldVal的索引指向同一个对象，，，，也就是说可以监听对象的变化，监听不了具体对象的变化
深度监听的函数名必须是handler，否则无效
官方文档指出数组监听不要使用deep:true
//单个对象
'obj.name'(newVal,oldVal) {
console.log(newVal)
console.log(oldVal)
}
如果不想这么写，也可以借助computed
computed: {
change() {
return this.obj.name
}
},
watch:{
change(newVal,oldVal) {
console.log(newVal)
console.log(oldVal)
}
}
区别
一、computed与watch
computend就是在它关联的数据发生改变的时候才会触发,,, 简化逻辑，，可以缓存，页面重新渲染也不会变化，会返回之前的结果，不会再次执行
watch就是监听哪个发生了变化就变化，页面只要重新渲染就会执行
二、computed与method
一个是属性调用 一个是函数调用,,,,而且computed具有缓存功能
computed: {{add}}
method: {{add()}}
<h1>{{message}}</h1>
<p>{{totalMethod}}</p>
<p>{{totalMethod()}}</p>
<p>{{totalMethod()}}</p>
<p>{{totalComputed}}</p>
<p>{{totalComputed}}</p>
computed: {
totalComputed() {
console.log('computed')
return this.message + 'computed'
}
},
methods: {
totalMethod() {
console.log('method')
return this.message + 'method'
}
}
执行次数.png
从截图中可以看出，方法是每次都执行， 而computed在这个里面只有message发生了改变，才会执行
复杂逻辑使用computed有利于性能的提升
computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值
