4.computed计算属性/watch侦听器

1.computed计算属性

//computed：分离模板复杂的逻辑。
//computed有缓存。而methods是没有缓存的，每次都是重新调用。
computed:{
    submit(){
        return this.msg.split('').reverse('').join('')
    }
},

 

2.watch侦听器

//watch：观察响应数据的变动情况。
//虽然computed在大多数情况下更合适，但有时也需要一个自定义的侦听器来响应数据的变化。
//当需要数据变化时执行异步或开销较大的操作时，watch是最有效的。

//1.监听数据的变化，有变化时打印当前的值
watch:{
    list(val,newval){
        console.log(val);
        console.log(newval);
    }
}
//2.监听数据的变化，有变化时this.change_number++（使用深度监听）
watch:{
    list:{
        handler(newval){
            this.change_number++
        },
        deep:true,
        immediate:false
    }
}
//1.监听数据的变化，有变化时执行changeData方法
watch:{
    list:'changeData'
}
methods:{
    changeData(curVal,oldVal){
        console.log(curVal,oldVal)
    }
}