Vue.js监听属性

心已赠人 2022-05-10 06:34 136阅读 0赞

监听属性：

watch属性为Vue的监听属性，用来监听Vue实例中数据的变动。可以是data中定义的属性（也经常这么用），也可以时Vue自带的属性，比如$route。

首先看示例：

<div id = "app">

<p style = "font-size:25px;">计数器: \{ \{ counter \}\}</p>

<button @click = "counter++" style = "font-size:25px;">点我</button>

</div>

<script type = "text/javascript">

var vm = new Vue(\{

el: '\#app',

data: \{

counter: 1,

counter: 1

\},

watch:\{

counter:function(val1,val2)\{

console.log('val1: '+val1+', val2: '+val2);

this.counter2++;

\},

counter2:\{

handler:function(val1)\{

console.log('counter2: '+val1);

\},

deep:false,

immediate:true

\}

\}

\});

vm.$watch('counter', function(nval, oval) \{

alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

\});

</script>

可以看出：watch是一个对象，其中的数据为键值对。

键：要监听的数据。

值：对应回调函数。可以是定义个匿名函数，如示例中counter对应的函数。有两个参数，第一个为改变后的值，第二个为改变前的值。第二个值可以省略。

也可以是一个函数名，需要用单引号引上。(暂时不确定使用方式）

也可以是一个对象，如示例所示，counter2的监听值为一个对象。该对象有三个属性：handler，就是对应的回调函数。deep，指定是否深度监听。immediate，指定是否已当前值执行回调。

这三个属性并非全部必须。一般这种方式用来监听键为对象时，其中值的变动，需要进行深度监听。

最后，vm.$watch(...)是主动调用$watch方法来进行数据的检测，同回调一样，在数据变动时调用。根据需要使用。

发表评论取消回复

表情：

评论列表（有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js计算属性和监听属性

目录一、computed计算属性（1）计算属性的缓存（2）计算属性的setter 二、watch监听属性 -------------------- 一、co

柔情只为你懂/ 2024年03月24日 11:39/ 0 赞/ 18 阅读

相关 vue计算属性和监听属性

计算属性 1.首先，先看一个字符串反转的例子： <div id="app1"> { { message.split('').reverse().

野性酷女/ 2023年07月13日 03:42/ 0 赞/ 57 阅读

相关 Vue--计算属性和监听属性

computed:计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要属性值还没有发生改变，多次访问属性计算属性会立即返回之

灰太狼/ 2022年12月07日 04:27/ 0 赞/ 162 阅读

相关 vue3 监听computed属性

![在这里插入图片描述][a79c8a68c9cd0debd686357f7d50170e.png] <script> import { defineCom

亦凉/ 2022年08月31日 02:27/ 0 赞/ 229 阅读

相关 Vuejs computed set get计算属性

直接贴代码，看注释 <template> <div id="example"> <!-- 设置计算属性的绑定字段，即reversedMessage的计算属性

柔光的暖阳◎/ 2022年06月09日 12:12/ 0 赞/ 199 阅读

相关 Vuejs 嵌套数组属性值的修改

![70][] 这个效果终于实现了！ html的写法： <x-table :cell-bordered="false" :content-bordered="fa

浅浅的花香味﹌/ 2022年05月21日 06:52/ 0 赞/ 402 阅读

相关 VueJs 监听 window.resize 方法---窗口变化

> Vuejs 本身就是一个 MVVM 的框架。 > > 但是在监听 window 上的事件时，往往会显得力不从心。 > > 比如这次是 window

た入场券/ 2022年05月21日 06:44/ 0 赞/ 307 阅读

相关 Vue.js监听属性

监听属性： watch属性为Vue的监听属性，用来监听Vue实例中数据的变动。可以是data中定义的属性（也经常这么用），也可以时Vue自带的属性，比如$route。

心已赠人/ 2022年05月10日 06:34/ 0 赞/ 137 阅读

相关 Vuejs computed get set 计算属性

直接看代码吧 \`\`\` <template> <div id="example"> <!-- 设置计算属性的绑定字段，即reversedMessa

电玩女神/ 2022年02月04日 11:15/ 0 赞/ 265 阅读

相关 vue监听属性

监听属性本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器：

た入场券/ 2021年10月20日 01:24/ 0 赞/ 332 阅读