vue学习----computed vs. methods

1.对比

	作用	语法	缓存	是否可以以修改
computed计算属性	封装一段对于数据的处理，求得一个结果	作为属性，直接使用，{{计算属性名}}	计算属性会对计算出来的结果缓存，再次使用直接读缓存，依赖项变了，会自动重新计算->再次缓存（性能高）	通常只能读取访问，不能修改。如果非要修改，可以在set中修改
methods方法	给实例提供一个方法，调用以处理业务逻辑	作为方法，需要调用，{{方法名（）}}	无缓存

2.watch侦听器

作用：监视数据变化，执行一些业务逻辑或异步操作。

语法：简单类型数据，直接监视

应用场景：输入内容，实时翻译

data:{
    words:'', //普通类型
    obj:{
        words:''
    }  //复杂类型
},
watch:{
    //该方法会在数据变化时调用执行
    words(newValue,oldValue){
        console.log('变化了',newValue)
    }

    'obj.words'(newValue,oldValue){
        console.log('变化了',newValue)
    }
}

侦听器完整写法

需求：输入内容，修改语言时，都要实时翻译

data:{
    words:'', //普通类型
    obj:{
        words:'',
        lang:''
    }  //复杂类型
},
watch:{
    //完整写法
    obj：{
        deep:true, //深度监听，可以同时监听words、lang的变化，可以对对象里面所有属性进行监听
        immediate:true, //立即执行。不仅仅是在页面修改时执行，一进页面就执行handler一次
        handler(newValue){
            //每次都清除定时器
           clearTimeout(this.timer)
            //0.3秒后发一次请求
           this.timer = setTimeout(async()=>{
                   const res = await axios({
                        url:'',
                        params: newValue
            })
            this.result=res.data.data
            },300)
        }
    }
}

3.如何实现防抖

'obj.words'(newValue){
    //每次都清除定时器
   clearTimeout(this.timer)
    //0.3秒后发一次请求
   this.timer = setTimeout(async()=>{
        const res = await axios({
            url:'',
            params:{
                words: newValue
            }
        })
        this.result=res.data.data
    },300)
}