vue-10 数据监测watch自学视频

╰+哭是因爲堅強的太久メ 2022-12-18 15:52 48阅读 0赞

** 01 **

**watch**

Vue 通过 watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id = "app">
    <p>计数器: {
        { num }}</p>
    <button @click="num++" >点我</button>
    </div>
    <script>
    var vm = new Vue({
    el: '#app',
    data: {
    num: 1
        },
    watch:{
    'num': function(nval, oval) {
    console.log('num变化 :' + oval + ' 变为 ' + nval + '!');
          },      
        }
    });
    </script>

每次点击按钮都会输出：

num变化 :1变为2!

num变化 :2变为3!

...

** 02 **

**对象变化监听**

我们需要监听对象的属性值是否发生改变用，我们采用deep方式来监听

<div id = "app">
    <p>计数器: {
        { num }}</p>
    <button @click="num.age++" >点我</button>
    </div>
    <script>
    var vm = new Vue({
    el: '#app',
    data: {
    num: {age:1}
        },
    watch:{
    'num':{
    handler:function(nval, oval) {
    console.log('num变化 :' + oval.age + ' 变为 ' + nval.age + '!')
              },
    deep:true
            }
        }
    });
    </script>

** 03 **

**methods,watch,computed的区别**

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

methods 方法表示一个具体的操作，主要书写业务逻辑；

watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；

当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，自定义 watcher 的方式就会很有帮助。

发表评论取消回复

表情：

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

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

相关阅读

相关 vue watch

<body> <div id="app"> <div> <span>名：</span> <span>

亦凉/ 2023年01月08日 04:21/ 0 赞/ 77 阅读

相关 vue 属性 watch

<body> <div id="app"> <div> <span>名：</span> <span>

朱雀/ 2023年01月07日 08:52/ 0 赞/ 134 阅读

相关 vue14 动画-自学视频

01 动画truansition > vue本身并不产生动画，它会在元素显示与隐藏时候自动添加一些类名，程序员可以通过这些类名来设计动画 Vue 提供了内置的过渡

﹏ヽ暗。殇╰゛Y/ 2022年12月18日 15:53/ 0 赞/ 73 阅读

相关 vue 09 计算computed视频自学

01 computed 计算模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div

谁借莪１个温暖的怀抱￠/ 2022年12月18日 15:52/ 0 赞/ 66 阅读

相关 vue-06 监听事件-自学视频

01 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 <div id="app"> <button v-o

左手的ㄟ右手/ 2022年12月18日 15:52/ 0 赞/ 97 阅读

相关 vue-10 数据监测watch自学视频

01 watch Vue 通过 watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。 <div id = "

╰+哭是因爲堅強的太久メ/ 2022年12月18日 15:52/ 0 赞/ 49 阅读

相关 vue-05列表渲染自学视频教程

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in list 形式的特殊语法，list是源数据数组并且 item 是数组元素迭代的

朱雀/ 2022年12月18日 15:51/ 0 赞/ 108 阅读

相关 vue 数据代理和数据监测

vue 数据代理和数据监测数据代理和数据监测是vue 里面一个很重要的概念，但是他们在vue中扮演什么角色，了解这些前得先了解数据代理和数据监测的概念。 vue中双

桃扇骨/ 2022年09月09日 09:16/ 0 赞/ 111 阅读

相关 vue - watch

watch常见配置 watch: { a: function (val, oldVal) { console.log(val, oldVa

港控/mmm°/ 2021年09月19日 12:56/ 0 赞/ 301 阅读

相关 linux watch 命令简介监测监控变化

watch可以帮你监测一个命令的运行结果，来监测你想要的一切命令的结果变化常见命令参数 Usage: watch [-dhntv] [--differe

迈不过友情╰/ 2021年07月28日 11:49/ 0 赞/ 398 阅读