前端学习日记Vue：watch选项与$watch实例方法

最新推荐文章于 2022-11-10 16:43:05 发布
最新推荐文章于 2022-11-10 16:43:05 发布
阅读量185 收藏
点赞数
分类专栏： 前端 文章标签： 前端学习日记Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42585386/article/details/102532732
版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../assets/js/vue.js"></script>
        <title>Watch option</title>
    </head>
    <body>
        <h1>Watch option</h1>
        <hr>
        <div id="app">
            <p>今日温度：{{Temperature}}</p>
            <p>穿衣建议:{{this.suggestion}}</p>
            <p>
                <button @click="add">添加温度</button>
                <button @click="reduce">减少温度</button>
            </p>
        </div>
        <script type="text/javascript">
            var suggestion = ['T恤短袖', '夹克长裙', '棉衣羽绒服'];
            var app = new Vue({
                el: '#app',
                data: {
                    temperature: 14,
                    suggestion: 'T恤短袖'
                },
                methods: {
                    add: function() {
                        this.temperature += 5;
                    },
                    reduce: function() {
                        this.temperature -= 5;
                    }
                },
                computed: {
                    Temperature: function() {
                        return this.temperature + "°C";
                    }
                },
                // watch: {
                //     temperature: function(newVal, oldVal) {
                //         if (newVal >= 26) {
                //             this.suggestion = suggestion[0];
                //         } else if (newVal < 26 && newVal >= 0) {
                //             this.suggestion = suggestion[1];
                //         } else {
                //             this.suggestion = suggestion[2];
                //         }
                //     }
                // }
            })
            app.$watch('temperature', function(newVal, oldVal) {
                if (newVal >= 26) {
                    this.suggestion = suggestion[0];
                } else if (newVal < 26 && newVal >= 0) {
                    this.suggestion = suggestion[1];
                } else {
                    this.suggestion = suggestion[2];
                }
            })
        </script>

    </body>

</html>

Stephen·You
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuejs中的watch选项监控数据的变化
u012183426的博客
09-11 853
1.watch写在Vue构造器内部 2.直接使用vm.$watch app.$watch('temperature',function(newVal, oldVal){}) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
Vue实例方法 $watch
codesWay的博客
02-27 1604
可能会经常遇到这样的问题，怎么监视数据的变化，当数据发生变化的时候，要做一些事情该如何实现，其实不用担心，Vue有一个方法来解决这个问题： vm.$watch(data,callback,[option]):监视数据的变化，当数据发生变化的时候，执行callback函数，这里的callback函数可以接受两个参数newValue和oldValue作为改变后（前）数据的值，还有option选项，其
this.$watch 和组件的 watch 有什么区别
qq_36437172的博客
10-18 1万+
watch watch：一个对象，键是需要观察的表达式，值是对应回调函数，也可以是是方法吗或者包含选项的对象。vue 实例将会载实例化是调用 $watch()，遍历 watch 对象的每一个 property。 deep: true：将会深度监听对象的 property改变时，被调用。 immediate: true：将会载监听开始之后立即调用。 注意：不应该使用箭头函数来定义 watcher 函数(例如searchQuery: newValue => this.updateAutocomp.
vue的watch和$watch(深度监听)
weixin_45212940的博客
03-27 2562
vue的watch和$watch(深度监听) 链接: https://www.cnblogs.com/yesu/p/9546458.html 列举大概 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstNa...
【Vue】watch与$watch使用详解
锋利的绵羊的博客
11-20 1770
`vue-watch` 有两个可配置项 `deep`、`immediate`，分别表示是否**深度监听**及是否**立即调用** `watch` 的定义形式包括：`函数`、`对象`、`字符串`、`数组` 监听多个数据变化
vue - watch:{}监听与 this.$watch()的区别
qq_43886365的博客
11-10 2184
vue中watch:{}监听与 this.$watch()的区别
【vue 3 之 `watch()` & `$watch()` 侦听器的使用与讲解】各侦听源&各配置参数案例讲解
从今年开始写写博客~~
01-10 1954
watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。 watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。 缓冲回调：缓冲回调不仅可以提高性能，还有助于保证数据的一致性。在执行数据更新的代码完成之前，侦听器不会被触发。简单来说，同步修改数据时，修完操作执行完毕后才会触发回调。注意是同步！所以异步操作的时候，要注意多次触发watch的问题。（所有同步操作为1次，异步操作有几次就触发
Vue.js 中的 $watch使用方法
12-11
下面我们将详细探讨`$watch`的工作原理及其在Vue实例中的应用。 首先，我们需要了解Vue的数据响应化机制。这一机制的核心包括`Observer`、`Watcher`和`Dep`。当你创建一个新的Vue实例时，所有的数据对象都会被`...
Vue2 监听属性改变watch的实例代码
12-29
效果： 代码： 幼儿园入学年龄（3～6）：</label><input type=number v-model=child.age> <button @click=older>... var app = new Vue({ el:#app2, data:{ child:{age:2}, hasErr:fals
深入对Vue.js $watch方法的理解
12-10
咱们先来看一下对于$watch方法在vue.js的API中是怎么解释的吧：观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。...
vue组件watch属性实例讲解
12-29
本文实例为大家分享了vue组件watch属性的具体代码，供大家参考，具体内容如下 <!doctype html> <html> <head> <meta charset=UTF-8> <title>wacth属性</title> [removed]...
理解vue中$watch使用
热门推荐
前端精髓
11-28 1万+
侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的 data、prop 或 computed property 名作为字符串传递。对于更复杂的表达式，用一个函数取代。 假设 data 定义的数据如下： data() { return { a: 1, b: 2, c: { d: 3, e: 4 } } }, 单个的顶层属性，第一个参数是字符串，第二个参数是函数。 created()
VUE,关于watch与$watch问题，求指教
qq_39645616的博客
10-30 3527
上边一个watch监听imgArr数据变化，当我ajax请求返回数据以后，将数据赋值给imgArr，则watch无法监听到数据编号。 同样的操作，把watch拿出来不在new vue实例里边使用watch监听，而在外边使用$watch监听，则可以监听到数据变化，求指教啊大佬们。为什么啊，搞不懂啊。...
AngularJs学习笔记(4)--$scope里的$watch方法
weixin_33970449的博客
06-12 596
本文主要接住前文简单介绍一下angular中的$watch方法在前面介绍过$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。(1)$watch简介在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。AngularJS内部的watc...
$watch()监听
abcdefg182的博客
06-01 612
demo1:监听counter的变化 <div id="app"> <p style="font-size: 25px;">计数器:{{ counter }}</p> <button @click="counter++" style="font-size: 25px;">点我</button> </div> const app = new Vue({ el:"#app",
vue动态数据绑定3--深层次数据变化逐层往上传播
林雨静
08-01 1831
基于vue动态数据绑定2，再多考虑一个问题：”深层次数据变化如何逐层往上传播”。举个例子。let app = new Observer({ name: { first: 'yy', last: 'jm' }, age: 18 });app2.$watch('name', function (newName) { console.log(
Vue3 watch 侦听器 | watchEffect
海胆的博客
08-11 769
watch 允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。watch 需要侦听特定的数据源，并在回调函数中执行 effect。watch 与用字符串确定监听对象，只能将顶层的或属性名作为字符串传递对于更复杂的表达式，需要用一个函数取代当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为引用的对象/数组并没有发生改变。
Vue——watch选项详解
yangdengcheng的博客
05-23 1万+
1. 什么是watch选项？（官方解释） 类型：{ [key: string]: string | Function | Object | Array } 详细：一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例i化时调用 $watch()，遍历 watch 对象的每一个属性。 2. 通俗解释 watch选项能够监听值的变化。 3...
vue中$watch 实例方法
最新发布
08-18
在Vue中，$watch是一个实例方法，用于观察Vue实例中的数据变化。根据引用，如果使用Vue3，可以使用键路径来观察数据的变化。例如，在created钩子函数中使用键路径来观察c.d的变化。当c.d的值发生变化时，回调函数将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值