实例说明vue 计算属性computed,与侦查属性watch

vue 计算属性computed,与侦查属性watch

computed:当一个动态的参数在computed中注册后,那么我们可以在注册他的这个组件内通过this.参数名实时获取到他的动态值,也就是说这个值被注册到该组件的data中了。
watch 当组件内的某个参数被注册为watch 属性时,当这个参数变化时,将会被感知,进而触发响应函数

实例
这里写图片描述
业务描述如图所示我需要在点击左侧菜单选项时,分别更新右上的导航栏数据,和右下的页面展示数据。也就是说右边的两个组件需要实时的获取左侧通过点击改变的动态数据,来实时渲染dom
1当点击左侧菜单栏时将更新store中反应当前页面的的参数CurrentPage

 this.$store.dispatch("comment/updateCurrentPage",s)

2在导航栏组件中将store中的CurrentPage注册到computed中,也就是注册到了该组件的data中

  computed: {
      currentPage:{
        get() {
          return this.$store.state.comment.currentPage;
        }
      }
      }

3通过watch监听注册到data中的currentPage值得变化,从而触发处理函数,实现导航栏的变化

  watch:{
      currentPage:function(val,oldval){
 //逻辑处理
      },
    },

总的来说,两者都可以监听到数据的变化,但如果要添加处理函数用watch
纯属个人理解,如有纰漏,还望指正

猜你喜欢

转载自blog.csdn.net/weixin_39168678/article/details/81231880