watch（deep,immediate）和computed（get 和set）的详细介绍及使用场景

watch

介绍

watch 的一个特点是，最初绑定的时候是不会执行的，要等到 监听的属性 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

<div><p>obj.a: {
    {
    obj.a}}</p><p>obj.a: <input type="text" v-model="obj.a"></p>
</div>new Vue({
    el: '#root',data: {
    obj: {
    a: 123}},watch: {
    obj: {
    handler(newName, oldName) {
    console.log('obj.a changed');},immediate: true}} 
})

当我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值：

mounted: {
    this.obj = {
    a: '456'}
}

相反，如果我们需要监听obj里的属性a的值呢？这时候deep属性就派上用场了！

watch: {
    obj: {
    handler(newName, oldName) {
    console.log('obj.a changed');},immediate: true,deep: true}
} 

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

watch: {
    'obj.a': {
    handler(newName, oldName) {
    console.log('obj.a changed');},immediate: true,// deep: true}
}

这样Vue.js才会一层一层解析下去，直到遇到属性a，然后才给a设置监听函数。

使用场景

当一条数据影响多条数据的时候。
比如:监听输入框值的改变去搜索不同的数据；监听字符串数量的改变去改变该字符串的所需要的宽度

watch: {
    // 处理字符串长度siteStr: {
    handler(val) {
    this.leftW = val.length * 32;},deep: true}},

computed

介绍

使用场景：当一个属性受多个属性影响的时候
比如:购物车商品总价格结算的时候，总价格受多个商品价格的影响；定位地区的时候，可能显示省、市、区的其中一个就行（如果直接在组件里显示值就没必要这样，但是要计算该地区字符串的长度所需要的宽度就有必要使用computed，因为这样watch才能去监听到computed里地区字符串变化的值）

// 获取地区字符串的值
computed: {
    
//get的用法siteStr: {
    get() return this.shop.area || this.shop.street || this.shop.city || this.shop.province;}}//或者siteStr: function(){
    return this.shop.area || this.shop.street || this.shop.city||this.shop.province;}
//set的用法
比较少用
}

Computed中get 和set讲解

https://blog.csdn.net/zhumizhumi/article/details/90479642