watch和computed的区别

computed

computed 计算属性,产生一个值,此值根据多个已有数据计算产生,并会缓存产生的值

假设当前要反转一个字符串,可以直接在模板中使用表达式,也可以使用函数,无论是直接写,还是使用函数 性能和复用性都没有计算属性好

    <div class="test">
      {{msg.split('').reverse().join('') +' ' +name}}
    </div>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
        msg:'droW-olleH',
        name:'生此不负'
      },
    })
    </script>

• 类似于用存取描述getter 定义的对象属性,读取就会调用回调,并把返回值作为属性的值,
• 计算属性存在缓存,多次使用也只执行一次函数,除非依赖数据发生变化,并重写执行get并缓存最新的值

<div id="app">
   <div class="test">
    <button @click="update">点我一下</button> <br/>
     <p>{{hello}}</p><p>{{hello}}</p>
   </div>
 </div>
 <script>
   const vm = new Vue({
     computed: {
       hello() {
         // 初始化调用一次
         // 依赖数据发生变化重新调用,缓存 存储结构是对象 key-value
         return this.msg.split('').reverse().join('') + ' ' + name
       }
     },
     ----------
     computed: {
       hello: {
         get() {
           return this.msg.split('').reverse().join('') + ' ' + name
         },
         set(val) {
           console.log(val, '当前计算属性修改之后最新的值');
         }
       }
     },
     methods: {
       update() {
         this.hello = '速成绝无可能'
       }
     },

计算属性还可以使用set(),来监视 this.hello='peiqi'的变化,虽然赋值了 ,但只要依赖数据没有变化get没有执行,this.hello的值还是原来的

watch

watch 用来监视一个值的变化,并执行异步相应的回调

  watch:{
      name(newV,old){
        //新旧 值
        console.log(newV,old);
      }
    },
    methods: {
      update() {
        this.name = '速成绝无可能'
        console.log('异步执行');
      }
    },

数据类型分为基本数据类型,和引用数据类型,watch要检测引用数据类型,必须地址值发生变化

watch可以使用对象模式来深度检测,里面任意一个值发生变化 即可调用回调

watch:{
      name:{
        deep:true,
        handler(val){
            console.log('我变化了',val);
        }
      }
 },

watch和computed的区别

watch:回调是异步调用,可以执行异步操作,computed是同步,不能执行异步操作

watch:适用于数据发生变化时执行异步发请求,和开销比较大的操作

computed:适用于需要一个经过复杂计算的数据,便于复用和灵活性高