美文网首页
第四节 computed和watch

第四节 computed和watch

作者: darkTi | 来源:发表于2020-05-28 16:06 被阅读0次

一、computed

二、watch

  1. 当监听的数据发生变化而做出的动作;
  2. 数据怎么才算发生变化呢?
  • vue中,对于一个简单数据类型的值变了,那它肯定是发生变化了,毋庸置疑;

  • 对于一个对象,你把对象里的简单数据类型的值变了,那么就只有这个简单数据类型发生变化了,这个对象是没有发生变化的(因为对于一个对象,只要它的地址没变,那么它就没有发生变化)

  • 对于一个对象,只有你把它的地址改变了,那么对象才会发生变化;

  • 请问,如果obj原本就是{a: 'a'},现在再obj = {a: 'a'},那么obj变了吗(回答:变了,因为地址变了);obj.a变了吗(回答:没有变,因为它的值还是'a');所以总结下来,简单类型看值,复杂类型(对象)看地址

  • 但是!!!vue的watch提供了一个选项,可以直接监听对象里面的值是否发生变化,那就是deep:true!!!deep:true就是监听obj的时候需不需要再往里深入看它里面值得变化;

  • 当你obj.a发生变化,那obj算不算也发生变化呢?如果需要的答案【它变了】,那么就用deep:true;如果需要的答案【它没变】,那么就用deep:false

  • immediate:true:第一次是否要执行;

  • watch的属性里面绝对不要用箭头函数(就是它监听的属性的value),会导致this指向错误;例如

//watch的语法
new Vue({
      watch:{
              a: function(newValue,oldValue){},   //但是绝对不要写成  a:  ()=>{}
              a(newValue,oldValue){},  //这样写跟上面那种写法是一样的啊 es6的语法啊
              b: [f1,f2] , //支持里面接受两个函数,不能用箭头函数啊!这两个函数会在b变化的时候依次执行
              c: 'methodName',  // methods里面的方法
              d:{ handler: fn, deep: true, immediate: true},
              'obj.a': function(){}
       }
}).$mount('#app')

//watch还有另外一种写法,但一般不用这种
vm.$watch('a',function(){},{deep: true, immediate: true})

三、computed和watch的区别

1、 computed是计算属性;watch是监听的意思;
2、 解释computed:①computed是用来计算出一个值得,在使用的时候可以像属性一样直接用,不需要加括号;②它根据依赖会自动缓存,依赖的数据没有发生变化的话,那么它就不会再重新计算;
3、 解释watch:①watch是用来监听数据的变化,从而做出相应的动作;②它有两个属性,immediate表示在第一次渲染时是否执行这个函数,watch默认在第一次渲染时是不执行的;deep表示在监听一个对象时,是否要看它里面属性的变化;

如果有一种情况,computed和watch都可以用,那么优先选择使用computed

相关文章

网友评论

      本文标题:第四节 computed和watch

      本文链接:https://www.haomeiwen.com/subject/fcjnehtx.html