vue中的watch属性

Posted progress-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的watch属性相关的知识,希望对你有一定的参考价值。

watch可以用来监听vue实例中data数据的变化,然后触发触发这个watch中的对应的function处理函数

eg:

 watch: {
        // 监听data中firstname数据的变化
        firstname(newVal, oldVal) {
          // console.log("监听到了firstname的变化")
          // this.fulltname = this.firstname + "----" + this.lastname
          // 函数还有两个可用的参数,newVal和oldVal(newVal表示),newVal表示最新的值。oldVal表示旧值
          // console.log(newVal + "---" + this.lastname)
          this.fulltname = newVal + "--" + this.lastname
        },
        lastname(newVal) {
          // console.log("监听到了firstname的变化")
          // this.fulltname = this.firstname + "----" + this.lastname
          // 函数还有两个可用的参数,newVal和oldVal(newVal表示)
          // console.log(newVal + "---" + this.lastname)
          this.fulltname = this.firstname + "---" + newVal
        }
      },
watch还可以用来监听,一些费dom元素的操作。例如:路由的更换
  eg:可以直接使用watch来监听$route.path
  
   watch: {
        // watch可以监听一些非dom操作
        ‘$route.path‘(newVal, oldVal) {
          // console.log(newVal + "-----------" + oldVal)
          if (newVal == "/logn") {
            console.log("切换到了登陆组件")
          }
          else if (newVal == ‘/resgist‘) {
            console.log("切换到了注册组件")
          }
        }
      },
  

以上是关于vue中的watch属性的主要内容,如果未能解决你的问题,请参考以下文章

vue中的watch属性

深度监听(vue中watch的deep)

vue之watch和计算属性computed

vue--监听属性(watch)

vue3中的computed和watch

vuejs怎么watch对象里某个属性的变化