Vue watch和computed区别

计算属性 computed : 

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

3. 计算属性默认只有getter(根据某个属性值发生变化而变化)，可以在需要的时候自己设定setter(自身的值发生变化从而修改别的属性值)

需要注意的是，就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。

<template>
  <div class="form-container">
    <div class="logo">登录</div>
    <div>{{name}}</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
     form:{
       userName :'张三',
       passWord:'123456'
     },
      name:''
    };
  },
  computed: {
    // names() {
    //   return this.form.userName + ":" + this.form.passWord;
    // },
    names:{
      get() {
        return this.form.userName + ":" + this.form.passWord;
      },
      set(newVal) {
        this.form.userName = newVal
      }
    }
  }
};
</script>

    

只有当computed监测的值变化的时候 , set才回被调用

<template>
  <div class="form-container">
    <div class="logo">登录</div>
    <div>{{name}}</div>
    <el-button type="primary" @click="changeVal">修改computed值</el-button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
     form:{
       userName :'张三',
       passWord:'123456'
     },
      name:''
    };
  },
  computed: {
    // name() {
    //   return this.form.userName + ":" + this.form.passWord;
    // },
    name:{
      get() {
        return this.form.userName + ":" + this.form.passWord;
      },
      set(newVal) {
        this.form.userName = newVal
      }
    },
    methods:{
       // 点击触发click就触发comouted里面的set方法
        changeVal(){
           this.name='小明'
        }
    }    
  }
};
</script>
         

侦听属性watch：

1. 不支持缓存

2. watch支持异步；

3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是旧值

4. 监听数据必须是data中声明过

　　immediate：组件加载立即触发回调函数执行，

　　deep: 深度监听，为了发现 对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

<template>
  <div class="form-container">
    <div class="logo">登录</div>
    <div>{{name}}</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
     form:{
       userName :'张三',
       passWord:'123456'
     },
      name:'',
      a:{
        b:12,
        c:20
      },
    };
  },
  watch:{
    //监听属性发生变化给另一个变量赋值
    'form.userName':function(val){
        this.form.passWord = val+'123'
     },
      //  监听obj
      a:{
         handel(b,c){
            console.log(b)
            console.log(c)
         },
         deep:true //深度监听obj类型
      },
     'form.userName':{
         handel(val){
            console.log(val) //页面初始化时候是空,当userName发生变化时val就有值了
         },
        immediate: true //页面初始化就加载监听函数
      }
  }
 
};
</script>