【实战】computed & watch 查缺补漏

[sleepyShen1989]

computed

methods区别：模块中多次使用的值时重新渲染（包括第一次渲染）时，computed只执行一次

setter和getter

值为函数的话，该函数是该key的getter方法

watch

• 默认情况下只会监听的数据本身的改变，对象内部值的改变需要添加deep配置
• 设置深度监听，在变更（不是替换）对象和数组时，旧值与新值相同，因为他们的引用指向同一个对象/数组
  • 解决方案：在computed属性里添加一个stringify的监听对象，监听该值

// 深度侦听/立即执行
watch: {
    info: {
        handler: function (newInfo, oldInfo) {
            console.log(newInfo)
            console.log(oldInfo)
        },
        deep: true,
        immediate: true
    },
    'info.name'(newValue) {
    }
}

const unwatch = this.$watch("info", (newValue, oldValue)=>{
    console.log(newValue)
}, {
    deep:true,
    immediate: true
})

// 取消侦听
unwatch()