一、计算属性
1、什么是计算属性？
<div>
{
{
message.split('').reverse().join('')}}
</div>
模板设计的初衷是用于简单计算的，在模板内放太多的逻辑会让模板难以维护，对于任何复杂的逻辑都可以使用计算属性。
对于上述例子使用计算属性来处理
<div id="app">
<p>{
{
message}}</p>
<p>reversedMessage</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:''
},
computed:{
reversedMessage:function(){
return this.message.split('').reverse().join('')
}
}
})
</script>
2、计算属性的缓存
我们可以将同一个函数定义为一个方法，也可以将其定义为一个计算属性，但是计算属性是基于它的响应式依赖进行缓存的，只有在响应式依赖发生改变时计算属性才会重新求值，只要message没有发生改变，多次访问计算属性reservedMessage时会立即返回之前的计算结果，不会重新执行计算属性。
3、get函数什么时候会执行？
- 初次读取时会执行一次
- 当依赖的数据发送改变时
4、计算属性如何传参数？
full(){
return (value)=> {
return value+this.fist+this.last
}
}
二、侦听器watch
1、监听data中的数据
只要data中的数据发生改变，就会执行相应的逻辑。
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
fullName: ''
},
watch: {
firstName(newVal, oldVal) {
console.log(newVal, oldVal)
this.fullName = newVal + this.lastName
},
lastName(newVal, oldVal) {
this.fullName = this.firstName + newVal
}
}
})
</script>
2、深度监听
data(){
return {
number:{
a:1,
b:2
}
}
}
监听多级结构中某个属性的变化
'number.a':{
handler:function(newVal,oldVal){
console.log(newVal)
},
}
监听多级结构中所有属性的变化
number:{
handler:function(newVal,oldVal){
console.log(newVal,oldVal)
},
deep:true
}
3、watch监听路由的变化
watch: {
'$route.path': function (newVal, oldVal) {
if (newVal === '/login') {
console.log('欢迎进入登录页面');
}
}
}
watch:{
//to是将要进入的路由，from是当前页面的路由
'$route' (to, from) {
if(to.path == "/xxx"){
//操作
}
}
},
4、watch监听的属性
immediate
watch监听在第一次绑定的时候不会监听函数，只有值发送改变时才会执行，如果需要在最初绑定值的时候就进行监听，则使用immediate属性
handler
需要具体执行的方法，监听数组或对象的属性时用到的方法。
deep
如果监听一个对象的改变时，普通的watch无法监听对象内部属性的改变，此时需要deep属性对对象进行深度监听。