vue的计算属性和侦听器区别,监听器vue

  vue的计算属性和侦听器区别,监听器vue

  本文主要介绍Vue基金会的监听器,有一定的参考价值。感兴趣的朋友可以参考一下,希望能帮到你。

  

目录

  监听器监听器在vue中的用法是什么?vue listener-watch vue listener-深度聆听,立即总结。

  

vue中什么是侦听器

  在开发中,我们在数据返回的对象中定义数据,这个数据可以通过插值语法绑定到templat。

  当数据发生变化时,模板中绑定的数据会自动更新以显示最新的数据。但是,这种变化是通过自动监听模板中数据的值来转换的。

  在某些情况下,我们希望监视代码逻辑中某些数据的变化,然后我们需要使用监听器监视。

  官方定义:Vue提供了一种更通用的方法来通过观察选项响应数据的变化。当数据更改时需要执行异步或昂贵的操作时,这种方法最有用。

  对象,关键是要侦听的响应属性。property——包含数据或计算属性,值是对应的回调函数。该值也可以是方法名,或者是带有额外选项的对象。实例化时将调用$watch()。有关深度、立即和刷新选项的更多信息,请参见$watch。

  

侦听器的用法

  选项:手表

  类型:{[key: string]: string 函数对象数组}

  侦听器watch的配置选项:

  默认情况下,观察器只监听数据的引用更改,不会响应数据内部属性的更改:

  这时候我们可以用一个选项deep进行更深层次的倾听;另一个属性是,我们希望第一个立即执行:此时,我们使用immediate选项;此时不管后面的数据有没有变化,被拦截的函数都只会执行一次;

  data的内容:

  data() {

  返回{

  信息:{

  名称:“cgj”

  }

  }

  }

  观察:{

  信息:{

  处理程序(新值,旧值){

  console.log(新值,旧值)

  }

  深:真的,

  即时:真的,

  }

  }

  另一个在Vue3文档中没有提到,但是在Vue2文档中提到的是监听对象的属性:

   info.name: function(newValue,oldValue) {

  console.log(新值,旧值)

  }

  另一种方法是使用$watch的API:

  具体的$watch,可以查看官方API(几种方式):instance method Vue.js

  const app=createApp({

  data() {

  返回{

  答:1,

  乙:2,

  丙:{

  d: 4

  },

  e: 5,

  外宾:6岁

  }

  },

  观察:{

  //侦听顶级属性

  一个(瓦尔,老瓦尔){

  console.log(`新:${val},旧:${oldVal} `)

  },

  //字符串方法名

  b:“某种方法”,

  //当任何被侦听对象的属性发生更改时,都会调用此回调,无论它的嵌套有多深。

  丙:{

  处理程序(val,oldVal) {

  console.log(c已更改)

  },

  深:真的

  },

  //侦听单个嵌套属性

   c.d: function (val,oldVal) {

  //做点什么

  },

  //这个回调会在监听开始后立即调用。

  e: {

  处理程序(val,oldVal) {

  console.log(e changed )

  },

  即时:正确

  },

  //可以传入回调数组,它们会被逐个调用

  女:[

  手柄1 ,

  函数句柄2(val,oldVal) {

  console.log(handle2已触发)

  },

  {

  处理程序:函数handle3(val,oldVal) {

  console.log(handle3已触发)

  }

  /* .*/

  }

  ]

  },

  方法:{

  someMethod() {

  console.log(b已更改)

  },

  handle1() {

  console.log(“句柄1已触发”)

  }

  }

  })

  const VM=app . mount(# app)

  vm.a=3 //=新:3,旧:1

  

vue侦听器-watch

  目标:可以监听数据/计算属性值的变化。

  语法:

  观察:{

  正在侦听的属性名(newVal,oldVal){

  }

  }

  例子代码:

  模板

  差异

  输入类型=text v-model=name

  /div

  /模板

  脚本

  导出默认值{

  data(){

  返回{

  名称:“”

  }

  },

  //Target:检测到名称值的更改。

  /*

  语法:

  观察:{

  变量名(newVal,oldVal){

  //这里会自动触发变量名对应值的改变。

  }

  }

  */

  观察:{

  //newVal:当前最新值

  //oldVal:最后一个矩值

  名称(新值,旧值){

  console.log(newVal,old val);

  }

  }

  }

  /脚本

  风格

  /风格

  小结:如果要监听属性更改,可以使用监听属性观察器。

  

vue侦听器-深度侦听和立即执行

  目标:可以监听数据/计算属性值的变化。

  语法:

  观察:{

  正在侦听的属性名(newVal,oldVal){

  }

  }

  例子代码:

  模板

  差异

  输入类型=text v-model=user.name

  输入类型=text v-model=user.age

  /div

  /模板

  脚本

  导出默认值{

  data(){

  返回{

  用户:{

  名称: ,

  年龄:0岁

  }

  }

  },

  //Target:侦听对象

  /*

  语法:

  观察:{

  变量名(newVal,oldVal){

  //这里会自动触发变量名对应值的改变。

  },

  变量名:{

  处理程序(newVal,oldVal){

  },

  Deep: true,//深度监听(对象内部层的值发生变化)

  Immediate: true //立即监听(当处理程序打开网页时监听一次)

  }

  }

  */

  观察:{

  用户:{

  处理程序(newVal,oldVal){

  //用户中的对象

  console.log(newVal,old val);

  },

  深:真的,

  即时:正确

  }

  }

  }

  /脚本

  风格

  /风格

  小结:立即立即监听、深度监听、处理程序固定方法触发

  

总结

  本文到此为止。希望能帮到你,也希望你能多关注我们的更多内容!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: